示例 github：flutterlayout https://github.com/LiuC520/flutterlayout
MaterialApp
連載：flutter布局-1-column
連載：flutter布局-2-row
連載：flutter布局-3-center
連載：flutter布局-4-container
連載：[flutter布局-5-Matrix4矩陣變換
連載：flutter布局-6-MaterialApp
連載：flutter布局-7-About對(duì)話框
連載：flutter布局-8-animated_icons動(dòng)畫圖片
AppBar: 包含狀態(tài)欄和導(dǎo)航欄
先看下上圖的具體用法
appBar: AppBar(
title: Container(
color: Colors.white10,
child: Row(
children: <Widget>[Text('標(biāo)題1'), Text('標(biāo)題2')],
),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.playlist_play),
tooltip: 'Air it',
onPressed: null,
),
IconButton(
icon: Icon(Icons.playlist_add),
tooltip: 'Restitch it',
onPressed: null,
),
],
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () {
Scaffold.of(context).openDrawer();
},
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
},
), // 左側(cè)返回按鈕，可以有按鈕，可以有文字
flexibleSpace: Text('d12321312'),
backgroundColor: Colors.red, //導(dǎo)航欄和狀態(tài)欄的的顏色
elevation: 10, //陰影的高度
bottom: PreferredSize(
child: Text('bottom'),
preferredSize: Size(30, 30)), // 在appbar下面顯示的東西
brightness: Brightness.light, //控制狀態(tài)欄的顏色，lignt 文字是灰色的，dark是白色的
iconTheme: IconThemeData(
color: Colors.yellow,
opacity: 0.5,
size: 30), //icon的主題樣式,默認(rèn)的顏色是黑色的，不透明為1，size是24
textTheme: TextTheme(), //這個(gè)主題的參數(shù)比較多,flutter定義了13種不同的字體樣式
centerTitle: true, //標(biāo)題是否居中，默認(rèn)為false
toolbarOpacity: 0.5, //整個(gè)導(dǎo)航欄的不透明度
bottomOpacity: 0.8, //bottom的不透明度
titleSpacing: 10, //標(biāo)題兩邊的空白區(qū)域,
),
1. title：標(biāo)題
可以是文字或者widget，可以自定義
如：
Container(
color: Colors.white10,
child: Row(
children: <Widget>[Text('標(biāo)題1'), Text('標(biāo)題2')],
),
),
//表示兩個(gè)文字橫向排列
// 也可以直接用一個(gè)text來代替
Text('標(biāo)題1')
2. actions：表示右側(cè)的按鈕的動(dòng)作
是一個(gè)包含widget的數(shù)組：
actions: <Widget>[
IconButton(
icon: Icon(Icons.playlist_play),
tooltip: 'Air it',
onPressed: null,
),
IconButton(
icon: Icon(Icons.playlist_add),
tooltip: 'Restitch it',
onPressed: null,
),
],
上面表示兩個(gè)按鈕，同時(shí)還有點(diǎn)擊事件，只不過上面我把點(diǎn)擊事件寫成了空的。
3. leading：表示左側(cè)的按鈕的動(dòng)作
這個(gè)也是一個(gè)widget，也可以自定義動(dòng)作，如下：
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () {
Scaffold.of(context).openDrawer();
},
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
},
), // 左側(cè)返回按鈕，可以有按鈕，可以有文字
上面表示構(gòu)造一個(gè)新的widget，點(diǎn)擊事件是打開左側(cè)的抽屜
4. flexibleSpace：
堆疊在工具欄和標(biāo)簽欄后面。 它的高度與應(yīng)用欄的整體高度相同。
flexible space 實(shí)際上并不靈活，除非[AppBar]的容器改變了[AppBar]的大小。 [CustomScrollView]中的[SliverAppBar]在滾動(dòng)時(shí)更改[AppBar]的高度。
也可以看下 FlexibleSpaceBar
flexibleSpace: Text('d12321312'),
flexibleSpace: FlexibleSpaceBar(
title: Text('flexibleSpace'),
background: Icon(Icons
.add), //背景，一般是一個(gè)圖片，在title后面，[Image.fit] set to [BoxFit.cover].
centerTitle: true,
collapseMode: CollapseMode
.pin, // 背景 固定到位，直到達(dá)到最小范圍。 默認(rèn)是CollapseMode.parallax(將以視差方式滾動(dòng)。)，還有一個(gè)是none，滾動(dòng)沒有效果
),
5. backgroundColor: Colors.red, //導(dǎo)航欄和狀態(tài)欄的的顏色
導(dǎo)航欄的顏色和樣式可以再M(fèi)ain.dart的MaterialApp里面配置統(tǒng)一的。
但有時(shí)間我們的某些頁(yè)面有單獨(dú)的設(shè)計(jì)，這個(gè)背景也是可以修改的。
flutter布局-6-MaterialApp
6. elevation: 10, //陰影的高度
默認(rèn)在導(dǎo)航欄的下面有4的高度陰影，這個(gè)也可以修改的
7.bottom :導(dǎo)航欄下面顯示的widget
看上面圖片中的bottom文字
bottom: PreferredSize(
child: Text('bottom'),
preferredSize: Size(30, 30)), // 在appbar下面顯示的東西
其中這個(gè)bottom是需要PreferredSize的，里面有child和寬高，寬高用size來設(shè)置
8.brightness ：狀態(tài)欄的亮度
這與[backgroundColor]，[iconTheme]，[textTheme]一起設(shè)置。
默認(rèn)是和 ThemeData.primaryColorBrightness 一致的.
Brightness.light, 白底黑字
Brightness.dark, 黑底白字
9. iconTheme，左側(cè)圖表的樣式
iconTheme: IconThemeData(
color: Colors.yellow,
opacity: 0.5,
size: 30), //icon的主題樣式,默認(rèn)的顏色是黑色的，不透明為1，size是24
表示顏色是黃色，不透明度是0.5，最大值是1；
以及大小是30，默認(rèn)的大小是24
10.textTheme：字體的樣式
我們要設(shè)置的話一般用merge，這樣不會(huì)改變其他的值。
默認(rèn)有13中樣式：
NAME SIZE WEIGHT SPACING 2018 NAME
display4 112.0 thin 0.0 headline1
display3 56.0 normal 0.0 headline2
display2 45.0 normal 0.0 headline3
display1 34.0 normal 0.0 headline4
headline 24.0 normal 0.0 headline5
title 20.0 medium 0.0 headline6
subhead 16.0 normal 0.0 subtitle1
body2 14.0 medium 0.0 body1
body1 14.0 normal 0.0 body2
caption 12.0 normal 0.0 caption
button 14.0 medium 0.0 button
subtitle 14.0 medium 0.0 subtitle2
overline 10.0 normal 0.0 overline
其中thin 表示字體的粗細(xì)為FontWeight.w100
normal是FontWeight.w400
medium是FontWeight.w500
字符間距為0.0
size就是字體的大小
11.centerTitle：標(biāo)題是否居中
centerTitle: true, //標(biāo)題是否居中，默認(rèn)為false
默認(rèn)是false，一般我們的設(shè)計(jì)都是把導(dǎo)航欄的標(biāo)題居中，不遵循android的md設(shè)計(jì)，都是按照蘋果的設(shè)計(jì)來的
12. toolbarOpacity: 0.5, //整個(gè)導(dǎo)航欄的不透明度
13. bottomOpacity: 0.8, //bottom的不透明度
14. titleSpacing: 10, //標(biāo)題兩邊的空白區(qū)域,
示例所在的位置：https://github.com/LiuC520/flutterlayout/blob/master/lib/material/appbar.dart
