如需轉載，請注明出處：Flutter學習筆記（16）--Scaffold腳手架、AppBar組件、BottomNavigationBar組件
今天的內容是Scaffold腳手架、AppBar組件、BottomNavigationBar組件，通過這三個組件，能大體構建出一個app的主頁面，頂導和底導。
-
Scaffold（腳手架組件）
Scaffold實現了基本的Material Design布局，只要是在Material Design中定義過的單個界面顯示的布局控件元素，都可以使用Scaffold來繪制。
| 屬性名 | 類型 | 說明 |
| appbar | AppBar | 顯示在界面頂部的一個AppBar |
| body | Widget | 當前界面所顯示的主要內容 |
| floatingActionButton | Widget | 在Material Design中定義的一個功能按鈕 |
| persistentFooterButtons | List<Widget> | 固定在下方展示的按鈕 |
| drawer | Widget | 側邊欄組件 |
| bottomNavigationBar | Widget | 顯示在底部的導航欄按鈕 |
| backgroundColor | Color | 背景顏色 |
| resizeToAvoidBottomPadding | bool | 控制界面內容body是否重新布局來避免底部被覆蓋，比如當鍵盤顯示時，重新布局避免鍵盤遮蓋住內容，默認值為true |
Demo示例：
import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'Scaffold Demo', home: new Scaffold( appBar: new AppBar( title: new Text('Scaffold Demo'), ), body: new Center( child: new Text('Scaffold Dmoe 腳手架組件'), ), //底部導航按鈕 bottomNavigationBar: new BottomAppBar( child: new Container(width: 100,height: 100,), ), backgroundColor: Colors.deepOrange, ), ); } }
效果截圖：
-
AppBar（導航）
應用中的頂部導航有兩種，一種AppBar一種SilveApprBar，這兩種對應Android中的toolbar，AppBar和SliveApprBar都是繼承自StatefulWidget，這兩者的區別是AppBar是固定在應用的最上面，就是頁面的最頂部，而SliveApprBar是可以跟隨內容滾動的。
| 屬性名 | 類型 | 默認值 | 說明 |
| leading | Widget | null | 在標題前面顯示的一個組件，一般情況下展示按鈕，比如返回按鈕 |
| title | Widget | null | 通常顯示為當前頁面的標題名 |
| actions | List<Widget> | null | 一個Widget列表，一般情況下展示的也是按鈕，比如搜索按鈕等 |
| bottom | PreferredSizeWidget | null | 通常是TabBar，用來在ToolBar標題欄下面顯示一個Tab導航欄 |
| elevation | double | 4 | 紙墨設計中組件的z坐標順序，對於可滾動的SliverBar，當SliverBar和內容同級的時候，該值為0，當內容滾動SliverAppBar變為toolbar的時候，修改為elevation的值 |
| flexibleSpace | Widget | null | 一個顯示在AppBar下方的組件，高度和AppBar的高度一樣，可以實現一些特殊的效果，該屬性通常在SliverAppBar中使用 |
| backgroundcolor | Color | ThemeData.primaryColor | 背景色 |
| brightness | Brightness | ThemeData.primaryColorBrightness | AppBar的亮度，有白色和黑色兩種主題 |
| iconTheme | IconThemeData | ThemeData.primaryIconTheme | AppBar上圖標的顏色、透明度和尺寸信息 |
| textTheme | TextTheme | ThemeData.primaryTextTheme | AppBar上的文字樣式 |
| centerTitle | bool | true | 標題顯示是否居中，默認值根據不同的操作系統，顯示的方式不一樣 |
示例代碼：
import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( debugShowMaterialGrid: false, debugShowCheckedModeBanner: false, title: 'AppBar Demo', home: new Scaffold( appBar: new AppBar( backgroundColor: Colors.cyanAccent,//標題欄北京設置為淺藍色 leading: Icon(Icons.menu),//標題左側按鈕 iconTheme: IconThemeData(color: Colors.amberAccent,opacity: 30,size: 25),//icon的主題，會作用到AppBar上的所有Icon(不包含IconButton，因為IconButton是個button) title: new Text('AppBar Demo',style: TextStyle(color: Colors.deepPurple,fontSize: 20),),//標題文案及字體樣式設置 actions: <Widget>[ IconButton(icon: Icon(Icons.search),tooltip: '搜索', onPressed: null),//標題右側按鈕 IconButton(icon: Icon(Icons.add),tooltip: '添加', onPressed: null)//標題右側按鈕 ], ), ), ); } }
這些東西在前面的Demo都用過很多次了，就不多加說明了，看下效果截圖：
-
BottomNavigationBar（底部導航條組件）
BottomNaviationBar是底部導航條，主要由按鈕加文字組成，按下按鈕切換不同的頁面，需要一個當前的索引來控制當前具體切換的頁面，可以很容易的在tab之間切換和瀏覽頂級試圖，很多App主頁底部都采用這種切換的方式。
| 屬性名 | 類型 | 說明 |
| currentIndex | int | 當前索引，用來切換按鈕控制 |
| fixedColor | Color | 選中按鈕的顏色，如果沒有指定值，則用系統主題色 |
| iconSize | double | 按鈕圖標大小 |
| items | List<BottomNavigationBarItem> | 底部導航條按鈕集，每一項是一個BottomNavigationBarItem，由icon圖標及title文本屬性 |
| onTap | ValueChanged<int> | 按下其中某一個按鈕回調事件，需要根據返回的索引設置當前索引 |
寫一個簡單的demo，底部導航放置3個選項卡，每點擊一個選項卡，屏幕中間的文案隨之變化，先看下代碼和結果，然后講一下代碼的內容。
import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'BottomNavigationBar Demo', home: new Scaffold( appBar: new AppBar( title: new Text('BottomNavigationBar Demo'), leading: Icon(Icons.menu), actions: <Widget>[ IconButton(icon: Icon(Icons.search), onPressed: null) ], ), body: MyHomePage(), ), ); } } class MyHomePage extends StatefulWidget { @override State<StatefulWidget> createState() { return new _MyHomePageState(); } } class _MyHomePageState extends State { var _selectedIndex = 0; var _selectedText = [ new Text('相機'), new Text('掃碼'), new Text('鬧鍾'), ]; @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: _selectedText.elementAt(_selectedIndex), ), bottomNavigationBar: new BottomNavigationBar( items: <BottomNavigationBarItem>[ BottomNavigationBarItem(icon: Icon(Icons.add_a_photo),title: new Text('相機')), BottomNavigationBarItem(icon: Icon(Icons.center_focus_weak),title: new Text('掃碼')), BottomNavigationBarItem(icon: Icon(Icons.add_alarm),title: new Text('鬧鍾')), ], currentIndex: _selectedIndex, onTap: _onItemTapped, fixedColor: Colors.amberAccent, ), ); } void _onItemTapped(int value) { setState(() { _selectedIndex = value; }); } }
首先要清楚的一點，有狀態變化，所以要用StatefulWidget有狀態組件，其次要想屏幕中間的文案和底部導航按鈕要隨點擊事件的觸發而變化，必然要有初始的索引值和文案的組件數組
var _selectedIndex = 0; var _selectedText = [ new Text('相機'), new Text('掃碼'), new Text('鬧鍾'), ];
這里的_selectedText數組里面裝的是3個Text組件，每次點擊底部導航的按鈕，都會根據索引值將這3個Text分別放進child里面，接下來就行處理我們的bottomNavigationBar，上面的BottomNavigationBar屬性表里面說過所有的選項卡都是放在items集合里面的，currentIndex處理點擊后當前選項的索引值，onTap處理點擊事件，fixedColor處理點擊選項卡的顏色（包含按鈕及文本的顏色）
bottomNavigationBar: new BottomNavigationBar( items: <BottomNavigationBarItem>[ BottomNavigationBarItem(icon: Icon(Icons.add_a_photo),title: new Text('相機')), BottomNavigationBarItem(icon: Icon(Icons.center_focus_weak),title: new Text('掃碼')), BottomNavigationBarItem(icon: Icon(Icons.add_alarm),title: new Text('鬧鍾')), ], currentIndex: _selectedIndex, onTap: _onItemTapped, fixedColor: Colors.amberAccent, ),
最后看一下事件的處理_onItemTapped，其實很簡單，就是更新bottomNavigationBar的索引值，並且通過setState通知頁面重新繪制，最終呈現出我們想要的效果。
好啦，今天就先學這么多！該睡覺啦
下一章節：Flutter學習筆記（17）--頂部導航TabBar、TabBarView、DefaultTabController