如何为BottomNavigationBar设置自定义布局？

如果要实现类似你需要的自定义底部导航栏（比如带凸起中间按钮、自定义样式的），有两种常用方案，根据需求选择：

方案一：完全自定义布局（最灵活） #

直接抛弃原生BottomNavigationBar，用基础组件拼出想要的结构，自由度最高：

// 定义选中索引状态
int _selectedIndex = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _getPage(_selectedIndex), // 根据索引切换页面
    bottomNavigationBar: Container(
      height: 65,
      padding: EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.shade300,
            blurRadius: 10,
            offset: Offset(0, -3),
          )
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          _buildNavItem(
            icon: Icons.home_outlined,
            activeIcon: Icons.home,
            label: '首页',
            isActive: _selectedIndex == 0,
            onTap: () => setState(() => _selectedIndex = 0),
          ),
          // 中间凸起的操作按钮
          GestureDetector(
            onTap: () {
              // 这里写中间按钮的逻辑，比如弹出弹窗或跳转页面
              print('点击了添加按钮');
            },
            child: Container(
              width: 55,
              height: 55,
              margin: EdgeInsets.only(top: -15), // 向上偏移形成凸起
              decoration: BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
                boxShadow: [
                  BoxShadow(
                    color: Colors.blue.shade300,
                    blurRadius: 8,
                    offset: Offset(0, 3),
                  )
                ],
              ),
              child: Icon(Icons.add, color: Colors.white, size: 30),
            ),
          ),
          _buildNavItem(
            icon: Icons.person_outline,
            activeIcon: Icons.person,
            label: '我的',
            isActive: _selectedIndex == 1,
            onTap: () => setState(() => _selectedIndex = 1),
          ),
        ],
      ),
    ),
  );
}

// 封装导航项组件，统一处理状态
Widget _buildNavItem({
  required IconData icon,
  required IconData activeIcon,
  required String label,
  required bool isActive,
  required VoidCallback onTap,
}) {
  return GestureDetector(
    onTap: onTap,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(
          isActive ? activeIcon : icon,
          color: isActive ? Colors.blue : Colors.grey.shade600,
          size: 26,
        ),
        SizedBox(height: 4),
        Text(
          label,
          style: TextStyle(
            color: isActive ? Colors.blue : Colors.grey.shade600,
            fontSize: 12,
            fontWeight: isActive ? FontWeight.w500 : FontWeight.normal,
          ),
        ),
      ],
    ),
  );
}

// 页面切换逻辑
Widget _getPage(int index) {
  switch(index) {
    case 0: return HomePage();
    case 1: return ProfilePage();
    default: return HomePage();
  }
}

关键说明： #

• 用Container做导航栏容器，设置阴影、高度和背景色，模拟原生质感
• 中间按钮通过margin向上偏移实现凸起效果，配合阴影增强立体感
• 封装_buildNavItem方法，统一管理导航项的激活/未激活样式，减少重复代码
• 通过setState更新选中索引，实现页面切换

方案二：基于原生组件修改（适合小调整） #

如果只是需要修改原生BottomNavigationBar的部分样式，比如图标大小、文字样式，可以直接自定义BottomNavigationBarItem：

int _selectedIndex = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _getPage(_selectedIndex),
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _selectedIndex,
      onTap: (index) => setState(() => _selectedIndex = index),
      type: BottomNavigationBarType.fixed,
      selectedItemColor: Colors.blue,
      unselectedItemColor: Colors.grey.shade600,
      selectedLabelStyle: TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
      unselectedLabelStyle: TextStyle(fontSize: 12),
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home_outlined, size: 26),
          activeIcon: Column(
            children: [
              Icon(Icons.home, size: 26),
              // 选中时添加底部下划线
              Container(
                height: 2,
                width: 20,
                color: Colors.blue,
                margin: EdgeInsets.only(top: 2),
              ),
            ],
          ),
          label: '首页',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person_outline, size: 26),
          activeIcon: Icon(Icons.person, size: 26),
          label: '我的',
        ),
      ],
    ),
  );
}

关键说明： #

• 通过activeIcon自定义选中状态的图标样式，比如添加下划线
• 调整selectedLabelStyle、unselectedLabelStyle修改文字样式
• 这种方式适合不需要大幅修改结构的场景，保留原生导航栏的交互逻辑

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