Flutter 基礎Widgets之AppBar詳解

概述

AppBar Material風格應用欄，有工具欄和其他的Widget構成 應用欄通常用於Scaffold.appBar屬性，該屬性將應用欄放置在螢幕頂部的固定高度小部件中。對於可滾動的應用欄，請參閱SliverAppBar，它將一個AppBar嵌入到一個條子中，以便在CustomScrollView中使用。

appBar建構函式

AppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
  })
複製程式碼

• leading 在title元件前面的元件，一般是一個圖示按鈕，比如一個抽屜按鈕
• automaticallyImplyLeading 配合leading使用，取決於automaticallyImplyLeading == true && leading ==null 此時會自動做出一些哈事情
• title appBar的主要部件，型別為Widget，一般顯示文字
• actions title之後顯示的部件，其實這樣看來，Appbar可以看成一個Row (children: [])佈局
• flexibleSpace 也是一個Widgets,不過好像有一些定義的Widgets 實在不知道怎麼用，因為感覺大量重複
• bottom 這個小部件出現在應用程式欄的底部。 通常是一個TarBar，即一個標籤欄
• elevation 控制下方陰影欄的座標
• backgroundColor 背景顏色
• brightness 應用欄材質的亮度
• iconTheme icon主題設定
• textTheme 文字主題設定
• primary appbar是否顯示在工作列頂部
• centerTitle title是否居中 實測沒變化
• titleSpacing 橫軸上圍繞title內容的間距 0.0即佔據所有有用空間
• toolbarOpacity 應用程式欄的工具欄的透明程度。值1.0是完全不透明的，值0.0是完全透明的
• toolbarOpacity appBar底部透明度，設定方式同toolbarOpacity

例項-實現一個帶抽屜的雲盤搜尋介面

class AppBarLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
        length: 3,
        child: new Scaffold(
          // AppBar  Material 應用欄，有工具欄和其他的Widget構成 應用欄通常用於Scaffold.appBar屬性，
          // 該屬性將應用欄放置在螢幕頂部的固定高度小部件中。對於可滾動的應用欄，
          // 請參閱SliverAppBar，它將一個AppBar嵌入到一個條子中，以便在CustomScrollView中使用。
          appBar: AppBar(
            // leading: ,

            // 現在標題前面的Widget，一般為一個圖示按鈕，也可以是任意Widget
            leading: Builder(
              builder: (BuildContext context) {
                return IconButton(
                  icon: const Icon(Icons.menu),
                  // 如果有抽屜的話的就開啟
                  onPressed: () {
                    Scaffold.of(context).openDrawer();
                  },
                  // 顯示描述資訊
                  tooltip:
                      MaterialLocalizations.of(context).openAppDrawerTooltip,
                );
              },
            ),
            // 配合leading使用，取決於automaticallyImplyLeading == true && leading ==null ，此時會自動做出一些哈事情。
            automaticallyImplyLeading: true,
            // appBar的主要部件，型別為Widget，那麼嘗試做成輸入框？
            title: TextField(
                // 游標顏色
                cursorColor: Colors.blueGrey),
            // title之後顯示的部件，其實這樣看來，Appbar可以看成一個Row (children: <Widget>[])佈局
            actions: <Widget>[
              Container(
                padding: EdgeInsets.only(right: 16),
                child: Icon(Icons.search),
              ),
            ],
            // 也是一個Widgets,不過好像有一些定義的Widgets 實在不知道怎麼用，應為感覺大量重複，
            flexibleSpace: FlexibleSpaceBar(title: Text('')),
            // 這個小部件出現在應用程式欄的底部。 通常是一個TarBar，即一個標籤欄
            bottom: new TabBar(tabs: <Widget>[
              new Tab(icon: Icon(Icons.cloud_done)),
              new Tab(icon: Icon(Icons.cloud_download)),
              new Tab(icon: Icon(Icons.cloud_upload)),
            ]),
            // 控制下方陰影欄的座標
            elevation: 4.0,
            // 背景顏色
            backgroundColor: Colors.blueAccent,
            // 應用欄材質的亮度。
            brightness: Brightness.light,
            // icon主題設定
            iconTheme: IconThemeData(),
            // 文字主題設定
            textTheme: TextTheme(),
            // appbar是否顯示在工作列頂部
            primary: true,
            // title是否居中 實測沒變化
            centerTitle: true,
            // 橫軸上圍繞title內容的間距  0.0即佔據所有有用空間
            titleSpacing: 0.0,
            // 應用程式欄的工具欄部分是多麼不透明。值1.0是完全不透明的，值0.0是完全透明的。
            toolbarOpacity: 1,
            // appabr底部透明度，設定方式同toolbarOpacity
            bottomOpacity: 1,
          ),
          body: new TabBarView(children: <Widget>[
            new Icon(Icons.cloud_done, size: 100),
            new Icon(Icons.cloud_download, size: 100),
            new Icon(Icons.cloud_upload, size: 100),
          ]),
          // 定義一個空抽屜
          drawer: Drawer(),
        ));
  }
}

複製程式碼

實現效果：