Flutter學習筆記（16）--Scaffold腳手架、AppBar組件、BottomNavigationBar組件

今天的內容是Scaffold腳手架、AppBar組件、BottomNavigationBar組件，通過這三個組件，能大體構建出一個app的主頁面，頂導和底導。 ...

如需轉載，請註明出處：Flutter學習筆記（16）--Scaffold腳手架、AppBar組件、BottomNavigationBar組件

今天的內容是Scaffold腳手架、AppBar組件、BottomNavigationBar組件，通過這三個組件，能大體構建出一個app的主頁面，頂導和底導。

Scaffold（腳手架組件）

Scaffold實現了基本的Material Design佈局，只要是在Material Design中定義過的單個界面顯示的佈局控制項元素，都可以使用Scaffold來繪製。

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是可以跟隨內容滾動的。

AppBar及SliverAppBar組件屬性及描述
屬性名	類型	預設值	說明
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主頁底部都採用這種切換的方式。

BottomNavigationBar組件屬性及描述
屬性名	類型	說明
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,
      ),