Flutter 組件集錄: AppBar 的使用 | 開發者說·DTalk

本文原作者: 張風捷特烈，原文發布于: 編程之王

前言

說起 AppBar 組件，大家都比較熟悉，默認情況下是一個 Material 風格的頭部標題欄?？赡苡腥艘苫?，這么簡單的東西，有什么好說的？其實該組件一些重要的屬性很多人都不知道，另外在使用過程中有一些細節，本文將結合使用和源碼來詳細探討一下 AppBar 組件。

如下是 Material 2 和 Material 3 風格下默認的 AppBar 展示效果:

Material 2	Material 3

AppBar(title: const Text('AppBar 組件')),

AppBar 組件的高度

對于 AppBar 來說，最重要的莫過于它的高度，那它的高度是如何確定的呢？這就不得不說 PreferredSizeWidget 一族的組件了。如下可見，它實現了 PreferredSizeWidget 類:

如下所示，PreferredSizeWidget是一個抽象類，其中定義了 preferredSize 抽象 get 方法，返回 Size 對象。也就是說該族的組件是需要預先設定尺寸的:

abstract class PreferredSizeWidget implements Widget {
Size get preferredSize;
}

所以 AppBar 既然實現 PreferredSizeWidget，就必然實現 preferredSize 方法，返回尺寸。所以根據這個線索可以知道高度是如何確定的: AppBar 中定義了preferredSize 成員，所以抽象的 get 方法，將獲取該成員:

在 AppBar 構造方法中，preferredSize 被賦值為 _PreferredAppBarSize 對象，其中有兩個入參: toolbarHeight，和 bottom 的高度。

如下是 _PreferredAppBarSize 類的定義，它繼承自 Size，是一個專為 AppBar 高度派生的類。Size#fromHeight 構造中，寬度無限大，高度是 toolbarHeight 和 bottomHeight 的和。其中 toolbarHeight 如果為空，會取 kToolbarHeight，值為 56: ?

---->[AppBar]----
@override
final Size preferredSize;


---->[_PreferredAppBarSize]----
class _PreferredAppBarSize extends Size {
_PreferredAppBarSize(this.toolbarHeight, this.bottomHeight)
    : super.fromHeight((toolbarHeight ?? kToolbarHeight) + (bottomHeight ?? 0));
final double? toolbarHeight;
final double? bottomHeight;
}


---->[Size#fromHeight]----
const Size.fromHeight(double height) : super(double.infinity, height);

另外 AppBar 是可以指定 PreferredSizeWidget 類型的 bottom 組件，在標題的底部展示。如下所示，所以可以說，AppBar 組件的高度就是 toolbarHeight 和 bottom 組件高度之和。 ?

---->[AppBar]----
final PreferredSizeWidget? bottom;
final double? toolbarHeight;

另外，可以通過參數指定 toolbarHeight 的值，如下是 40 的效果，可以看出標題的高度變小，但并不會影響 bottom。

?

AppBar(
title: const Text('AppBar 組件'),
toolbarHeight: 40,
),

關于 AppBar 的高度需要注意的就是這些，一般來說 AppBar 作為 Scaffold#appBar 屬性的欽定組件使用，不會在外界單獨使用。

AppBar 組件的部位

一個普通的 AppBar可以包含如下四個部位，leading 是左側組件，title 是中間組件，actions 的右側組件列表。bottom 是底部組件:

?

---->[AppBar]----
final PreferredSizeWidget? bottom;
final Widget? leading;
final Widget? title;
final List? actions;

通過查看布局效果可以更清晰地看出 AppBar 各部位的占位情況，

?

另外，還有一個 Widlget 類型的 flexibleSpace 屬性，在源碼實現的過程中，該組件將通過 Stack 疊放在 AppBar下方。效果如下，如果普通的 AppBar 底部用貼圖的需求，可以使用這個屬性:

?

---->[AppBar]----
final Widget? flexibleSpace;

部位相關控制屬性

下面介紹一些關于部位的屬性: centerTitle 是一個 bool 值，可以控制 title 是否居中顯示。這個是在整體的居中，所以 AppBar 的標題欄并不是一個簡單的 Row 組件包裹，具體地實現細節，將在源碼分析中介紹:

---->[AppBar]----
final bool? centerTitle;

toolbarOpacity 和 bottomOpacity 分別用來控制標題欄和底欄的透明度，取值范圍是 [0 ~ 1]，默認是 1 不透明。一般來說很少有這種需求，了解一下即可:

?

---->[AppBar]----
final double? toolbarOpacity;
final double? bottomOpacity;

titleSpacing 是一個 double 值，用于控制標題欄和區域左側的間隔，默認情況下根據 Material 的風格有一定的空間，該值為 16:

所以想要消除這個間距，讓 titleSpacing 置零即可: ?

final double? titleSpacing;

titleSpacing 是一個 double 值，用于控制左側 leading 的區域寬度，默認情況下是 56，呈正方形: ?

final double? leadingWidth;

AppBar 樣式屬性

可以通過 shape 屬性設置 AppBar 形狀，如下是通過 RoundedRectangleBorder 設置的圓角矩形。另外 elevation 和 shadowColor 分別表示陰影的深度和陰影顏色:

?

參數	類型	描述
shadowColor	Color?	陰影顏色
elevation	double	影深
shape	ShapeBorder?	形狀

另外通過去除陰影、設置背景色，也可以很輕松地擺脫 Material 風格。其中通過了 iconTheme 來配置 AppBar 中的默認圖標主題，這樣如果存在多個按鈕，方便統一配置，避免一個個設置的麻煩。actionsIconTheme 的圖標樣式優先作用于 actions 屬性中的組件。 另外，toolbarTextStyle 為工具條區域內的所有文字通過默認樣式，titleTextStyle 配置的默認標題文字主題，優先級較高。

參數	類型	描述
backgroundColor	Color?	背景色
iconTheme	IconThemeData?	圖標樣式
actionsIconTheme	IconThemeData?	右側圖標樣式
titleTextStyle	TextStyle?	標題文字樣式
toolbarTextStyle	TextStyle?	工具條文字樣式

AppBar(
title: const Text('AppBar 組件'),
leading: BackButton(),
elevation: 0,
backgroundColor: Colors.white,
centerTitle: true,
iconTheme: IconThemeData(color: Colors.black),
titleTextStyle: TextStyle(color: Colors.black,fontSize: 16,fontWeight: FontWeight.bold),
actions: [
IconButton(onPressed: (){}, icon: Icon(Icons.refresh)),
IconButton(onPressed: (){}, icon: Icon(Icons.add)),
],
),

AppBar 的使用細節

AppBar 在構造時可以傳入 automaticallyImplyLeading 屬性，用于控制是否在 leading 為 null 時，根據場景自動添加某些圖標: 比如 Scafflod 中 drawer 屬性非空時，會自動提供 leading，點擊時響應事件打開 drawer。

還有當跳轉界面時，如果使用了 AppBar 并且未提供 leading，會自動添加返回按鈕。如果不想啟用這個功能，將 automaticallyImplyLeading 置為 false 即可。

在 AppBar的使用過程中，有一個非常重要，可能很少人注意的一點: AppBar 的背景色可以影響頂部狀態欄的顏色。比如默認情況下背景色是藍色，狀態欄是白色:

如果背景色是白色，狀態欄就會是黑色，這樣就很方便。

如果不使用 AppBar，也能界面跳著跳著狀態欄就錯亂了。比如類似下面的情況。通過源碼可以知道 AppBar 中會通過 AnnotatedRegion 維護狀態欄的顏色。

如果狀態欄的顏色和您預期的不同，可以通過 systemOverlayStyle 屬性來設置狀態欄的顏色，如下 light 會將狀態欄圖標的顏色變白:

systemOverlayStyle: const SystemUiOverlayStyle(
statusBarIconBrightness:Brightness.light
),

關于 AppBar 的使用基本上就是這些，總的來看，AppBar 算是一個比較優秀的組件，使用很靈活，能滿足絕大多數的頭部欄使用場景。如果您在日常開發中還自己用 Row 來拼裝，那不妨試試 AppBar 組件。

---

長按右側二維碼

查看更多開發者精彩分享

"開發者說·DTalk" 面向中國開發者們征集 Google 移動應用 (apps & games)?相關的產品/技術內容。歡迎大家前來分享您對移動應用的行業洞察或見解、移動開發過程中的心得或新發現、以及應用出海的實戰經驗總結和相關產品的使用反饋等。我們由衷地希望可以給這些出眾的中國開發者們提供更好展現自己、充分發揮自己特長的平臺。我們將通過大家的技術內容著重選出優秀案例進行谷歌開發技術專家 (GDE)?的推薦。

?點擊屏末|閱讀原文|即刻報名參與 "開發者說·DTalk"

---