【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 Riverpod上手指南
android·flutter·ios
BG18 小时前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng21 小时前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan1 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓1 天前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter
Speed1232 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间2 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios