【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),
    );
  }
}
相关推荐
小蜜蜂嗡嗡24 分钟前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克4 小时前
十、高级概念
flutter
帅次17 小时前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡18 小时前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉19 小时前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian12320 小时前
FlutterView 源码解析
flutter
Zender Han1 天前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter
nc_kai1 天前
Flutter 之 每日翻译 PreferredSizeWidget
java·前端·flutter
littlegnal1 天前
Flutter Add-to-app profiling
flutter