Flutter/Dart中如何为底部导航栏图标按钮配置内容与代码实现页面跳转

分两种常见使用场景，你可以根据自己的需求选对应的实现方式：

1. 前置准备：先定义目标页面 #

先写好你要跳转的新页面基础代码，示例如下：

// 目标页面代码示例
class TargetPage extends StatelessWidget {
  const TargetPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("新页面")),
      body: const Center(child: Text("这是点击底部按钮打开的新页面")),
    );
  }
}

2. 场景1：点击按钮切换底部导航对应Tab页（跳转后保留底部导航栏） #

这是常规底部Tab切换的实现方式，点击不同按钮切换当前展示的页面内容，底部导航栏一直保留：

• 先在State类中定义Tab页列表和当前选中索引
• 在bottomNavigationBar的onTap回调中更新选中索引的状态
• 将Scaffold的body绑定为当前索引对应的页面

完整示例代码：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 所有底部Tab对应的页面列表
  final List<Widget> _tabPages = const [
    HomeContentPage(), // 首页内容页
    CategoryPage(), // 分类页
    TargetPage(), // 刚才定义的目标页
    MinePage(), // 个人中心页
  ];
  // 当前选中的Tab索引，默认是第一个首页
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //  body直接展示当前选中的Tab页内容
      body: _tabPages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.add_box), label: "新增"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
        ],
        // 点击底部按钮的回调方法
        onTap: (index) {
          setState(() {
            // 更新当前选中索引，页面会自动刷新切换
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

3. 场景2：点击按钮打开独立新页面（跳转后隐藏底部导航栏，支持返回） #

适合底部导航有特殊功能按钮的场景，比如点击发布按钮跳转到独立的发布页，跳转后底部导航不显示，左上角自带返回按钮：
只需要在onTap回调中加判断，对应索引的按钮点击时调用Navigator路由跳转即可，示例：

onTap: (index) {
  // 假设索引为2的是特殊功能按钮
  if (index == 2) {
    // 跳转新页面
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const TargetPage()),
    );
  } else {
    // 其他按钮还是正常切换Tab
    setState(() {
      _currentIndex = index;
    });
  }
}

附加说明 #

• 如果需要打开新页面后自动执行对应操作，把操作逻辑写在目标页面的initState生命周期方法中即可
• 如果需要新页面关闭后回传数据到上一页，用final result = await Navigator.push(...)接收返回值，目标页调用Navigator.pop(context, 要回传的数据)即可返回数据

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