Flutter中如何实现底部导航栏的重叠覆盖

问题根源 #

你当前的实现是把带有新底部导航栏的Task页面作为主Scaffold的body内容，而主页面本身大概率还保留着主导航栏。两个底部导航组件都挂载在屏幕底部区域，自然会出现叠加效果。

两种可行解决方案 #

方案1：主Scaffold动态切换底部导航栏 #

让主页面的Scaffold根据当前选中的标签，动态切换底部导航栏的内容。当选中Task标签时显示新的三标签导航，其他标签显示原五标签导航，实现替换而非叠加。

示例代码：

enum _Tab { TAB1, TASK, TAB2, TAB3, TAB4 }

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

  @override
  State<User> createState() => _UserState();
}

class _UserState extends State<User> {
  _Tab _currentTab = _Tab.TAB1;

  // 定义两个底部导航栏
  Widget get _mainBottomNav {
    return BottomNavigationBar(
      currentIndex: _Tab.values.indexOf(_currentTab),
      onTap: (index) {
        setState(() {
          _currentTab = _Tab.values[index];
        });
      },
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: "TAB1"),
        BottomNavigationBarItem(icon: Icon(Icons.task), label: "Task"),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: "TAB2"),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: "TAB3"),
        BottomNavigationBarItem(icon: Icon(Icons.more), label: "TAB4"),
      ],
    );
  }

  Widget get _taskBottomNav {
    return BottomNavigationBar(
      currentIndex: 0, // 可单独维护Task页面的标签索引
      onTap: (index) {
        // 处理Task页面内的标签切换逻辑
      },
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.list), label: "任务列表"),
        BottomNavigationBarItem(icon: Icon(Icons.add), label: "新增任务"),
        BottomNavigationBarItem(icon: Icon(Icons.statistics), label: "统计"),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildCurrentBody(),
      // 根据当前标签切换底部导航栏
      bottomNavigationBar: _currentTab == _Tab.TASK ? _taskBottomNav : _mainBottomNav,
    );
  }

  Widget _buildCurrentBody() {
    switch (_currentTab) {
      case _Tab.TAB1:
        return ChangeNotifierProvider<TabOne>(
          create: (_) => TabOneProvider(),
          child: const TabOne(),
        );
      case _Tab.TASK:
        return ChangeNotifierProvider<Task>(
          create: (_) => TaskProvider(),
          child: const Task(),
        );
      case _Tab.TAB2:
        return ChangeNotifierProvider<TabTwo>(
          create: (_) => TabTwoProvider(),
          child: const TabTwo(),
        );
      case _Tab.TAB3:
        return ChangeNotifierProvider<TabThree>(
          create: (_) => TabThreeProvider(),
          child: const TabThree(),
        );
      case _Tab.TAB4:
        return ChangeNotifierProvider<TabFour>(
          create: (_) => TabFourProvider(),
          child: const TabFour(),
        );
    }
  }
}

方案2：通过Navigator跳转到独立页面 #

点击Task标签时，不切换主页面的body内容，而是通过Navigator.push打开一个全新的页面。这个新页面是完整的Scaffold，自带三标签底部导航栏，原主页面会被压入导航栈，完全被新页面覆盖，从根源避免叠加，还能实现你需要的页面滑入动画。

示例代码：
修改主页面的导航点击逻辑：

// 主页面的底部导航点击事件处理
onTap: (index) {
  if (index == _Tab.values.indexOf(_Tab.TASK)) {
    // 跳转到独立的Task导航页面
    Navigator.push(context, MaterialPageRoute(
      builder: (context) => const TaskNavigationPage(),
      // 自定义滑入动画
      settings: const RouteSettings(),
    ));
  } else {
    setState(() {
      _currentTab = _Tab.values[index];
    });
  }
},

创建独立的Task导航页面：

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

  @override
  State<TaskNavigationPage> createState() => _TaskNavigationPageState();
}

class _TaskNavigationPageState extends State<TaskNavigationPage> {
  int _currentTaskTab = 0;

  final List<Widget> _taskPages = [
    ChangeNotifierProvider<Task>(
      create: (_) => TaskProvider(),
      child: const Task(),
    ),
    // 另外两个Task子页面
    const TaskAddPage(),
    const TaskStatsPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _taskPages[_currentTaskTab],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentTaskTab,
        onTap: (index) {
          setState(() {
            _currentTaskTab = index;
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.list), label: "任务列表"),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: "新增任务"),
          BottomNavigationBarItem(icon: Icon(Icons.statistics), label: "统计"),
        ],
      ),
    );
  }
}

方案选择建议 #

• 如果Task页面的标签切换需要和主页面保持状态关联，优先选方案1；
• 如果Task功能是独立模块，需要完整的页面转场动画，方案2更符合Flutter导航规范，实现起来也更清晰。

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