不規則底部導航欄
自定義主題樣本
Flutter支持自定義主題,如果使用自定義主題,設置的內容項是非常多的,Flutter貼心的爲給我們準備了主題樣本。
theme: ThemeData(
primarySwatch: Colors.lightBlue,
),
會了這個知識後,我們就可以先把我們的主入口文件編寫一下了,具體代碼如下:
import 'package:flutter/material.dart';
import 'bottom_appBar_demo.dart';
void main()=>runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.lightBlue,
),
home:BottomAppBarDemo(),
);
}
}
這時候bottom_appBar_demo.dart這個文件還沒有,也找不到,這個文件是我們的主要文件,我們的主要業務邏輯會寫在這個文件裏。
因爲沒有所以你寫完之後會報錯,那接下來我們就來編寫這個文件。
floatingActionButton Widget
floatingActionButton工作中我們通常簡稱它爲“FAB”,也許只是我們公司這樣稱呼,從字面理解可以看出,它是“可交互的浮動按鈕”,其實在Flutter默認生成的代碼中就有這傢伙,只是我們沒有正式的接觸。
一般來說,它是一個圓形,中間放着圖標,會優先顯示在其他Widget的前面。
下面我們來看看它的常用屬性:
- onPressed :點擊相應事件,最常用的一個屬性。
- tooltip:長按顯示的提示文字,因爲一般只放一個圖標在上面,防止用戶不知道,當我們點擊長按時就會出現一段文字性解釋。非常友好,不妨礙整體佈局。
- child :放置子元素,一般放置Icon Widget。
我們來看一下floatingActionButton的主要代碼:
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,
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:(){
}
),
],
),
)
,
);
}
}
StatefulWidget子頁面的製作
新建一個each_view.dart文件,然後輸入如下代碼:
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)),
);
}
}
代碼中設置了一個內部的_title變量,這個變量是從主頁面傳遞過來的,然後根據傳遞過來的具體值顯示在APP的標題欄和屏幕中間。
按鈕交互效果的製作
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;
});
}
),
],
),
)
,
);
}
}