带有状态管理的 Flutter 更新列表答案

【问题标题】：Flutter update list with state managment带有状态管理的 Flutter 更新列表
【发布时间】：2021-09-04 19:41:24
【问题描述】：

我在我的 2 页中显示列表视图。在第一页上只是简单地显示了 listView，而在另一页上我正在添加并通过 listView 构建器查看数组。现在我面临的问题是，当我在数组中添加某些内容时，它在 ListView 构建器中没有改变，因此我可以通过 setState 对其进行管理，但是当我返回第一个屏幕时，该屏幕上的结果并没有改变。我已经生成了一些示例代码来清除

var listArray = [];

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

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

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First'),

      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: (){
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => ListWidget()),
              );
            },
            child: Container(
              color: Colors.blue,
              height: 100,
              width: 100,
              child: Text('Go List'),
            ),
          ),
          Expanded(
            child: ListView.builder(
                itemCount: listArray.length,
                itemBuilder: (BuildContext context, int index) {
                  return Text('name ${listArray[index]['name']} id ${listArray[index]['id']}');
                }),
          ),


        ],
      ),
    );
  }
}



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

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

class _ListWidgetState extends State<ListWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.black),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: Column(
        children: [
          GestureDetector(
            onTap: (){
              setState(() {
                listArray.add({'name' : 'test', 'id' : 101, 'comments': 'xyzzz'});

              });
            },
            child: Container(
              color: Colors.blue,
              height: 100,
              width: 100,
              child: Text('Add to list'),
            ),
          ),
          Expanded(
            child:  ListView.builder(
                itemCount: listArray.length,
                itemBuilder: (BuildContext context, int index) {
                  return Text('name ${listArray[index]['name']} id ${listArray[index]['id']}');
                }),
          )
        ],
      ),
    );
  }
}

我正在查找应用程序状态管理的文档，但找不到用于列表更新的内容。如果有任何代码帮助或一些我可以找到与此类似的答案的示例，那就太好了。

【问题讨论】：

标签： flutter dart

【解决方案1】：

尝试在返回时更新第一个小部件的状态，因此在_FirstPageState 中写下：

       onTap: () async {
          await Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => ListWidget()),
          );
          setState({});
        }

【讨论】：

但是我将值放入 ListWidget 然后我返回到 FirstPage 它不会随 setState 改变我也在不同的页面中显示这个 ListWidget 所以这就是 setState 不起作用的原因

【解决方案2】：

声明像 listArray 这样的全局变量是一种不好的做法。您可能应该使用一些状态管理包，例如 provider 或类似的。

【讨论】：