AppBar詳解：

原文：https://www.jianshu.com/p/77f8b7ee8460

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

 

 

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

  
  
   

  

   

  // 返回每個隱藏的菜單項
  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;
                  }
              },
          ),
      ],
  ),

   

 

作者：iwakevin
鏈接：https://www.jianshu.com/p/77f8b7ee8460
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。