main.dart代码：
import 'package:flutter/material.dart';
import 'bottom_navigation_widget.dart';
void main()=> runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter bottomNavigationBar',
theme:ThemeData.light(),
home:BottomNavigationWidget()
);
}.
}
控制导航代码：
import 'package:flutter/material.dart';
import 'Pages/Home.dart';
import 'Pages/email.dart';
import 'Pages/pages.dart';
import 'Pages/air.dart';
class BottomNavgationWidget extends StatefulWidget {
@override
_BottomNavgationWidgetState createState() => _BottomNavgationWidgetState();
}
class _BottomNavgationWidgetState extends State<BottomNavgationWidget> {
final _BottomNavigationColor = Colors.blue;
int _currentIndex = 0;
List<Widget> list = List();
@override
void initState() {
list
..add(Home())
..add(email())
..add(pages())
..add(air());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
title: Text(
'home', style: TextStyle(color: _BottomNavigationColor),),
icon: Icon(
Icons.home,
color: _BottomNavigationColor,
)
),
BottomNavigationBarItem(
title: Text(
'sec', style: TextStyle(color: _BottomNavigationColor),),
icon: Icon(
Icons.pages,
color: _BottomNavigationColor,
)
),
BottomNavigationBarItem(
title: Text(
'thr', style: TextStyle(color: _BottomNavigationColor),),
icon: Icon(
Icons.theaters,
color: _BottomNavigationColor,
)
),
BottomNavigationBarItem(
title: Text(
'fou', style: TextStyle(color: _BottomNavigationColor),),
icon: Icon(
Icons.favorite,
color: _BottomNavigationColor,
)
),
],
currentIndex: _currentIndex,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
type: BottomNavigationBarType.fixed,
),
);
}
}
4个页面代码：
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Text('Home'),
),
);
}
}
其他三个页面类似。
不规则底部导航栏制作：
floatingActionButton Widget
floatingActionButton工作中我们通常简称它为“FAB”，也许只是我们公司这样称呼，从字面理解可以看出，它是“可交互的浮动按钮”,其实在Flutter默认生成的代码中就有这家伙，只是我们没有正式的接触。
一般来说，它是一个圆形，中间放着图标，会优先显示在其他Widget的前面。
下面我们来看看它的常用属性:
onPressed ：点击相应事件，最常用的一个属性。
tooltip：长按显示的提示文字，因为一般只放一个图标在上面，防止用户不知道，当我们点击长按时就会出现一段文字性解释。非常友好，不妨碍整体布局。
child ：放置子元素，一般放置Icon Widget。
写完这些代码已经有了一个悬浮的按钮，但这个悬浮按钮还没有和低栏进行融合，这时候需要一个属性。
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
这时候就可以和底栏进行融合了。
BottomAppBar Widget
BottomAppBar 是 底部工具栏的意思，这个要比BottomNavigationBar widget灵活很多，可以放置文字和图标，当然也可以放置容器。
BottomAppBar的常用属性:
color:这个不用多说，底部工具栏的颜色。
shape：设置底栏的形状，一般使用这个都是为了和floatingActionButton融合，所以使用的值都是CircularNotchedRectangle(),有缺口的圆形矩形。
child ： 里边可以放置大部分Widget，让我们随心所欲的设计底栏。
没有交互的所有代码：
import 'package:flutter/material.dart';
class BottomAppBarDemo extends StatefulWidget {
_BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}
class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (){
},
tooltip: 'Increment',
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:(){
}
),
IconButton(
icon:Icon(Icons.airport_shuttle),
color:Colors.white,
onPressed:(){
}
),
],
),
)
,
);
}
}
点击交互子页面：
上面用了四个页面，现在可以写一个动态的页面即可代替四个页面。
新建一个页面接收title
import 'package:flutter/material.dart';
class EachView extends StatefulWidget {
String _title;
EachView(this._title);
@override
_EachViewState createState() => _EachViewState();
}
class _EachViewState extends State<EachView> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(title:Text(widget._title)),
body: Center(child:Text(widget._title)),
);
}
}
所有代码
import 'package:flutter/material.dart';
import 'each_view.dart';
class BottomAppBarDemo extends StatefulWidget {
_BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}
class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
List<Widget> _eachView; //创建视图数组
int _index = 0; //数组索引，通过改变索引值改变视图
@override
void initState() {
// TODO: implement initState
super.initState();
_eachView = List();
_eachView..add(EachView('Home'))..add(EachView('Me'));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body:_eachView[_index],
floatingActionButton: FloatingActionButton(
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
return EachView('New Page');
}));
},
tooltip: 'Increment',
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;
});
}
),
],
),
)
,
);
}
}
