list - 颤振：列表> 不更新用户界面

Question

我做关于增加产品数量的功能。List<Map<String, dynamic>>首先，我使用包括name和amount将每个产品及其类别分开。当我单击+按钮时，它可以在控制台中正确打印增加的数字。但是在 ui 中，产品的数量不会立即改变。需要点击ExpansionTile折叠，再点击展开，数量会增加。

这是我的创建代码ExpansionTile。

ListView.builder(
   shrinkWrap: true,
   physics: NeverScrollableScrollPhysics(),
   itemCount: categories.length,
   itemBuilder: (context, index) {
   return Container(
      margin: EdgeInsets.only(bottom: 10),
      decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(10),
         color: CollectionsColors.purple,
      ),
      child: ExpansionTile(
         title: Text(
            categories[index],
            style: FontCollection.bodyBoldTextStyle,
         ),
         children: [
            Container(
               color: CollectionsColors.white,
               child: listData(categories[index]),
            ),
         ],
       ),
    );
  },
)

这是在 ExpansionTile 中创建产品列表的代码。

Widget listData(String category) {
    ProductNotifier productNotifier = Provider.of<ProductNotifier>(context);
    List<Map<String, dynamic>> products = [];

    productNotifier.productList.forEach((product) {
      if (product.category == category) {
        products.add({'name': product.name, 'amount': 0});
      }
    });
    print(products);

    return ListView.separated(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemCount: products.length,
      itemBuilder: (context, index) {
        return Container(
          margin: EdgeInsets.only(bottom: 5),
          padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                child: Text(
                  products[index]['name'],
                  style: FontCollection.bodyBlackTextStyle,
                ),
              ),
              Container(
                  key: UniqueKey(),
                  child: CustomStepper(
                      value: products[index]['amount'],
                      iconSize: 25,
                      increaseAmount: () {
                        products[index].update('amount', (value) => ++value);
                        print(products);
                      }
                  )),
            ],
          ),
        );
      },
    );
  }

当我单击+牵牛花中的按钮时，它会在控制台中正确打印。

[{name: Morning Glory, amount: 1}, {name: Collard greens, amount: 0}, {name:  Cucumber, amount: 0}, {name: Carrot, amount: 0}]

但是在ui中并没有将值更改为1。我需要单击ExpansionTile以折叠并再次单击以展开，然后数字会改变。

Answer 1

试试这样：

import 'package:flutter/material.dart';

class ClassName extends StatefulWidget {
  static const String routeName = "/s-test";

  const ClassName({Key? key}) : super(key: key);

  @override
  _ClassNameState createState() => _ClassNameState();
}

class _ClassNameState extends State<ClassName> {
  List<Map<String, dynamic>> products = [];
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      setState(() {
        ProductNotifier productNotifier = Provider.of<ProductNotifier>(context, listen:false);
        productNotifier.productList.forEach((product) {
          if (product.category == category) {
            products.add({'name': product.name, 'amount': 0});
          }
        });
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: categories.length,
        itemBuilder: (context, index) {
          return Container(
            margin: EdgeInsets.only(bottom: 10),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: CollectionsColors.purple,
            ),
            child: ExpansionTile(
              title: Text(
                categories[index],
                style: FontCollection.bodyBoldTextStyle,
              ),
              children: [
                Container(
                  color: CollectionsColors.white,
                  child: listData(categories[index]),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget listData(String category) {
    return ListView.separated(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemCount: products.length,
      itemBuilder: (context, index) {
        return Container(
          margin: EdgeInsets.only(bottom: 5),
          padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                child: Text(
                  products[index]['name'],
                  style: FontCollection.bodyBlackTextStyle,
                ),
              ),
              Container(
                  key: UniqueKey(),
                  child: CustomStepper(
                      value: products[index]['amount'],
                      iconSize: 25,
                      increaseAmount: () {
                        setState(() {
                          products[index].update('amount', (value) => ++value);
                          print(products);
                        });
                      })),
            ],
          ),
        );
      },
    );
  }
}