如何防止ListTile在购物车调整数量时切换位置？

Question

我正在开发一个 Flutter 应用程序，用户可以将产品添加到购物车，并且我在 ListView 中显示购物车项目。购物车中的每件商品均按产品名称分组，并且我提供了按钮来调整每种产品的数量。

但是，我面临一个问题，即调整数量后，ListView 中的项目顺序发生变化。例如，如果我有两种独特的产品，数量分别为 2 和 2，并且我将第一个产品的数量从 2 减少到 1，则第二个产品的数量将低于第一个产品。

即使调整数量后，我也想保持 ListView 中项目的原始顺序。我怎样才能实现这个目标？

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) {
        Map<String, List<ImageDetails>> groupedItems = {};

        // 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),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

Answer 1

您已将 groupedItems 放入构建器中，这意味着每次触发重建时都会重新声明名为 groupedItems 的变量。 groupedItems 似乎是您的树消耗的主要数据源。

将分组项目移至构建器之外

@override
  Widget build(BuildContext context) {
    return Consumer<Shop>(
      builder: (context, shop, child) {
        Map<String, List<ImageDetails>> groupedItems = {};

..... }

到

Map<String, List<ImageDetails>> groupedItems = {};

@override
  Widget build(BuildContext context) {
    return Consumer<Shop>(
      builder: (context, shop, child) {

..... }