前言：
各位同學(xué)大家好辛块，最近國慶放假期間因為沒有回老家過節(jié)（沒買到車票扒Π）就寫了一些flutter小案例就分享給大家不規(guī)則底部導(dǎo)航欄,那么廢話不多說我們正式開始
準(zhǔn)備工作
需要安裝flutter的開發(fā)環(huán)境：大家可以去看看之前的教程：
1 win系統(tǒng)flutter開發(fā)環(huán)境安裝教程: http://www.reibang.com/p/152447bc8718
2 mac系統(tǒng)flutter開發(fā)環(huán)境安裝教程：http://www.reibang.com/p/bad2c35b41e3
效果圖：
具體實現(xiàn)：
我們來看效果圖：
規(guī)則的底部導(dǎo)航我們都是用 BottomNavigationBar 組件然后里面放入對應(yīng)的 BottomNavigationBarItem 組件實現(xiàn) 但是我們今天是要做出不規(guī)則的底部導(dǎo)航 我們要用 BottomAppBar 加上 FloatingActionButton 來實現(xiàn)
bottomNavigationBar: BottomAppBar(
color: Colors.lightBlue,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
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;
});
},
),
],
),
),
實現(xiàn)底部的替換我就在 BottomAppBar 組件中嵌套了一個Row橫向線下組件來實現(xiàn) 我們在Row組件的 里面分別嵌套裝載了2個 iconbutton 組件來展示 我們點擊線想要的導(dǎo)航用的tab
懸浮按鈕的實現(xiàn)
這邊懸浮按鈕是用了 FloatingActionButton 來實現(xiàn)懸浮按鈕
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 結(jié)合實現(xiàn)不規(guī)則底部導(dǎo)航
使用了 Scaffold 腳手架框架里面的 floatingActionButtonLocation屬性
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
完整代碼如下：
import 'package:flutter/material.dart';
import 'package:flutter_anomalybottmtab/each_widget.dart';
/**
* 創(chuàng)建人·：xuqing
* 創(chuàng)建時間：2020年10月5日15:49:44
* 類說明 不規(guī)則的底部導(dǎo)航欄
*
*/
class BottomAppBarDemo extends StatefulWidget {
BottomAppBarDemo({Key key}) : super(key: key);
@override
_BottomAppBarDemoState createState() {
return _BottomAppBarDemoState();
}
}
class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
int _index=0;
List<Widget>_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: <Widget>[
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;
});
},
),
],
),
),
);
}
}
然后就是切換的邏輯 ，切換就比較簡單 我們還是定義一個數(shù)組和默認(rèn)下標(biāo)
int _index=0;
List<Widget>_eahcwidget=[
EachWidget(title: "home",),
EachWidget(title: "airport_shuttle",)
];
在body里面加載 午阵、
body:_eahcwidget[_index],
然后我們在響應(yīng)的iconbutton點擊事件中去重新復(fù)制下標(biāo) 下標(biāo)默認(rèn)是從0開始
這樣我們就能完成不規(guī)則底部導(dǎo)航和切換的問題享扔。
最后總結(jié)：
flutter中對于底部導(dǎo)航有著很多豐富好用的組件植袍，短短的一些代碼量就可以實現(xiàn)了 對比起原生的來說要簡單容易的多籽懦，我們主要要注意的 FloatingActionButton 和ButtomAppBar 的結(jié)合使用 主要是要主體 Scaffold中的屬性的運用 ，掌握好了我們就能實現(xiàn)如上甚至花樣更多的底部導(dǎo)航览濒，最后希望我的文章能幫助到各位解決問題 拖云，以后我還會貢獻更多有用的代碼分享給大家。各位同學(xué)如果覺得文章還不錯 乏苦，麻煩給關(guān)注和star尤筐，小弟在這里謝過啦
