第二百一十二回

发布时间:2023年12月18日

我们在上一章回中介绍了"如何修改按钮的形状"相关的内容,本章回中将介绍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组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
文章来源:https://blog.csdn.net/talk_8/article/details/135052409
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。