Question

我在我的 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']}');
                }),
          )
        ],
      ),
    );
  }
}

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

Answer 1

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

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

Answer 2

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

带状态管理的 Flutter 更新列表

2 个答案: