Flutter购物车调整商品数量时如何阻止ListTile位置切换

问题根源在于你使用的是Dart默认的Map，它是无序的哈希表，每次购物车数据更新后，遍历groupedItems.entries的顺序无法保证和商品首次加入购物车的顺序一致，所以调整数量后列表项会乱序。

下面是两种可行的解决方法：

方法一：使用LinkedHashMap保留插入顺序 #

Dart的LinkedHashMap会记住键的插入顺序，刚好符合我们需要的“商品首次加入的顺序”。

修改步骤： #

1. 在文件顶部导入dart:collection包：

import 'dart:collection';

2. 将分组用的Map替换为LinkedHashMap：

// 替换原来的Map定义，用LinkedHashMap保留顺序
Map<String, List<ImageDetails>> groupedItems = LinkedHashMap();

之后你的分组逻辑不用改，因为LinkedHashMap的使用方式和普通Map一致，但它会始终按照商品第一次被加入购物车的顺序来排列分组项，调整数量时不会改变顺序。

方法二：记录首次出现顺序并排序分组结果 #

如果不想引入LinkedHashMap，可以先记录商品首次出现的顺序，再对分组后的结果排序：

修改分组逻辑： #

// 先记录每个商品首次出现的顺序
List<String> itemOrder = [];
for (var item in shop.cart) {
  if (!itemOrder.contains(item.title)) {
    itemOrder.add(item.title);
  }
}

// 正常分组
Map<String, List<ImageDetails>> groupedItems = {};
for (var item in shop.cart) {
  if (groupedItems.containsKey(item.title)) {
    groupedItems[item.title]!.add(item);
  } else {
    groupedItems[item.title] = [item];
  }
}

// 根据首次出现的顺序对分组条目排序
final sortedEntries = groupedItems.entries.toList()
  ..sort((a, b) => itemOrder.indexOf(a.key) - itemOrder.indexOf(b.key));

修改ListView的遍历对象： #

把原来的groupedItems.entries.map(...)改成sortedEntries.map(...)：

ListView(
  children: sortedEntries.map((entry) {
    // 原来的列表项逻辑不变
    final List<ImageDetails> groupedItems = entry.value;
    final totalQuantity = groupedItems.length;
    final productPrice = groupedItems[0].price;

    return Container(
      // ... 原来的代码
    );
  }).toList(),
)

完整修改后的代码示例（方法一）： #

import 'dart:collection';
// 其他必要的导入...

class CartPage extends StatefulWidget {
  const CartPage({Key? key}) : super(key: key);

  @override
  State<CartPage> createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
  void removeFromCart(ImageDetails imageDetails, BuildContext context) {
    final shop = context.read<Shop>();
    shop.removeFromCart(imageDetails);
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<Shop>(
      builder: (context, shop, child) {
        // 使用LinkedHashMap保留商品插入顺序
        Map<String, List<ImageDetails>> groupedItems = LinkedHashMap();

        // Group items by product name
        for (var item in shop.cart) {
          if (groupedItems.containsKey(item.title)) {
            groupedItems[item.title]!.add(item);
          } else {
            groupedItems[item.title] = [item];
          }
        }

        return Scaffold(
          appBar: AppBar(
            title: const Text('My Cart'),
          ),
          body: Column(
            children: [
              Expanded(
                child: ListView(
                  children: groupedItems.entries.map((entry) {
                    final List<ImageDetails> groupedItems = entry.value;
                    final totalQuantity = groupedItems.length;
                    final productPrice = groupedItems[0].price;

                    return Container(
                      decoration: const BoxDecoration(color: Colors.blue),
                      child: ListTile(
                        title: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(entry.key),
                            Row(
                              children: [
                                IconButton(
                                  onPressed: () {
                                    if (totalQuantity > 1) {
                                      shop.removeFromCart(groupedItems[0]);
                                    }
                                  },
                                  icon: const Icon(Icons.remove),
                                ),
                                Text('QTY: $totalQuantity'),
                                IconButton(
                                  onPressed: () {
                                    shop.addToCart(groupedItems[0], 1);
                                  },
                                  icon: const Icon(Icons.add),
                                ),
                              ],
                            ),
                          ],
                        ),
                        subtitle: Text(productPrice),
                        trailing: IconButton(
                          onPressed: () {
                            for (var item in groupedItems) {
                              shop.removeFromCart(item);
                            }
                          },
                          icon: const Icon(Icons.delete),
                        ),
                      ),
                    );
                  }).toList(),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: SizedBox(
                  width: 100,
                  child: ElevatedButton(
                    onPressed: () {},
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                    child: const Text(
                      'Pay Now',
                      style: TextStyle(color: Colors.white, fontSize: 12),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

内容的提问来源于stack exchange，提问作者Im Onforum