实现底部导航栏并点击切换页面可简述为有三种方式
TabBar + TabBarView
BottomNavigationBar + BottomNavigationBarItem,实现规则的底部导航栏
自定义 BottomAppBar,实现不规则底部导航栏
const BottomAppBar({
Key? key,
this.color,//背景色
this.elevation,//阴影效果
this.shape,//设置底栏的形状,一般使用这个都是为了和floatingActionButton融合,所以使用的值都是CircularNotchedRectangle(),有缺口的圆形矩形
this.clipBehavior = Clip.none,
this.notchMargin = 4.0,//FloatingActionButton和BottomAppBar之间的距离。
this.child,
})
bottomNavigationBar: BottomAppBar(
//设置底栏的形状,一般使用这个都是为了和floatingActionButton融合,
//所以使用的值都是CircularNotchedRectangle(),有缺口的圆形矩形。
shape: CircularNotchedRectangle(),
color: Colors.white,
child: Container(
height: 49,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: InkWell(
child: Image.asset(
index == 0 ? "images/custome_icon_home_select.png" : "images/custome_icon_home.png",
width: 42,
height: 42,
),
onTap: () {
if (index != 0) {
setState(() {
index = 0;
});
}
},
),
),
Expanded(
flex: 1,
child: Container(),
),
Expanded(
flex: 1,
child: InkWell(
child: Image.asset(
index == 1 ? "images/custome_icon_gerenzhongxin_select.png" : "images/custome_icon_gerenzhongxin.png",
width: 42,
height: 42,
),
onTap: () {
if (index != 1) {
setState(() {
index = 1;
});
}
},
),
),
],
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: MyFloatingActionButton(),