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

浅识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,

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

猜你喜欢

转载自blog.csdn.net/qq_43336158/article/details/123487670