Flutter 容器控制元件篇-->Scaffold

夜夕i發表於2019-09-30

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

可以簡單的將Scaffold理解為一個佈局的容器。可以在這個容器中繪製我們的使用者介面。

Scaffold屬性

引數	說明
appBar	顯示在介面頂部的一個 AppBar
body	當前介面顯示的主體內容
floatingActionButton	在 Material 中定義的一個功能按鈕
persistentFooterButtons	固定在下方顯示的按鈕
drawer	側邊欄控制元件
bottomNavigationBar	顯示在底部的導航欄按鈕欄
backgroundColor	背景顏色
resizeToAvoidBottomPadding	控制介面內容 body

原始碼示例

建構函式如下：

const Scaffold({
    Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
})
複製程式碼

屬性解釋

appBar

就是顯示在介面頂部的文字

示例地址：flutterchina.club/catalog/sam…

AppBar 和 SliverAppBar 都是 Material Design 中的 App Bar

二者的區別在於 AppBar 的位置是固定在應用最上面的；而 SliverAppBar 是可以跟隨內容滾動的。

主要屬性：

leading：在標題前面顯示的一個控制元件，在首頁通常顯示應用的 logo；在其他介面通常顯示為返回按鈕
title：Toolbar 中主要內容，通常顯示為當前介面的標題文字
actions：一個 Widget 列表，代表 Toolbar 中所顯示的選單，對於常用的選單，通常使用IconButton 來表示；對於不常用的選單通常使用 PopupMenuButton 來顯示為三個點，點選後彈出二級選單
bottom：一個 AppBarBottomWidget 物件，通常是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄
flexibleSpace：一個顯示在 AppBar 下方的控制元件，高度和 AppBar 高度一樣，可以實現一些特殊的效果，該屬性通常在 SliverAppBar 中使用
backgroundColor：AppBar的顏色，預設值為 ThemeData.primaryColor。改值通常和下面的三個屬性一起使用
- brightness：AppBar 的亮度，有白色和黑色兩種主題，預設值為 ThemeData.primaryColorBrightness
- iconTheme：App bar 上圖示的顏色、透明度、和尺寸資訊。預設值為 ThemeData.primaryIconTheme
- textTheme： App bar 上的文字樣式。預設值為 ThemeData.primaryTextTheme
centerTitle：標題是否居中顯示，預設為false，居中顯示為true

body

頁面要顯示的主體內容，不做過多介紹

floatingActionButton

在body中定義的一個浮動按鈕，預設在螢幕右下方

persistentFooterButtons

固定在下方顯示的按鈕

示例地址：material.io/components/…

drawer

側邊欄控制元件

文件地址：book.flutterchina.club/chapter5/ma…

bottomNavigationBar

顯示在頁面底部的導航欄