浅识Flutter 基本组件Scaffold的bottomNavigationBar属性 app底部导航条-CFANZ编程社区

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

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

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

设置底部导航栏

/*设置底部导航栏*/
      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,

在这里插入图片描述