flutter佈局-9-appbar導航欄和狀態欄

示例 github：flutterlayout https://github.com/LiuC520/flutterlayout

MaterialApp

連載：flutter佈局-1-column 連載：flutter佈局-2-row 連載：flutter佈局-3-center 連載：flutter佈局-4-container 連載：[flutter佈局-5-Matrix4矩陣變換 連載：flutter佈局-6-MaterialApp 連載：flutter佈局-7-About對話框 連載：flutter佈局-8-animated_icons動畫圖片

AppBar: 包含狀態欄和導航欄

先看下上圖的具體用法

appBar: AppBar(
        title: Container(
          color: Colors.white10,
          child: Row(
            children: <Widget>[Text('標題1'), Text('標題2')],
          ),
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.playlist_play),
            tooltip: 'Air it',
            onPressed: null,
          ),
          IconButton(
            icon: Icon(Icons.playlist_add),
            tooltip: 'Restitch it',
            onPressed: null,
          ),
        ],
        leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            );
          },
        ), // 左側返回按鈕，能夠有按鈕，能夠有文字
        flexibleSpace: Text('d12321312'),
        backgroundColor: Colors.red, //導航欄和狀態欄的的顏色
        elevation: 10, //陰影的高度
        bottom: PreferredSize(
            child: Text('bottom'),
            preferredSize: Size(30, 30)), // 在appbar下面顯示的東西
        brightness: Brightness.light, //控制狀態欄的顏色，lignt 文字是灰色的，dark是白色的
        iconTheme: IconThemeData(
            color: Colors.yellow,
            opacity: 0.5,
            size: 30), //icon的主題樣式,默認的顏色是黑色的，不透明爲1，size是24
        textTheme: TextTheme(), //這個主題的參數比較多,flutter定義了13種不一樣的字體樣式
        centerTitle: true, //標題是否居中，默認爲false
        toolbarOpacity: 0.5, //整個導航欄的不透明度
        bottomOpacity: 0.8, //bottom的不透明度
        titleSpacing: 10, //標題兩邊的空白區域,
      ),
複製代碼

1. title：標題

能夠是文字或者widget，能夠自定義 如：

Container(
          color: Colors.white10,
          child: Row(
            children: <Widget>[Text('標題1'), Text('標題2')],
          ),
        ),
//表示兩個文字橫向排列
複製代碼

// 也能夠直接用一個text來代替
Text('標題1')
複製代碼

2. actions：表示右側的按鈕的動做

是一個包含widget的數組：

actions: <Widget>[
          IconButton(
            icon: Icon(Icons.playlist_play),
            tooltip: 'Air it',
            onPressed: null,
          ),
          IconButton(
            icon: Icon(Icons.playlist_add),
            tooltip: 'Restitch it',
            onPressed: null,
          ),
        ],
複製代碼

上面表示兩個按鈕，同時還有點擊事件，只不過上面我把點擊事件寫成了空的。

3. leading：表示左側的按鈕的動做

這個也是一個widget，也能夠自定義動做，以下：

leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            );
          },
        ), // 左側返回按鈕，能夠有按鈕，能夠有文字
上面表示構造一個新的widget，點擊事件是打開左側的抽屜
複製代碼

4. flexibleSpace：

堆疊在工具欄和標籤欄後面。 它的高度與應用欄的總體高度相同。

flexible space 實際上並不靈活，除非[AppBar]的容器改變了[AppBar]的大小。 [CustomScrollView]中的[SliverAppBar]在滾動時更改[AppBar]的高度。 也能夠看下 FlexibleSpaceBar

flexibleSpace: Text('d12321312'),
複製代碼

flexibleSpace: FlexibleSpaceBar(
          title: Text('flexibleSpace'),
          background: Icon(Icons
              .add), //背景，通常是一個圖片，在title後面，[Image.fit] set to [BoxFit.cover].
          centerTitle: true,
          collapseMode: CollapseMode
              .pin, // 背景 固定到位，直到達到最小範圍。 默認是CollapseMode.parallax(將以視差方式滾動。)，還有一個是none，滾動沒有效果
        ),
複製代碼

5. backgroundColor: Colors.red, //導航欄和狀態欄的的顏色

導航欄的顏色和樣式能夠再Main.dart的MaterialApp裏面配置統一的。 但有時間咱們的某些頁面有單獨的設計，這個背景也是能夠修改的。 flutter佈局-6-MaterialApp

6. elevation: 10, //陰影的高度

默認在導航欄的下面有4的高度陰影，這個也能夠修改的

7.bottom :導航欄下面顯示的widget

看上面圖片中的bottom文字

bottom: PreferredSize(
            child: Text('bottom'),
            preferredSize: Size(30, 30)), // 在appbar下面顯示的東西
複製代碼

其中這個bottom是須要PreferredSize的，裏面有child和寬高，寬高用size來設置

8.brightness ：狀態欄的亮度

這與[backgroundColor]，[iconTheme]，[textTheme]一塊兒設置。 默認是和 ThemeData.primaryColorBrightness 一致的.

Brightness.light,   白底黑字
Brightness.dark,   黑底白字
複製代碼

9. iconTheme，左側圖表的樣式

iconTheme: IconThemeData(
            color: Colors.yellow,
            opacity: 0.5,
            size: 30), //icon的主題樣式,默認的顏色是黑色的，不透明爲1，size是24
複製代碼

表示顏色是黃色，不透明度是0.5，最大值是1； 以及大小是30，默認的大小是24

##10.textTheme：字體的樣式 咱們要設置的話通常用merge，這樣不會改變其餘的值。

默認有13中樣式：

NAME       SIZE   WEIGHT   SPACING  2018 NAME
display4   112.0  thin     0.0      headline1
display3   56.0   normal   0.0      headline2
display2   45.0   normal   0.0      headline3
display1   34.0   normal   0.0      headline4
headline   24.0   normal   0.0      headline5
title      20.0   medium   0.0      headline6
subhead    16.0   normal   0.0      subtitle1
body2      14.0   medium   0.0      body1
body1      14.0   normal   0.0      body2
caption    12.0   normal   0.0      caption
button     14.0   medium   0.0      button
subtitle   14.0   medium   0.0      subtitle2
overline   10.0   normal   0.0      overline
複製代碼

其中thin 表示字體的粗細爲FontWeight.w100 normal是FontWeight.w400 medium是FontWeight.w500 字符間距爲0.0 size就是字體的大小

##11.centerTitle：標題是否居中

centerTitle: true, //標題是否居中，默認爲false
複製代碼

默認是false，通常咱們的設計都是把導航欄的標題居中，不遵循android的md設計，都是按照蘋果的設計來的

12. toolbarOpacity: 0.5, //整個導航欄的不透明度

##13. bottomOpacity: 0.8, //bottom的不透明度

14. titleSpacing: 10, //標題兩邊的空白區域,

示例所在的位置：github.com/LiuC520/flu…