当前位置：首页 > news >正文

Flutter BottomNavigationBar 详解

news 来源：原创 2025/5/7 2:48:53

一、引言

二、BottomNavigationBar 的基本用法

三、主要属性

1. 基本配置

2. 导航项配置

3. 导航类型选择

四、高级功能实现

1. 结合 PageView 实现滑动切换

2. 添加徽章提示

3. 自定义凸起按钮（FAB融合）

4. 渐变背景实现

五、自定义 BottomNavigationBar

1. 使用 BottomNavigationBarType.shifting

2. 自定义 selectedFontSize 和 unselectedFontSize

六、最佳实践指南

1. 导航项数量控制

2. 状态管理策略

3. 跨平台适配

七、结论

一、引言

在 Flutter 应用中，BottomNavigationBar 是用于实现底部导航栏的组件，适用于具有多个页面或功能的应用，例如社交媒体、购物应用等。用户可以通过底部导航快速切换不同的页面或视图。本文将介绍 BottomNavigationBar 的基本用法、主要属性以及自定义样式。

二、BottomNavigationBar 的基本用法

BottomNavigationBar 需要 items 定义导航项，并使用 currentIndex 追踪选中的索引。

int _currentIndex = 0;Scaffold(bottomNavigationBar: BottomNavigationBar(currentIndex: _currentIndex,onTap: (index) => setState(() => _currentIndex = index),items: [BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),BottomNavigationBarItem(icon: Icon(Icons.add), label: '发布'),BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),],),
)

Navigation Items：包含图标和标签的导航项
Current Index：当前选中项的索引
Tap Handler：点击事件的回调处理
动画系统：自带动画切换效果

三、主要属性

1. 基本配置

BottomNavigationBar(selectedItemColor: Colors.blue, // 选中颜色unselectedItemColor: Colors.grey, // 未选中颜色showSelectedLabels: true, // 显示选中标签showUnselectedLabels: false, // 隐藏未选中标签type: BottomNavigationBarType.fixed, // 固定样式
)

2. 导航项配置

BottomNavigationBarItem(icon: Icon(Icons.notifications),label: '消息',activeIcon: Icon(Icons.notifications_active), // 激活状态图标backgroundColor: Colors.red, // 仅对 shifting 类型有效
)

3. 导航类型选择

type: BottomNavigationBarType.shifting, // 动态背景色类型
// 或
type: BottomNavigationBarType.fixed,    // 固定背景色类型（默认）

四、高级功能实现

1. 结合 PageView 实现滑动切换

PageController _pageController = PageController();BottomNavigationBar(currentIndex: _currentIndex,onTap: (index) {setState(() => _currentIndex = index);_pageController.jumpToPage(index);},
)PageView(controller: _pageController,onPageChanged: (index) => setState(() => _currentIndex = index),children: [HomePage(), SearchPage(), ProfilePage()],
)

2. 添加徽章提示

BottomNavigationBarItem(icon: Stack(children: [Icon(Icons.shopping_cart),Positioned(right: 0,child: Container(padding: EdgeInsets.all(2),decoration: BoxDecoration(color: Colors.red,shape: BoxShape.circle,),child: Text('3', style: TextStyle(color: Colors.white, fontSize: 10)),),)],),label: '购物车',
)

3. 自定义凸起按钮（FAB融合）

bottomNavigationBar: BottomAppBar(shape: CircularNotchedRectangle(), // 底部凹槽形状child: BottomNavigationBar(...),
),floatingActionButton: FloatingActionButton(onPressed: () {},child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

4. 渐变背景实现

Container(decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.blue, Colors.purple],begin: Alignment.centerLeft,end: Alignment.centerRight,),),child: BottomNavigationBar(...),
)

五、自定义 BottomNavigationBar

1. 使用 `BottomNavigationBarType.shifting`

BottomNavigationBar(type: BottomNavigationBarType.shifting,selectedItemColor: Colors.white,unselectedItemColor: Colors.black,backgroundColor: Colors.blue,items: const [BottomNavigationBarItem(icon: Icon(Icons.dashboard), label: '仪表盘'),BottomNavigationBarItem(icon: Icon(Icons.notifications), label: '通知'),],
)

2. 自定义 `selectedFontSize` 和 `unselectedFontSize`

BottomNavigationBar(selectedFontSize: 16,unselectedFontSize: 12,items: const [BottomNavigationBarItem(icon: Icon(Icons.map), label: '地图'),BottomNavigationBarItem(icon: Icon(Icons.info), label: '信息'),],
)

六、最佳实践指南

1. 导航项数量控制

移动端：3-5 个选项为最佳
Web/桌面端：可适当增加但不超过 7 个
更多选项考虑使用 Drawer 或 TabBar

2. 状态管理策略

使用 Provider/Riverpod 管理全局状态
保持导航状态与页面栈同步
考虑使用 IndexedStack 保持页面状态

3. 跨平台适配

iOS：通常使用较大的标签和图标
Android：推荐 Material Design 规范
使用 Platform.isIOS 进行平台判断

七、结论

BottomNavigationBar 是 Flutter 中用于底部导航的组件，适用于多页面应用。通过 currentIndex 和 onTap 实现页面切换，并可使用 type、selectedItemColor、unselectedItemColor 进行自定义。掌握 BottomNavigationBar，可以提升应用的导航体验。

一、引言

二、BottomNavigationBar 的基本用法

三、主要属性

1. 基本配置

2. 导航项配置

3. 导航类型选择

四、高级功能实现

1. 结合 PageView 实现滑动切换

2. 添加徽章提示

3. 自定义凸起按钮（FAB融合）

4. 渐变背景实现

五、自定义 BottomNavigationBar

1. 使用 BottomNavigationBarType.shifting

2. 自定义 selectedFontSize 和 unselectedFontSize

六、最佳实践指南

1. 导航项数量控制

2. 状态管理策略

3. 跨平台适配

七、结论

相关推荐

相关文章：

1. 使用 `BottomNavigationBarType.shifting`

2. 自定义 `selectedFontSize` 和 `unselectedFontSize`