需求:实现底部主页+我的两个菜单栏,实现和页面联动点击/滑动切换
需求:底部实现两个菜单 首页+我的,和页面实现滑动/点击切换联动
1:底部菜单栏?第一时间就想到了 Scaffold部件的属性 bottomNavigationBar,
bottomNavigationBar的实现需要
BottomNavigationBar:需要实现 items,接受的是 BottomNavigationBarItem(属性 tips:icon 菜单图标,title 菜单名字),这里我们需要两个两个菜单,那么就实现两个 BottomNavigationBar。如下:
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
Colors.grey,
),
title: Text(
"Banner",
style:
TextStyle(color: Colors.grey ),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.contact_mail,
color: Colors.grey,
),
title: Text(
"Icon",
style:
TextStyle(color: Colors.grey ),
),
),
]
这里有一个问题,菜单的图标和名字颜色点击要高亮区别怎么办?我们要实现两个页面,那么已知总数量=2,那不是可以根据索引来区别设置高亮么?所以 定义一个当前索引变量。
int current = 0;
菜单代码根据索引切换渲染高亮/默认:
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
current != 0 ? Icons.home_outlined : Icons.home,
color: current == 0 ? Colors.orange : Colors.grey,
),
title: Text(
"首页",
style:
TextStyle(color: current != 0 ? Colors.grey : Colors.orange),
),