Flutter AppBar(頂端欄)

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



AppBar 有以下常用屬性:

  • leading → Widget - 在標題前面顯示的一個控件,在首頁通常顯示應用的 logo;在其他界面通常顯示為返回按鈕。
  • title → Widget - Toolbar 中主要內(nèi)容,通常顯示為當前界面的標題文字。
  • actions → List - 一個 Widget 列表,代表 Toolbar 中所顯示的菜單,對于常用的菜單,通常使用 IconButton 來表示;對于不常用的菜單通常使用 PopupMenuButton 來顯示為三個點,點擊后彈出二級菜單。
  • bottom → PreferredSizeWidget - 一個 AppBarBottomWidget 對象,通常是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄。
  • elevation → double - 控件的 z 坐標順序,默認值為 4,對于可滾動的 SliverAppBar,當 SliverAppBar 和內(nèi)容同級的時候,該值為 0, 當內(nèi)容滾動 SliverAppBar 變?yōu)?Toolbar 的時候,修改 elevation 的值。
  • flexibleSpace → Widget - 一個顯示在 AppBar 下方的控件,高度和 AppBar 高度一樣,可以實現(xiàn)一些特殊的效果,該屬性通常在 SliverAppBar 中使用。
  • backgroundColor → Color - Appbar 的顏色,默認值為 ThemeData.primaryColor。改值通常和下面的三個屬性一起使用。
  • brightness → Brightness - Appbar 的亮度,有白色和黑色兩種主題,默認值為 ThemeData.primaryColorBrightness。
  • iconTheme → IconThemeData - Appbar 上圖標的顏色、透明度、和尺寸信息。默認值為 ThemeData.primaryIconTheme。
  • textTheme → TextTheme - Appbar 上的文字樣式。
  • centerTitle → bool - 標題是否居中顯示,默認值根據(jù)不同的操作系統(tǒng),顯示方式不一樣。
  • toolbarOpacity → double


// 返回每個隱藏的菜單項
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, '發(fā)起群聊', '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;
                }
            },
        ),
    ],
),
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.App結(jié)構(gòu)和導航 Scaffold:Material Design布局結(jié)構(gòu)的基本實現(xiàn)。此類提供了用于顯示dra...
    慕容小偉閱讀 4,091評論 0 3
  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 7,322評論 0 17
  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 13,971評論 2 59
  • 昨日小兒子沒有去幼兒園,早起沒有喊他起床,因為頭晚上睡覺很晚,我已經(jīng)睡了。據(jù)先生說,那個聽過講睡前故事的...
    粲若星空閱讀 351評論 0 0
  • 哪有那么多以后,過好現(xiàn)在就好了……
    齊太太閱讀 167評論 0 0

友情鏈接更多精彩內(nèi)容