自定义Flutter底部导航栏：点击同项重置页面状态的方案咨询

当前用PageController+PageView搭建的底部导航结构，每个页面嵌套了独立Navigator，还靠AutomaticKeepAliveClientMixin保持状态。现在需要实现：再次点击已选中的底部导航按钮时，将对应页面的Navigator栈清空，回到初始视图。

以下两种方案均无需第三方包，可按需选择：

方案一：通过状态通知触发页面栈重置 #

适合需要在子页面配合做额外逻辑的场景：

1. 父组件中记录当前选中页索引，并给每个页面准备一个ValueNotifier传递重置信号：

int _currentPage = 0;
final PageController pageController = PageController();
final List<ValueNotifier<bool>> _resetTriggers = [
  ValueNotifier(false),
  ValueNotifier(false),
  ValueNotifier(false),
];

@override
void dispose() {
  pageController.dispose();
  _resetTriggers.forEach((trigger) => trigger.dispose());
  super.dispose();
}

2. 修改底部按钮点击逻辑：点击当前页则触发重置，否则正常切换页面：

void _handleTabTap(int index) {
  if (index == _currentPage) {
    // 切换ValueNotifier值触发监听
    _resetTriggers[index].value = !_resetTriggers[index].value;
  } else {
    pageController.jumpToPage(index);
    _currentPage = index;
  }
}

3. 子页面（如Screen1）中监听信号，收到后重置Navigator栈：

class Screen1 extends StatefulWidget {
  final ValueNotifier<bool> resetTrigger;

  const Screen1({super.key, required this.resetTrigger});

  @override
  State<Screen1> createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    widget.resetTrigger.addListener(() {
      // 回到栈底的初始路由
      Navigator.of(context).popUntil((route) => route.isFirst);
    });
  }

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用，否则AutomaticKeepAliveClientMixin不生效
    // 页面内容
    return Scaffold(...);
  }
}

4. 给PageView中的子Navigator传递参数：

PageView(
  controller: pageController,
  onPageChanged: (index) => _currentPage = index,
  children: [
    Navigator(
      onGenerateRoute: (settings) => MaterialPageRoute(
        builder: (context) => Screen1(resetTrigger: _resetTriggers[0]),
      ),
    ),
    Navigator(
      onGenerateRoute: (settings) => MaterialPageRoute(
        builder: (context) => Screen2(resetTrigger: _resetTriggers[1]),
      ),
    ),
    Navigator(
      onGenerateRoute: (settings) => MaterialPageRoute(
        builder: (context) => Screen2(resetTrigger: _resetTriggers[2]),
      ),
    ),
  ],
)

方案二：用GlobalKey直接操作NavigatorState #

无需修改子页面代码，更简洁：

1. 父组件中定义每个Navigator的GlobalKey，处理点击逻辑：

int _currentPage = 0;
final PageController pageController = PageController();
final List<GlobalKey<NavigatorState>> _navigatorKeys = [
  GlobalKey<NavigatorState>(),
  GlobalKey<NavigatorState>(),
  GlobalKey<NavigatorState>(),
];

void _handleTabTap(int index) {
  if (index == _currentPage) {
    // 通过key直接获取NavigatorState，重置到初始路由
    _navigatorKeys[index].currentState?.popUntil((route) => route.isFirst);
  } else {
    pageController.jumpToPage(index);
    _currentPage = index;
  }
}

2. 给每个嵌套Navigator绑定对应GlobalKey：

PageView(
  controller: pageController,
  onPageChanged: (index) => _currentPage = index,
  children: [
    Navigator(
      key: _navigatorKeys[0],
      onGenerateRoute: (settings) => MaterialPageRoute(
        builder: (context) => Screen1(),
      ),
    ),
    Navigator(
      key: _navigatorKeys[1],
      onGenerateRoute: (settings) => MaterialPageRoute(
        builder: (context) => Screen2(),
      ),
    ),
    Navigator(
      key: _navigatorKeys[2],
      onGenerateRoute: (settings) => MaterialPageRoute(
        builder: (context) => Screen2(),
      ),
    ),
  ],
)

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