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;
}
},
),
],
),

