【Flutter學習】基本組件之AppBar頂部導航欄

一，概述　

　　　AppBar 顯示在app的頂部。AppBar包含5大部分，如下圖：　　　　

　　　　　二，構造函數及參數含義　　　

• 構造函數
  

  AppBar({
      Key key,
      this.leading, //在標題前面顯示的一個控件，在首頁通常顯示應用的 logo；在其他界面通常顯示為返回按鈕
      this.automaticallyImplyLeading = true,
      this.title,   //Toolbar 中主要內容，通常顯示為當前界面的標題文字
      this.actions, //一個 Widget 列表，代表 Toolbar 中所顯示的菜單，對於常用的菜單，通常使用 IconButton 來表示；對於不常用的菜單通常使用 PopupMenuButton 來顯示為三個點，點擊后彈出二級菜單
      this.flexibleSpace,//一個顯示在 AppBar 下方的控件，高度和 AppBar 高度一樣，可以實現一些特殊的效果，該屬性通常在 SliverAppBar 中使用
      this.bottom, //一個 AppBarBottomWidget 對象，通常是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄
      this.elevation = 4.0,//紙墨設計中控件的 z 坐標順序，默認值為 4，對於可滾動的 SliverAppBar，當 SliverAppBar 和內容同級的時候，該值為 0， 當內容滾動 SliverAppBar 變為 Toolbar 的時候，修改 elevation 的值
      this.backgroundColor,//APP bar 的顏色，默認值為 ThemeData.primaryColor。改值通常和下面的三個屬性一起使用
      this.brightness,//App bar 的亮度，有白色和黑色兩種主題，默認值為 ThemeData.primaryColorBrightness
      this.iconTheme, //App bar 上圖標的顏色、透明度、和尺寸信息。默認值為 ThemeData.primaryIconTheme
      this.textTheme, //App bar 上的文字樣式。默認值為 ThemeData.primaryTextTheme
      this.primary = true,
      this.centerTitle,//標題是否居中顯示，默認值根據不同的操作系統，顯示方式不一樣,true居中 false居左
      this.titleSpacing = NavigationToolbar.kMiddleSpacing,
      this.toolbarOpacity = 1.0,
      this.bottomOpacity = 1.0,
      })

參數含義

• 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

三，相關用法小技巧　　

• 設置appBar的高度
  

  Scaffold ( 
          appBar: PreferredSize(
          　　      child: AppBar(),
          　　      preferredSize: Size.fromHeight(screenSize.height * 0.07)
                  )
  );

四，demo演示　　

• 示例demo
  

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
      // TODO: implement build
      return new MaterialApp(
        title: 'Flutter 基礎組件',
        theme: new ThemeData(
          primaryColor: Colors.red
        ),
        home: new MyHomePage(),
      );
    }
  }
  
  class MyHomePage extends StatelessWidget {
    SelecteView(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)
          ],
        ),
      );
    }
  
  
    @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return new Scaffold(
        //AppBar
         appBar: new AppBar(
           leading: new Icon(Icons.home),
           title: new Text('fultter基礎組件學習'),
           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.SelecteView(Icons.message, '發起群聊', 'A'),
                 this.SelecteView(Icons.group_add, '添加服務', 'B'),
                 this.SelecteView(Icons.cast_connected,'掃一掃碼','C'),
               ],
               onSelected: (String action){
                 switch (action) {
                   case 'A':
                    {
                      print('發起群聊');
                    }                   
                     break;
                   
                   case 'B':
                   {
                     print('添加服務');
                   }
                    break;
                   case  'C':
                   {
                     print('掃一掃');
                   }
                   break;
                   default:
                 }
               },
             )
           ],
         ),
          //draw
          drawer:null,
          
        //Body
          body:null,
        //NavigationBar
          bottomNavigationBar: null,
      );
    }
  }

五，官方API　　

　　官方文檔