Flutter 之 Scaffold 、AppBar 控制元件詳解

Flutter曲線路發表於2021-07-19
FlutterAPP控制元件

 1.Scaffold（佈局結構）

Scaffold 實現了基本的 Material Design 佈局結構。在 Material 設計中定義的單個介面上的各種佈局元素，在 Scaffold 中都支援。

Scaffold 有下面幾個主要屬性：

  • appBar - 顯示在介面頂部的一個 AppBar。
  • body - 當前介面所顯示的主要內容 Widget。
  • floatingActionButton - Material 設計中所定義的 FAB，介面的主要功能按鈕。
  • persistentFooterButtons - 固定在下方顯示的按鈕，比如對話方塊下方的確定、取消按鈕。
  • drawer - 抽屜選單控制元件。
  • backgroundColor - 內容的背景顏色，預設使用的是 ThemeData.scaffoldBackgroundColor 的值。
  • bottomNavigationBar - 顯示在頁面底部的導航欄。
  • resizeToAvoidBottomPadding - 類似於 Android 中的 android:windowSoftInputMode='adjustResize'，控制介面內容 body 是否重新佈局來避免底部被覆蓋了，比如當鍵盤顯示的時候，重新佈局避免被鍵盤蓋住內容。預設值為 true。
@override
Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
            title: new Text('應用'),
        ),
        body: new Center(
            child: new Text('Hello'),
        ),
    );
}
複製程式碼

2.AppBar（標題欄）

AppBar是一個頂端欄，對應著 Android 的 Toolbar。

2400087-662fb54fe6b65892.webp

AppBar 有以下常用屬性：

  • leading → Widget - 在標題前面顯示的一個控制元件，在首頁通常顯示應用的 logo；在其他介面通常顯示為返回按鈕。
  • title → Widget - Toolbar 中主要內容，通常顯示為當前介面的標題文字。
  • actions → List - 一個 Widget 列表，代表 Toolbar 中所顯示的選單，對於常用的選單，通常使用 IconButton 來表示；對於不常用的選單通常使用 PopupMenuButton 來顯示為三個點，點選後彈出二級選單。
  • bottom → PreferredSizeWidget - 一個 AppBarBottomWidget 物件，通常是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄。
  • elevation → double - 控制元件的 z 座標順序，預設值為 4，對於可滾動的 SliverAppBar，當 SliverAppBar 和內容同級的時候，該值為 0， 當內容滾動 SliverAppBar 變為 Toolbar 的時候，修改 elevation 的值。
  • flexibleSpace → Widget - 一個顯示在 AppBar 下方的控制元件，高度和 AppBar 高度一樣，可以實現一些特殊的效果，該屬性通常在 SliverAppBar 中使用。
  • backgroundColor → Color - Appbar 的顏色，預設值為 ThemeData.primaryColor。改值通常和下面的三個屬性一起使用。
  • brightness → Brightness - Appbar 的亮度，有白色和黑色兩種主題，預設值為 ThemeData.primaryColorBrightness。
  • iconTheme → IconThemeData - Appbar 上圖示的顏色、透明度、和尺寸資訊。預設值為 ThemeData.primaryIconTheme。
  • textTheme → TextTheme - Appbar 上的文字樣式。
  • centerTitle → bool - 標題是否居中顯示，預設值根據不同的作業系統，顯示方式不一樣。
  • toolbarOpacity → double

2400087-e8de5422bbbe0bea.webp

// 返回每個隱藏的選單項
SelectView(IconData icon, String text, String id) {
    return new PopupMenuItem<String>(
        value: id,
        child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
                new Icon(icon, color: Colors.blue),
                new Text(text),
            ],
        )
    );
}

appBar: new AppBar(
    title: new Text('首頁'),
    leading: new Icon(Icons.home),
    backgroundColor: Colors.blue,
    centerTitle: true,
    actions: <Widget>[
        // 非隱藏的選單
        new IconButton(
            icon: new Icon(Icons.add_alarm),
            tooltip: 'Add Alarm',
            onPressed: () {}
        ),
        // 隱藏的選單
        new PopupMenuButton<String>(
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                this.SelectView(Icons.message, '發起群聊', 'A'),
                this.SelectView(Icons.group_add, '新增服務', 'B'),
                this.SelectView(Icons.cast_connected, '掃一掃碼', 'C'),
            ],
            onSelected: (String action) {
                // 點選選項的時候
                switch (action) {
                    case 'A': break;
                    case 'B': break;
                    case 'C': break;
                }
            },
        ),
    ],
),
複製程式碼

2400087-57f04a6b5cba1efe.webp

相關文章