第一百六十八回 NavigationBar组件

news2025/1/12 12:26:40

文章目录

1. 概念介绍
2. 使用方法
3. 代码与效果
- 3.1 示例代码
- 3.2 运行效果
4. 内容总结

我们在上一章回中介绍了"如何修改按钮的形状"相关的内容，本章回中将 介绍NavigationBar组件.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的NavigationBar组件主要用来做底部导航栏，它和我们在前面章回中介绍的BottomNavigationBar组件功能相同，用法也相似，只不过在新的Material3中，官方建议使用NavigationBar取代BottomNavigationBar,接下来我们将详细介绍它的使用方法。

2. 使用方法

和其它Widget一样，NavigationBar提供了相关的属性来控制自己，常用的属性如下：

height属性：用来控制该组件的高度；
backgroundColor属性：用来控制整个底部的背景色；
indicatorColor属性:用来控制标签被选中时的颜色;
indicatorShape属性：用来标签被选中时的形状，默认是椭圆形状；
selectedIndex属性：用来控制当前被选中的标签索引，默认值为0，表示第一个标签被选中；
onDestinationSelected属性：表示选中标签时触发的事件，它是函数类型，从函数的参数中可以得到当前被选中的标签值；
destinations属性：用来控制底部显示的标签,它是一个数组，数据中成员的数量就是底部标签的数量，数组类型为NavigationDestination;

上面介绍的这些属性中大部分和BottomNavigationBar组件的属性功能类似，只是属性的名称不同。不过该组件提供了height属性来控制组件的高度，这是该组件特有的属性，也是十分实用的属性，因为在项目中经常需要调整底部导航栏高度。

3. 代码与效果

3.1 示例代码

介绍完NavigationBar组件的使用方法后，我们通过具体的代码来演示它的使用方法，详细如下：

NavigationBar(
  //控制destination中Icon外围的形状，默认是16圆角矩形
  indicatorShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
  //按钮被选中时外围的颜色
  indicatorColor: Colors.yellow,
  backgroundColor: Colors.lightBlueAccent,
  //阴影颜色，不是很明显
  shadowColor: Colors.green,
  //这个颜色在背景色后面，不设置背景色时才能看到，而且有阴影效果
  surfaceTintColor: Colors.redAccent,
  //调整高度
  height: 80,
  selectedIndex: currentIndex,
  onDestinationSelected: (index) {
    setState(() {
      currentIndex = index;
    });
  },

  //可以单独添加选择时显示的按钮
  destinations: const [
    NavigationDestination(
        icon: Icon(Icons.person),
        selectedIcon: Icon(Icons.person_2_rounded),
        label:"Person" ),
    NavigationDestination(icon: Icon(Icons.home), label: "Home"),
    NavigationDestination(icon: Icon(Icons.settings), label: "Setting"),
  ],
),