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

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

• Scaffold（腳手架元件）

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

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

示例程式碼：

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主頁底部都採用這種切換的方式。

寫一個簡單的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學習筆記（16）--Scaffold腳手架、AppBar元件、BottomNavigationBar