flutter 標(biāo)題欄AppBar屬性詳解

屬性 類型 說明
leading Widget 在標(biāo)題前面顯示的一個控件,在首頁通常顯示應(yīng)用的 logo;在其他界面通常顯示為返回按鈕
title Widget Toolbar 中主要內(nèi)容,通常顯示為當(dāng)前界面的標(biāo)題文字
actions List 一個 Widget 列表,代表 Toolbar 中所顯示的菜單,對于常用的菜單,通常使用 IconButton 來表示;對于不常用的菜單通常使用 PopupMenuButton 來顯示為三個點,點擊后彈出二級菜單
bottom PreferredSizeWidget 一個 AppBarBottomWidget 對象,通常是 TabBar。用來在 Toolbar 標(biāo)題下面顯示一個 Tab 導(dǎo)航欄
elevation double 控件的 z 坐標(biāo)順序,默認(rèn)值為 4,對于可滾動的 SliverAppBar,當(dāng) SliverAppBar 和內(nèi)容同級的時候,該值為 0, 當(dāng)內(nèi)容滾動 SliverAppBar 變?yōu)?Toolbar 的時候,修改 elevation 的值
flexibleSpace Widget 一個顯示在 AppBar 下方的控件,高度和 AppBar 高度一樣,可以實現(xiàn)一些特殊的效果,該屬性通常在 SliverAppBar 中使用
backgroundColor Color Appbar 的顏色,默認(rèn)值為 ThemeData.primaryColor。改值通常和下面的三個屬性一起使用
brightness Brightness Appbar 的亮度,有白色和黑色兩種主題,默認(rèn)值為 ThemeData.primaryColorBrightness
iconTheme IconThemeData Appbar 上圖標(biāo)的顏色、透明度、和尺寸信息。默認(rèn)值為 ThemeData.primaryIconTheme
textTheme TextTheme Appbar 上的文字樣式
centerTitle bool 標(biāo)題是否居中顯示,默認(rèn)值根據(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ā)起群聊', '1'),
                this.SelectView(Icons.group_add, '添加服務(wù)', '2'),
                this.SelectView(Icons.cast_connected, '掃一掃碼', '3'),
            ],
            onSelected: (String action) {
                // 點擊選項的時候
                switch (action) {
                    case '1': break;
                    case '2': break;
                    case '3': 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ā)布平臺,僅提供信息存儲服務(wù)。

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