示例 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對話方塊 連載：flutter佈局-8-animated_icons動畫圖片 連載：flutter佈局-9-appbar導航欄和狀態列
SliverAppBar 就是底部的內容滑動，上面的導航欄也一起滑動，且滑動有視察，就像android的CollapsingToolbarLayout實現的摺疊效果
先看下上圖的具體用法
body: new CustomScrollView(
slivers: <Widget>[
new SliverAppBar(
leading: GestureDetector(
child: Icon(Icons.arrow_back),
onTap: () => Navigator.pop(context),
), //左側按鈕
/**
* 如果沒有leading，automaticallyImplyLeading為true，就會預設返回箭頭
* 如果 沒有leading 且為false，空間留給title
* 如果有leading，這個引數就無效了
*/
automaticallyImplyLeading: true,
// title: Text('大標題'), //標題
centerTitle: true, //標題是否居中
actions: [Icon(Icons.archive)], //右側的內容和點選事件啥的
elevation: 4, //陰影的高度
forceElevated: false, //是否顯示陰影
backgroundColor: Colors.green, //背景顏色
brightness: Brightness.dark, //黑底白字，lignt 白底黑字
iconTheme: IconThemeData(
color: Colors.red,
size: 30,
opacity: 1), //所有的icon的樣式,不僅僅是左側的，右側的也會改變
textTheme: TextTheme(), //字型樣式
primary: true, // appbar是否顯示在螢幕的最上面，為false是顯示在最上面，為true就顯示在狀態列的下面
titleSpacing: 16, //標題兩邊的空白區域
expandedHeight: 200.0, //預設高度是狀態列和導航欄的高度，如果有滾動視差的話，要大於前兩者的高度
floating: false, //滑動到最上面，再滑動是否隱藏導航欄的文字和標題等的具體內容，為true是隱藏，為false是不隱藏
pinned: true, //是否固定導航欄，為true是固定，為false是不固定，往上滑，導航欄可以隱藏
snap:
false, //只跟floating相對應，如果為true，floating必須為true，也就是向下滑動一點兒，整個大背景就會動畫顯示全部，網上滑動整個導航欄的內容就會消失
flexibleSpace: new FlexibleSpaceBar(
title: new Text("隨內容一起滑動的頭部"),
centerTitle: true,
collapseMode: CollapseMode.pin,
),
),
new SliverFixedExtentList(
itemExtent: 150.0,
delegate:
new SliverChildBuilderDelegate((context, index) => new ListTile(
title: new Text("List item $index"),
)),
)
],
),
複製程式碼1. title：標題
可以是文字或者widget，可以自定義 如：
Container(
color: Colors.white10,
child: Row(
children: <Widget>[Text('標題1'), Text('標題2')],
),
),
//表示兩個文字橫向排列
複製程式碼// 也可以直接用一個text來代替
Text('標題1')
複製程式碼2. actions：表示右側的按鈕的動作
是一個包含widget的陣列：
actions: <Widget>[
IconButton(
icon: Icon(Icons.playlist_play),
tooltip: 'Air it',
onPressed: null,
),
IconButton(
icon: Icon(Icons.playlist_add),
tooltip: 'Restitch it',
onPressed: null,
),
],
複製程式碼上面表示兩個按鈕，同時還有點選事件，只不過上面我把點選事件寫成了空的。
3. leading：表示左側的按鈕的動作
這個也是一個widget，也可以自定義動作，如下：
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () {
Scaffold.of(context).openDrawer();
},
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
},
), // 左側返回按鈕，可以有按鈕，可以有文字
上面表示構造一個新的widget，點選事件是開啟左側的抽屜
複製程式碼4. flexibleSpace：
堆疊在工具欄和標籤欄後面。 它的高度與應用欄的整體高度相同。
flexible space 實際上並不靈活，除非[AppBar]的容器改變了[AppBar]的大小。 [CustomScrollView]中的[SliverAppBar]在滾動時更改[AppBar]的高度。 也可以看下 FlexibleSpaceBar
flexibleSpace: Text('d12321312'),
複製程式碼 flexibleSpace: FlexibleSpaceBar(
title: Text('flexibleSpace'),
background: Icon(Icons
.add), //背景，一般是一個圖片，在title後面，[Image.fit] set to [BoxFit.cover].
centerTitle: true,
collapseMode: CollapseMode
.pin, // 背景 固定到位，直到達到最小範圍。 預設是CollapseMode.parallax(將以視差方式滾動。)，還有一個是none，滾動沒有效果
),
複製程式碼5. backgroundColor: Colors.red,
//導航欄和狀態列的的顏色
導航欄的顏色和樣式可以再Main.dart的MaterialApp裡面配置統一的。 但有時間我們的某些頁面有單獨的設計，這個背景也是可以修改的。
6. elevation: 10, //陰影的高度
預設在導航欄的下面有4的高度陰影，這個也可以修改的
7.automaticallyImplyLeading: true,
/**
* 如果沒有leading，automaticallyImplyLeading為true，就會預設返回箭頭
* 如果 沒有leading 且為false，空間留給title
* 如果有leading，這個引數就無效了
*/
複製程式碼8.brightness ：狀態列的亮度
這與[backgroundColor]，[iconTheme]，[textTheme]一起設定。
預設是和 ThemeData.primaryColorBrightness 一致的.
Brightness.light, 白底黑字
Brightness.dark, 黑底白字
複製程式碼9. iconTheme，圖示的樣式
iconTheme: IconThemeData(
color: Colors.yellow,
opacity: 0.5,
size: 30), //icon的主題樣式,預設的顏色是黑色的，不透明為1，size是24
複製程式碼表示顏色是黃色，不透明度是0.5，最大值是1； 以及大小是30，預設的大小是24
##10.textTheme：字型的樣式 我們要設定的話一般用merge，這樣不會改變其他的值。
預設有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 表示字型的粗細為FontWeight.w100
normal是FontWeight.w400
medium是FontWeight.w500
字元間距為0.0
size就是字型的大小
##11.centerTitle：標題是否居中
centerTitle: true, //標題是否居中，預設為false
複製程式碼預設是false，一般我們的設計都是把導航欄的標題居中，不遵循android的md設計，都是按照蘋果的設計來的
12. forceElevated: false, //是否顯示陰影
##13. primary: true, //appbar是否顯示在螢幕的最上面，為false是顯示在最上面，為true就顯示在狀態列的下面
14. titleSpacing: 10, //標題兩邊的空白區域,
15. expandedHeight: 200.0, 可滾動檢視的高度
//預設高度是狀態列和導航欄的高度，如果有滾動視差的話，要大於前兩者的高度
16. floating: false, //是否隱藏可滾動的標題
滑動到最上面，再滑動是否隱藏導航欄的文字和標題等的具體內容，為true是隱藏，為false是不隱藏
15. pinned: true, //是否固定導航欄，
為true是固定，為false是不固定，往上滑，導航欄可以隱藏 snap: ##15. false, //是否整塊滑動 只跟floating相對應，如果為true，floating必須為true，也就是向下滑動一點兒，整個大背景就會動畫顯示全部，網上滑動整個導航欄的內容就會消失
示例所在的位置：github.com/LiuC520/flu…