如何实现页面导航功能

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