Flutter嵌套路由下Scaffold的AppBar不显示返回导航按钮问题求解

API 探路者

2026-10-14

问题原因

AppBar自动展示返回按钮的逻辑是：判断当前页面所属的Navigator路由栈深度是否大于1。你嵌套的内部Navigator初始栈中仅有MyChildPageRoot一个路由，所以AppBar不会自动生成返回按钮。而硬件返回键优先响应根Navigator的pop逻辑，因此可以正常回到首页。

解决方案

无需调整现有路由结构和命名路由逻辑，仅需要在MyChildPageRoot的AppBar中手动添加根路由返回按钮即可，修改后的关键代码如下：

class MyChildPageRoot extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Child page'),
        // 新增leading逻辑：内部路由栈仅有1层时显示返回根导航的按钮
        leading: ModalRoute.of(context)?.canPop == false
            ? IconButton(
                icon: const Icon(Icons.arrow_back),
                onPressed: () => Navigator.of(context, rootNavigator: true).pop(),
              )
            : null,
      ),
      // 剩余原有代码保持不变
      body: Container(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        Center(child: Text('This is child page root ')),
        Center(
            child: OutlinedButton(
                child: Text('Visit sub child page 1'),
                onPressed: () {
                  Navigator.pushNamed(context, '/child_1');
                })),
        Center(
            child: OutlinedButton(
                child: Text('Visit sub child page 2'),
                onPressed: () {
                  Navigator.pushNamed(context, '/child_2');
                })),
      ])),
    );
  }
}