Flutter跨页面列表同步更新的状态管理实现方案求助

setState 仅会触发其所属的State组件重绘，你在第二页ListWidget中修改全局listArray后调用的setState只会更新第二页UI，第一页FirstPage没有触发重绘逻辑，因此无法感知全局数组的变更。

利用Flutter路由的返回回调机制，从第二页返回后主动触发第一页重绘，修改逻辑如下：

1. 第一页跳转时添加异步监听，路由返回后调用setState刷新列表
2. 第二页逻辑无需额外调整

修改后的完整代码：

import 'package:flutter/material.dart';

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: const Text('First'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: () async {
              // 监听第二页返回事件
              await Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const ListWidget()),
              );
              // 返回后主动触发重绘，更新第一页列表
              setState(() {});
            },
            child: Container(
              color: Colors.blue,
              height: 100,
              width: 100,
              child: const 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: const Text('Second Page'),
        leading: IconButton(
          icon: const 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: const 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']}');
                }),
          )
        ],
      ),
    );
  }
}

如果后续有更多页面需要共享这个列表数据，推荐用ValueNotifier实现响应式更新，不需要手动处理路由回调：

1. 用ValueNotifier包裹全局列表
2. 两个页面都用ValueListenableBuilder监听列表变化，自动触发UI更新

核心代码示例：

// 定义全局可监听的列表
final ValueNotifier<List<Map<String, dynamic>>> listArray = ValueNotifier([]);

// 第一页的ListView部分替换为：
Expanded(
  child: ValueListenableBuilder(
    valueListenable: listArray,
    builder: (context, value, child) {
      return ListView.builder(
        itemCount: value.length,
        itemBuilder: (context, index) {
          return Text('name ${value[index]['name']} id ${value[index]['id']}');
        }
      );
    },
  ),
)

// 第二页添加元素的逻辑改为：
onTap: (){
  listArray.value = List.from(listArray.value)..add({'name' : 'test', 'id' : 101, 'comments': 'xyzzz'});
},
// 第二页的ListView同样替换为ValueListenableBuilder包裹即可，不需要手动调用setState

内容的提问来源于stack exchange，提问作者Umaiz Khan