Flutter BottomNavigationBar 组件

最新推荐文章于 2025-09-24 13:15:52 发布

原创最新推荐文章于 2025-09-24 13:15:52 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter BottomNavigationBar 组件 #Flutter BottomNavigationBar #Flutter #BottomNavigationBar

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了Flutter中BottomNavigationBar组件的使用方法，包括其各种属性如type、items、onTap等的解释，以及如何通过示例代码创建底部导航栏。同时，提供了BottomNavigationBarItem的属性介绍，帮助开发者更好地掌握这一关键UI组件。

参数详解

属性	说明
type	风格 BottomNavigationBarType.fixed（超过4个按键一定要加这个，说明是多个按钮） BottomNavigationBarType.shifting
items	List<BottomNavigationBarItem>[] 底部导航条按钮集合
onTap	选中变化回调函数
currentIndex	索引值，默认0 默认选中第几个
elevation	默认8
iconSize	图片大小
BottomNavigationBarType.fixed 风格属性
fixedColor	选中的颜色
backgroundColor	背景颜色
BottomNavigationBarType.shifting 风格属性
selectedItemColor	选中时颜色
unselectedItemColor	未选中时颜色
selectedIconTheme
unselectedIconTheme
selectedFontSize	默认14
unselectedFontSize	默认12
selectedLabelStyle
unselectedLabelStyle
showSelectedLabels	默认true
showUnselectedLabels

BottomNavigationBarItem

属性	说明
icon	图标
title	文字
activeIcon	选中后的图标
backgroundColor	背景色

代码示例

简单的应用代码如下：

bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text('分类')
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.account_circle),
              title: Text('我的')
            ),
        ],
      ),

可以互动的BottomNavigationBar请见完整代码