0
点赞
收藏
分享

微信扫一扫

浅识Flutter 基本组件Scaffold的bottomNavigationBar属性 app底部导航条

绪风 2022-03-16 阅读 51

浅识Flutter 基本组件Scaffold的 bottomNavigationBar属性 app底部导航条

bottomNavigationBar属性用于定义应用程序的底部导航栏,主要由按钮加文字组成, 可以实现点击按钮切换不同的页面,显示在Scaffold的底部区域.
该属性值为BottomNavigationBar类型组件,BottomNavigationBar组件包含下表所示的常用属性。

属性名类型功能说明
currentIndexint设置用于切换按钮的当前索引值
fixedColorColor设置选中按钮的颜色,如果没有指定,则用系统主题色
iconSizedouble设置按钮图标大小
itemsList设置底部导航栏按钮集,每一项是一个BottomNavigationBarItem,由icon图标及title文本属性组成
onTapValueChanged设置按下某一个按钮的回调事件,需要根据返回的索引值设置当前索引值

设置底部导航栏

/*设置底部导航栏*/
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.add_a_photo), title: Text('军机处')),
          BottomNavigationBarItem(
              icon: Icon(Icons.center_focus_strong), title: Text('血滴子')),
          BottomNavigationBarItem(
              icon: Icon(Icons.add_alarm_outlined), title: Text('大理寺'))
        ],
      ),

在这里插入图片描述

设置单击事件

  /*设置单击事件*/
        onTap: (value){
          print(value);
        },

测试 点击下面3个按钮 分别输出0 1 2
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
设置当前索引值为1时候,选中第二个图标

 currentIndex: 1,

在这里插入图片描述
在这里插入图片描述

举报

相关推荐

0 条评论