如何在Flutter中反转ListView

Question

我实现了一个从json获取数据的listview。

我按照这个实现进行操作。

如何才能反转这个列表视图的顺序？（第一个元素应该变为最后一个，以此类推...）

- Dev9977

---

请参考此链接：Flutter中ListView中列表的反转。 - Maulik

Answer 1

在将列表提供给ListView之前，您应该能够将其反转。

List<String> animals = ['cat', 'dog', 'duck'];
List<String> reversedAnimals = animals.reversed.toList();

- chemamolins

Answer 2

对于 ListView，有一个名为 reverse 的标志，默认值为 false。将其更改为 true。

- Dinesh Balasubramanian

---

有时使用"reverse: true"并不能使你的列表完全倒序，它会从Listview底部开始指向整个列表。因此，更好的方法是先将数组进行反转。 - Maulik

Answer 3

ListView 中的一个属性是 reverse，将其设置为 true 将反转您的列表：

ListView.builder(
      reverse: true,
);

- Nhật Trần

---

这个 reverse:true 当被点击时会跳转到列表的最后一个元素，所以这不是完美的解决方案。 - ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ

Answer 4

以下是支持空安全的反转列表视图的解决方案。 不要使用reverse:true，因为它会反转你的数据，但当你在应用中打开listview.builder小部件时，它会自动滚动到最后一个项目。 为了避免这种情况，请使用以下方法：

ListView.builder(                  
                  itemCount: customer?.data.length ?? 0,
                  itemBuilder: (BuildContext context, int index) {
                    int itemCount = customer?.data.length ?? 0;
                    int reversedIndex = itemCount - 1 - index;
                    child: Container(
                     child: Text(value.allCustomerModel!.data![reversedIndex].attributes!.name.toString(),
                      ),)

- ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ

Answer 5

不要使用反转 listview 的方法，而是使用 reversed 属性 或者 reverse 函数 来反转列表。

- Santhosh Joseph

Answer 6

你可以在返回 ListView 元素之前反转你的列表顺序。

ListView.separated(
    itemCount: widget.orderList.length,
    itemBuilder: (context, index) {
       final reversed = widget.orderList.reversed.toList(); // reverse your list here
       final item = reversed[index]; // assign it with index
       return Text(
           item.name, // the item name in my list
          ),
      },
      // The separators
      separatorBuilder: (context, index) {
         return const Divider(
            color: Colors.grey,
         );
        },
      ),

- Mazhar Niaz

Answer 7

您可以简单地将其反转，就像这样==>>

ListView.builder(
                      itemCount: snapshot.data!.length,
                      itemBuilder: (context, index) {
                        var reverselist = snapshot.data!.reversed.toList();

然后可以用作 ==>

     Text(
             reverselist[index]
                                            .tituloCategoria
                                            .toString(),
                                                                            

                                        overflow: TextOverflow.ellipsis,
                                      ),

`

- Lokendra singh Chauhan

Answer 8

如果你想要有条件地反转传递给ListView的列表，你可以使用这个扩展：

extension ListExtension<T> on List<T>{
  List<T> reverse(bool condition){
    return condition ? reversed.toList() : this;
  }
}

并将其用作[].reverse(yourCondition) （如果您在其他文件中定义了它，请不要忘记导入此扩展）

- NullByte08

Answer 9

例子：

List data = [
     {
        "number" : 1,
        "iterator" : 0
     },
     {
        "number" : 2,
        "iterator" : 1
     },
     {
        "number" : 3,
        "iterator" : 2
     },
   ];

**关于 ListView ... **

ListView(children: [
   for (var i = data.length; i > 0; i--) ... [
      Text(data[i]["number"].toString())
   ]
])

- Moch Alfian

Answer 10

List<int> numbers = [1, 2, 3, 4, 5, 6, 7];
List<int> reversedNumbers = numbers.reversed.toList();

- Sabahat Hussain Qureshi

---

虽然我们感谢您的回答，但如果它能提供其他答案所没有的附加价值会更好。在这种情况下，由于另一个用户已经发布了该解决方案，因此您的答案并未提供附加价值。如果以前的答案对您有帮助，您应该在获得足够的声望后投票支持它。 - lepsch