0
点赞
收藏
分享

微信扫一扫

第十七回:如何使用BottomNavigationBar

NicoalsNC 2023-05-03 阅读 176

文章目录


我们在上一章回中介绍了TextField Widget,本章回中将介绍 BottomNavigationBar Widget。闲话休提,让我们一起Talk Flutter吧。

概念介绍

我们在本章回中将介绍一个新的Widget:BottomNavigationBar,它就是我们经常在App中看到了底部导航,不过它不能独立使用,因为它是Scaffold Widget的成员,需要配合bottomNavigationBar属性才能使用。本章回将介绍它的使用方法。

使用方法

和其它Widget一样,BottomNavigationBar提供了相关的属性来控制自己,常用的属性如下:

  • items属性用来控制底部显示的标签,它是一个数组,数据中成员的数量就是底部标签的数量,数组类型为BottomNavigationBarItem;
  • iconSize属性用来控制底部标签的大小;
  • backgroundColor属性用来控制整个底部的背景色,默认为白色;
  • fixedColor属性用来控制标签被选中时的颜色,默认是蓝色;
  • currentIndex属性用来控制当前被选中的标签索引,默认值为0,表示第一个标签被选中;
  • onTap属性表示选中标签时触发的事件,它的值是一个函数,从函数的参数中可以得到当前被选中的标签值;
  • type属性用来控制标签的类型,当标签数量超过3个以后需要给它赋值,不然无法显示全部标签;

示例代码

return Scaffold(
    appBar: AppBar(
      title: const Text("BottomNavigationBar Example "),
    ),
    body: const Text("test"),
    bottomNavigationBar: BottomNavigationBar(
      //超过3个item时需要使用type属性
      backgroundColor: Colors.amber,
      type: BottomNavigationBarType.fixed,
      currentIndex: selectIndex,
      fixedColor: Colors.blue,
      //放在iconsize,同时bottomBar整体也跟着放大
      iconSize: 40,
      onTap: (index) {
        setState( () {
          selectIndex = index;
        });
      },
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.person), label: "Person"),
        BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
        BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Setting")
      ],
    ),
  );

上面的代码中,我们添加了三个标签,标签使用了Icon和文字,详细的内容可以参数items属性中的内容,整个底部导航的背景是黄色,其中某个标签被选中后变成蓝色,代码中我们在onTap属性对应的方法中修改了currentIndex,让它的值与被选中的标签值一致,这样就可以在标签被点击后自动发生切换,也就是说点击哪个标签,哪个标签就会被选中。

注意修改值时使用了setStae()方法,该方法是StatefullWidget的方法,因此Scaffold Widget必须位于StatefullWidget中,不然点击后无法修改索引值,进而无法切换标签。上面的代码中没有体现出来,大家可以参考Gihub中完整的代码。

我们对嵌套关系做一个总结:BottomNavigationBar必须位于Sacffold中,Sacffold必须位于StatefullWidget中。

编译并且运行上面的程序可以得到一个底部导航栏,导航栏中包含三个标签。我在这里就不演示程序的运行结果了,建议大家自己动手去实践。

看官们,关于BottomNavigationBarWidget的内容就介绍到这里,欢迎大家在评论区交流与讨论!

举报

相关推荐

0 条评论