前言:本次要实现的功能是底部菜单栏,点击切换页面,页面禁止左右滑动,且页面切换保存页面状态
1:底部菜单栏?那肯定首选 bottomNavigationBar,顶部页面切换联动(ViewPage)
老样子,创建StatefulWidget、State,第一步先来实现底部菜单栏先,State里面编写bottomNavigationBar,这里需要用到他的几个属性
currentIndex:当前显示页面
type:BottomNavigationBarType.shifting, //fixed 默认显示文案 shifting 点击才显示文案
items:菜单列表
onTap: 菜单点击事件
我想要四个菜单 首页、搜索、旅拍、我的,所以items里面要增加4个,
例如:
BottomNavigationBarItem(
icon: Icon(Icons.home, color: Colors.blueAccent),
title: Text(
"首页",
style: TextStyle(color: Colors.blueAccent),
))
看起来挺简单的,但是4个菜单的话,不就是要实现4个这样的代码块???一点不符合封装思想。那我们来手动改造一下,埋个点,现在StateFulWidget这里创建一个变量,int current_Position=0; 用于记录当前菜单索引,现在改造一下菜单创建,new 一个函数 createItem,每一个菜单需要标题 图标,所以 函数需要两个参数 title、 def_iconData,问题来了,预想的菜单是有选中高亮/反之灰色的,那我们是不是还需要点什么呢?
这时候上面的卖点就体现出来了,所以 函数这里还需要 当前菜单索引 index 默认图标
def_iconData 高亮图标 select_iconData,这样我们就可以根据 current_Position和传入的菜单索引来判断是否高亮 灰色了,
//创建菜单 title:菜单名字 index: 菜单索引 def_iconData:默认图标 selected_iconData:高亮图标
BottomNavigationBarItem createItem(String title, int index,
IconData def_iconData, IconData selected_iconData) =>
BottomNavigationBarItem(
icon: Icon(
//根据菜单索引和当前索引对比是否高亮、默认图标
index == widget.current_Position ? selected_iconData : def_iconData,
color: index == widget.current_Position
? Colors.blueAccent