Flutter Navigation 2.0修改pages列表后UI未更新该如何解决？

DevOps 小满

2026-10-4

问题核心原因

你直接修改了原有_pages列表的内容，但没有改变列表的引用地址，Flutter的Navigator组件判断pages属性是否更新时，对比的是列表的引用而非内部元素，所以无法感知到路由栈的变化，自然不会更新UI。

另外你当前的onPopPage回调逻辑不符合规范，系统返回键触发时会出现状态不一致的问题。

修复方案

1. 每次修改路由栈时生成新的列表实例

不要直接在原有_pages列表上执行add/removeLast操作，而是基于原有列表创建新的列表对象赋值给_pages，触发Navigator的更新逻辑。

2. 修正`onPopPage`回调逻辑

在回调中同步修改路由栈状态，保证系统返回键操作和手动点击Up按钮的行为一致。

修复后的核心代码

_MyAppState 部分

class _MyAppState extends State<MyApp> {
  // 去掉final修饰，因为后续会替换列表实例
  List<Page> _pages = <Page>[];

  @override
  void initState() {
    super.initState();
    _dive(0);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Navigator(
        pages: _pages,
        onPopPage: (route, result) {
          if (!route.didPop(result)) {
            return false;
          }
          // 系统返回时同步更新路由栈
          setState(() {
            _pages = List.from(_pages)..removeLast();
          });
          return true;
        },
      ),
    );
  }

  void _arise() {
    setState(() {
      // 生成新的列表实例
      _pages = List.from(_pages)..removeLast();
    });
  }

  void _dive(int value) {
    setState(() {
      // 生成新的列表实例
      _pages = List.from(_pages)..add(
        MaterialPage(
          key: ValueKey(value),
          child: DiveRoute(
            value,
            _arise,
            _dive,
          ),
        ),
      );
    });
  }
}