【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),
    );
  }
}
相关推荐
ZhDan914 小时前
flutter知识点
flutter
xchenhao4 小时前
基于 Flutter 的开源文本 TTS 朗读器(支持 Windows/macOS/Android)
android·windows·flutter·macos·openai·tts·朗读器
coder_pig5 小时前
跟🤡杰哥一起学Flutter (三十五、玩转Flutter滑动机制📱)
android·flutter·harmonyos
MaoJiu11 小时前
Flutter与原生端的通信
flutter·ios
张风捷特烈18 小时前
Flutter 知识集锦 | 如何得到图片主色
android·flutter
你听得到111 天前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
wilinz1 天前
Flutter Android 端接入百度地图踩坑记录
android·flutter
xiaoyan20151 天前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
0wioiw02 天前
Flutter基础(前端教程⑧-数据模型)
前端·flutter·状态模式