我们在上一章回中介绍了"如何修改按钮的形状"相关的内容,本章回中将介绍NavigationBar组件.闲话休提,让我们一起Talk Flutter吧。
我们在本章回中介绍的NavigationBar组件主要用来做底部导航栏,它和我们在前面章回中介绍的BottomNavigationBar组件功能相同,用法也相似,只不过在新的
Material3中,官方建议使用NavigationBar取代BottomNavigationBar,接下来我们将详细介绍它的使用方法。
和其它Widget一样,NavigationBar提供了相关的属性来控制自己,常用的属性如下:
介绍完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"),
],
),
我们在上面的代码中添加添加了详细的注释,这样有助于大家理解代码,示例代码中还有一个地方需要介绍:导航栏的图标分点击和非点击两种,默认设置的是非点击时的
图标,可以通过selectedIcon来设置点击时的图标。详细的操作可以查看示例代码。此外,NavigationBar还有一些不太常用的属性,主要是修改各种颜色,我在这
里就一一介绍了,建议大家自己动手去实践。下面是该示例程序运行后的效果图,请大家参考。
最后,我们对本章回的内容做一个全面的总结: