前言：
各位同学大家好，最近国庆放假期间因为没有回老家过节（没买到车票啊）就写了一些flutter小案例就分享给大家不规则底部导航栏,那么废话不多说我们正式开始
准备工作
需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3
效果图：
具体实现：
我们来看效果图：
规则的底部导航我们都是用 BottomNavigationBar 组件然后里面放入对应的 BottomNavigationBarItem 组件实现 但是我们今天是要做出不规则的底部导航 我们要用 BottomAppBar 加上 FloatingActionButton 来实现
bottomNavigationBar: BottomAppBar(
color: Colors.lightBlue,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
icon: Icon(
Icons.home
),
color: Colors.white,
onPressed: (){
setState(() {
_index=0;
});
},
),
IconButton(
icon: Icon(
Icons.airport_shuttle
),
color: Colors.white,
onPressed: (){
setState(() {
_index=1;
});
},
),
],
),
),
实现底部的替换我就在 BottomAppBar 组件中嵌套了一个Row横向线下组件来实现 我们在Row组件的 里面分别嵌套装载了2个 iconbutton 组件来展示 我们点击线想要的导航用的tab
悬浮按钮的实现
这边悬浮按钮是用了 FloatingActionButton 来实现悬浮按钮
floatingActionButton: FloatingActionButton(
onPressed: (){
print("添加哈哈哈");
Navigator.of(context).push(MaterialPageRoute(builder: (context){
return EachWidget(title: "new Pages",);
})
);
},
tooltip: "添加",
child: Icon(Icons.add,
color: Colors.white,
),
),
悬浮按钮FloatingActionButton 和BottomAppBar 结合实现不规则底部导航
使用了 Scaffold 脚手架框架里面的 floatingActionButtonLocation属性
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
完整代码如下：
import 'package:flutter/material.dart';
import 'package:flutter_anomalybottmtab/each_widget.dart';
/**
* 创建人·：xuqing
* 创建时间：2020年10月5日15:49:44
* 类说明 不规则的底部导航栏
*
*/
class BottomAppBarDemo extends StatefulWidget {
BottomAppBarDemo({Key key}) : super(key: key);
@override
_BottomAppBarDemoState createState() {
return _BottomAppBarDemoState();
}
}
class _BottomAppBarDemoState extends State {
int _index=0;
List_eahcwidget=[
EachWidget(title: "home",),
EachWidget(title: "airport_shuttle",)
];
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body:_eahcwidget[_index],
floatingActionButton: FloatingActionButton(
onPressed: (){
print("添加哈哈哈");
Navigator.of(context).push(MaterialPageRoute(builder: (context){
return EachWidget(title: "new Pages",);
})
);
},
tooltip: "添加",
child: Icon(Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.lightBlue,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
icon: Icon(
Icons.home
),
color: Colors.white,
onPressed: (){
setState(() {
_index=0;
});
},
),
IconButton(
icon: Icon(
Icons.airport_shuttle
),
color: Colors.white,
onPressed: (){
setState(() {
_index=1;
});
},
),
],
),
),
);
}
}
然后就是切换的逻辑 ，切换就比较简单 我们还是定义一个数组和默认下标
int _index=0;
List_eahcwidget=[
EachWidget(title: "home",),
EachWidget(title: "airport_shuttle",)
];
在body里面加载 、
body:_eahcwidget[_index],
然后我们在响应的iconbutton点击事件中去重新复制下标 下标默认是从0开始
这样我们就能完成不规则底部导航和切换的问题。
最后总结：
flutter中对于底部导航有着很多丰富好用的组件，短短的一些代码量就可以实现了 对比起原生的来说要简单容易的多，我们主要要注意的 FloatingActionButton 和ButtomAppBar 的结合使用 主要是要主体 Scaffold中的属性的运用 ，掌握好了我们就能实现如上甚至花样更多的底部导航，最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦
项目地址：
码云：https://gitee.com/qiuyu123/anomalybottmtab