第一百六十八回 NavigationBar组件

我们在上一章回中介绍了"如何修改按钮的形状"相关的内容，本章回中将 介绍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"),
  ],
),

3.2 运行效果

我们在上面的代码中添加添加了详细的注释，这样有助于大家理解代码，示例代码中还有一个地方需要介绍：导航栏的图标分点击和非点击两种，默认设置的是非点击时的图标，可以通过selectedIcon来设置点击时的图标。详细的操作可以查看示例代码。

此外，NavigationBar还有一些不太常用的属性，主要是修改各种颜色，我在这里就一一介绍了，建议大家自己动手去实践。下面是该示例程序运行后的效果图，请大家参考。

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• NavigationBar主要用来实现底部导航栏功能，它是Matirial3引入的组件；
• BottomNavigationBar被NavigationBar替代了，不过它们的用法十分相似；
• NavigationBar提供了相关的属性来控制自己，新引入的height属性十分实用；
• NavigationBar在设置导航图标时提供了两个属性来控制点击和非点击状状态,有利于设置不同状态的图标；

看官们，与"NavigationBar组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!