第十七回：如何使用BottomNavigationBar

最新推荐文章于 2024-05-18 00:03:46 发布

talk_8

最新推荐文章于 2024-05-18 00:03:46 发布

阅读量974

点赞数

CC 4.0 BY-SA版权

分类专栏：一起Talk Flutter吧文章标签： flutter android 底部导航栏 scaffold

本文链接：https://blog.youkuaiyun.com/talk_8/article/details/130434782

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章介绍了Flutter中的BottomNavigationBarWidget，它是底部导航栏组件，通常与ScaffoldWidget结合使用。关键属性包括items、iconSize、backgroundColor、fixedColor、currentIndex和onTap。示例代码展示了如何创建并控制底部导航栏的选中状态和事件响应。要正确工作，BottomNavigationBar需置于Scaffold内，而Scaffold应位于StatefullWidget中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在上一章回中介绍了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的内容就介绍到这里，欢迎大家在评论区交流与讨论!