【Flutter】底部导航BottomNavigationBar的使用

常用基本属性

属性名 含义 是否必须
items 底部导航栏的子项List
currentIndex 当前显示索引
onTap 底部导航栏的点击事件, Function(int)
type 底部导航栏类型,定义 [BottomNavigationBar] 的布局和行为
selectedItemColor 选中项图标和label的颜色
unselectedItemColor 未选中项图标和label的颜色
iconSize 图标大小
backgroundColor 底部导航栏背景色
showSelectedLabels 是否显示选中项的label
showUnselectedLabels 是否显示未选中项的label
selectedIconTheme 选中项 图标的主题 设置
unselectedIconTheme 选中项 图标的主题 设置
selectedFontSize 选中项 文字大小 设置
unselectedFontSize 未选中项 文字大小 设置
selectedLabelStyle 选中项 文字样式 设置
unselectedLabelStyle 未选中项 文字样式 设置
mouseCursor 当鼠标指针进入或悬停在屏幕上时的光标
enableFeedback 检测到的手势是否应提供声音和/或触觉反馈

示例

效果一

当选中时图标文字变色,未选中时不显示文字

dart 复制代码
	bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.red, // 选中时
        unselectedItemColor: Colors.black, // 未选中
        currentIndex: _currentIndex,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          // ...
        ],
      ),

效果二

显示图标和文字,选中变色

可设置type: BottomNavigationBarType.fixed固定或设置showUnselectedLabels: true

dart 复制代码
	bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.red, // 选中时
        unselectedItemColor: Colors.black, // 未选中
        type: BottomNavigationBarType.fixed,  // 固定
        currentIndex: _currentIndex,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          // ...
        ],
      ),

效果三

显示图标和文字,设置背景

type: BottomNavigationBarType.fixed必须与backgroundColor配合使用,背景才生效

dart 复制代码
	bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.red, // 选中时
        unselectedItemColor: Colors.black, // 未选中
        type: BottomNavigationBarType.fixed,  // 固定
        backgroundColor: Colors.amber,  // 背景色
        currentIndex: _currentIndex,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          // ...
        ],
      ),

完整示例

dart 复制代码
class PageWidget extends StatefulWidget {
  const PageWidget({super.key});

  @override
  State<PageWidget> createState() => _PageWidgetState();
}

class _PageWidgetState extends State<PageWidget> {
  int _currentIndex = 0;

  Widget _getPage(index) {
    final List<Widget> _pages = <Widget>[
      Container(
          color: Colors.red,
          child: ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/user-page');
            },
            child: const Text('User Page'),
          )),
      Container(
        color: Colors.green,
      ),
      Container(
        color: Colors.blue,
      ),
      Container(
        color: Colors.yellow,
      ),
    ];
    return _pages[index];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page Widget'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.amber,
        type: BottomNavigationBarType.fixed,
        // showSelectedLabels: true,
        // showUnselectedLabels: true,
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.black,
        currentIndex: _currentIndex,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'User',
          ),
        ],
      ),
      body: _getPage(_currentIndex),
    );
  }
}
相关推荐
大雷神2 小时前
Flutter鸿蒙开发
flutter·华为·harmonyos
shelutai5 小时前
实现提供了完整的 Flutter Web 文件上传解决方案
前端·flutter
小仙女喂得猪7 小时前
2025 Android原生开发者角度的Flutter 笔记整理(对比ReactNative)
android·flutter·react native
猪哥帅过吴彦祖8 小时前
Flutter 系列教程:列表与网格 - `ListView` 和 `GridView`
前端·flutter·ios
程序员老刘1 天前
为什么我从不推荐GetX?11k星标背后的真相
flutter·客户端
dragon7251 天前
flutter riverpod原理浅析
flutter
恋猫de小郭1 天前
深入理解 Flutter 的 PlatformView 如何在鸿蒙平台实现混合开发
android·前端·flutter
浅蓝色1 天前
flutter平台判断后续
flutter·harmonyos
猪哥帅过吴彦祖1 天前
Flutter 系列教程:常用基础组件 (下) - `TextField` 和 `Form`
前端·flutter·ios
我想吃辣条1 天前
flutter google play 应用不支持 16 KB
android·flutter