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

如需轉載，請註明出處：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,
      ),

 

最後看一下事件的處理_onItemTapped，其實很簡單，就是更新bottomNavigationBar的索引值，而且經過setState通知頁面從新繪製，最終呈現出咱們想要的效果。

 

好啦，今天就先學這麼多！該睡覺啦

 

下一章節：Flutter學習筆記（17）--頂部導航TabBar、TabBarView、DefaultTabController