【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),
    );
  }
}
相关推荐
林间风雨10 小时前
flutter项目 -- 换logo、名称 、签名、打包
flutter
SoaringHeart19 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
tangweiguo030519871 天前
Flutter与原生混合开发:实现完美的暗夜模式同步方案
android·flutter
程序员老刘1 天前
CTO紧急叫停AI编程!不是技术倒退,而是...
flutter·ai编程
leazer1 天前
Flutter TabBar 字体缩放动画抖动问题及优化方案
flutter
yuanpan1 天前
认识跨平台UI框架Flutter和MAUI区别,如何选。
flutter·ui·maui
无知的前端1 天前
一文精通-Flutter 状态管理
flutter
阿笑带你学前端1 天前
Drift数据库开发实战:类型安全的SQLite解决方案
前端·flutter
农夫三拳_有点甜1 天前
Flutter MaterialApp 组件属性第一章
flutter
阿笑带你学前端1 天前
Flutter应用架构设计:基于Riverpod的状态管理最佳实践
前端·flutter