Flutter底部导航栏选中项点击返回初始页面及禁用需求求助

问题说明 #

需求 #

• 点击底部导航栏项可切换对应页面，页面内包含跳转至内部页面（如MyCustomPage）的按钮
• 进入内部页面后，点击已选中的导航项时，需返回该tab的初始页面（而非停留在内部页面）

当前问题 #

进入内部页面后，底部导航栏的选中项仍可点击，但点击后停留在内部页面，无法返回tab初始页面

解决方案 #

核心思路是为每个tab页面的Navigator分配全局Key，通过全局Key控制导航栈；同时优化底部导航栏的点击逻辑，区分"切换tab"和"返回当前tab根页面"两种操作。

修改后的完整代码 #

main.dart

import 'package:flutter/material.dart';
import 'MyPage.dart';
import 'MyPage2.dart';
import 'MyPage3.dart';
import 'MyCustomPage.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late List<Widget> _pages;
  // 为每个Tab的Navigator创建全局Key，用于控制导航栈
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];

  List<BottomNavigationBarItem> _items = [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: "Home",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.messenger_rounded),
      label: "Messages",
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: "Settings",
    )
  ];

  late int _selectedPage;

  @override
  void initState() {
    super.initState();
    _selectedPage = 0;

    _pages = [
      MyPage(
        count: 1,
        navigatorKey: _navigatorKeys[0],
      ),
      MyPage2(
        count: 2,
        navigatorKey: _navigatorKeys[1],
      ),
      MyPage3(
        count: 3,
        navigatorKey: _navigatorKeys[2],
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 使用IndexedStack保留每个Tab的状态，切换时不会重建页面
      body: IndexedStack(
        index: _selectedPage,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: _items,
        currentIndex: _selectedPage,
        onTap: (index) {
          if (index == _selectedPage) {
            // 点击当前选中的Tab，返回该Tab的根页面
            _navigatorKeys[index].currentState?.popUntil((route) => route.isFirst);
          } else {
            // 切换到其他Tab
            setState(() {
              _selectedPage = index;
            });
          }
        },
      ),
    );
  }
}

MyPage.dart

import 'package:flutter/material.dart';
import 'MyCustomPage.dart';

class MyPage extends StatefulWidget {
  final count;
  final GlobalKey<NavigatorState> navigatorKey;

  MyPage({Key? key, this.count, required this.navigatorKey}) : super(key: key);

  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: widget.navigatorKey,
      initialRoute: '/',
      onGenerateRoute: (RouteSettings settings) {
        WidgetBuilder builder;
        switch (settings.name) {
          case '/':
            builder = (context) => Scaffold(
                  appBar: AppBar(
                    title: Text('page 01'),
                  ),
                  body: Center(
                    // 替换已废弃的RaisedButton为ElevatedButton
                    child: ElevatedButton(
                      child: Text('my page1'),
                      onPressed: () {
                        Navigator.of(context).push(MaterialPageRoute(
                          builder: (ctx) => MyCustomPage()
                        ));
                      },
                    ),
                  ),
                );
            break;
          default:
            builder = (context) => MyCustomPage();
            break;
        }
        return MaterialPageRoute(builder: builder, settings: settings);
      },
    );
  }
}

MyCustomPage.dart

import 'package:flutter/material.dart';

class MyCustomPage extends StatefulWidget {
  MyCustomPage({Key? key}) : super(key: key);

  @override
  _MyCustomPageState createState() => _MyCustomPageState();
}

class _MyCustomPageState extends State<MyCustomPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('custompage'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              child: ListView.builder(
                itemCount: 15,
                itemBuilder: (context, index) {
                  return Container(
                    width: double.infinity,
                    child: Card(
                      child: Center(
                        child: Text('My Custom Page'),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键改动说明 #

1. 使用IndexedStack：替代直接显示_pages[_selectedPage]，保留每个tab页面的状态，切换时不会重新构建页面
2. 全局Key控制导航栈：为每个tab的Navigator分配GlobalKey，允许外部代码控制其导航栈的跳转逻辑
3. 优化底部导航栏点击逻辑：
   • 点击非当前tab：切换到目标tab
   • 点击当前tab：调用popUntil返回该tab的根页面（如果导航栈深度大于1）
4. API更新：将已废弃的RaisedButton替换为ElevatedButton，修正MyCustomPage中错误的build方法参数

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