這裡是堅果前端小課堂，歡迎關注公衆号“堅果前端”，領取flutter電子書以及源碼
AppBar
應用欄是各種應用程式中最常用的元件之一。它可用于容納搜尋字段、以及在頁面之間導航的按鈕，或者隻是頁面标題。由于它是一個如此常用的元件，是以 Flutter 為該功能提供了一個名為AppBar的專用小部件。 在本教程中，我們将通過一些實際示例向您展示如何在 Flutter 應用程式中自定義 AppBar。 以下是我們将介紹的内容：
- Flutter 中的 AppBar 是什麼？
- 應用欄布局
- 自定義 AppBar
Flutter 中的 AppBar 是什麼？
Flutter AppBar 是根據Material Design指南建構的應用程式元件。它通常位于螢幕頂部，并且能夠在其布局中包含其他小部件。AppBar 通常顯示品牌資訊，例如徽标和标題，并且通常包含按鈕或其他使用者互動點。 以下是 Flutter 中預設的 AppBar 的樣子：
// Mostly, AppBar is used inside a Scaffold widget.
Scaffold(
appBar: AppBar(),
), 應用欄布局
在Flutter中，AppBar的布局主要包括三個組成部分：
leading
，
title
，和
actions
。
leading
放置在AppBar的最左邊位置；
title
并
actions
出現在它的右邊。
leading
leading
leading
接受一個小部件，可以配置設定任何東西——文本、圖示，甚至一行中的多個小部件。
AppBar(
leading: Icon(Icons.account_circle_rounded),
), 您可以控制
leading
可以占用多少寬度：
AppBar(
leading: Icon(Icons.account_circle_rounded),
leadingWidth: 100, // default is 56
), 如果
leading
未提供，AppBar 會自動為我們暗示。示例包括傳回上一頁的導航箭頭或打開抽屜的菜單圖示。 當上一條路線可用時，導航箭頭會自動出現。
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TextButton(
child: Text('Push'),
onPressed: () => Navigator.push(context, MaterialPageRoute(
builder: (context) {
return SecondPage();
},
)),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
);
}
} 當我們将 添加Drawer到
Scaffold
時 ，會配置設定一個菜單圖示
leading
來打開抽屜。
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(),
);
}
} 如果需要，可以通過設定
automaticallyImplyLeading
false來防止這種行為。
AppBar(
automaticallyImplyLeading: false, // simple as that!
), title
title
顧名思義，它主要用于顯示标題，例如應用程式标題或頁眉。
AppBar(
title: Text('Profile Page'),
), 但您不僅限于此，因為也
title
需要一個小部件。您可以使用它來顯示圖示、圖像、形狀或使用布局小部件（例如
row
和 ）的任意組合
column
。 下面是一個例子：
AppBar(
title: Container(
width: 40,
child: Image.network(url),
),
), 預設情況
title
下，根據 Material 指南與 AppBar 的左側對齊。您可以更改此設定以使其居中對齊：
AppBar(
title: Container(
width: 40,
child: Image.network(url),
),
centerTitle: true, // like this!
), actions
actions
actions
是與 AppBar 右側對齊的小部件清單。我們通常在用作按鈕的應用程式中看到它們來觸發下拉菜單、個人資料頭像等。
AppBar(
actions: [
Icon(Icons.more_vert),
],
), 讓我們再向清單中添加一個小部件：
AppBar(
actions: [
Container(
width: 30,
child: Image.asset(
'assets/images/profile_pic.png',
),
),
Icon(Icons.more_vert),
],
), 在 Flutter 中自定義 AppBar
現在我們熟悉了 AppBar 的布局，讓我們通過使用主題選項将自定義提升到一個新的水準。AppBar 包含各種屬性，包括顔色、大小、圖示主題、文本主題等等。
背景顔色
以下代碼将 AppBar 的背景顔色更改為深橙色。
500
添加以通路顔色的特定陰影，
900
即最暗和最亮
50
。
AppBar(
backgroundColor: Colors.deepOrange[500],
), 圖示主題
下面的代碼将圖示的顔色更改為綠色，将大小更改為
36
：
AppBar(
actionsIconTheme: IconThemeData(color: Colors.green, size: 36),
), 文字主題
假設您想将文本顔色更改為帶有較淺陰影的琥珀色，
200
并将字型大小設定為
24
：
AppBar(
textTheme: TextTheme(
headline6: TextStyle( // headline6 is used for setting title's theme
color: Colors.amber[200],
fontSize: 24,
),
),
), Elevation
如果你想給 AppBar 一點高度，你可以使用
elevation
. 以下代碼将 AppBar 的高度增加到
15
.
AppBar(
elevation: 15,
), 請注意 AppBar 被擡起并且陰影跨越了更大的區域。
陰影顔色
你甚至可以弄亂陰影的顔色。下面的代碼将 AppBar 的陰影顔色更改為
orangeAccent
。
AppBar(
shadowColor: Colors.orangeAccent,
), 很酷，對吧？
工具欄高度和不透明度
最後，我們有工具欄屬性。工具欄包含文字，圖示，按鈕，和其他任何公司的前景，除了小部件，如
Container
和
Image
。 要更改 AppBar 工具欄項目的高度和不透明度：
AppBar(
toolbarHeight: 100, // default is 56
toolbarOpacity: 0.5,
), 結論
- AppBar 是什麼以及它如何在 Flutter 中使用
- AppBar 的布局 (
leading
title
actions
- 如何自定義 AppBar 的布局和添加小部件
- 如何為 AppBar 的圖示、文本、背景、高度、陰影顔色和工具欄設定主題
最後附上AppBar的一些屬性
AppBar({
Key? key,
this.leading,//左側顯示的圖示 通常首頁顯示的為應用logo 在其他頁面為傳回按鈕
this.automaticallyImplyLeading = true,//配合leading使用
this.title,//标題文本
this.actions,//右側item
this.flexibleSpace,//顯示在 AppBar 下方的控件，高度和 AppBar 高度一樣，
// 可以實作一些特殊的效果，該屬性通常在 SliverAppBar 中使用
this.bottom,//一個 AppBarBottomWidget 對象，通常是 TabBar。用來在 Toolbar 标題下面顯示一個 Tab 導航欄
this.elevation,//控件的 z 坐标順序，預設值 4，對于可滾動的 SliverAppBar，當 SliverAppBar 和内容同級的時候，該值為 0，
// 當内容滾動 SliverAppBar 變為 Toolbar 的時候，修改 elevation 的值。
this.shape,
this.backgroundColor,//AppBar背景色
this.brightness,//AppBar亮度 有黑白兩種主題
this.iconTheme,//AppBar上圖示的樣式
this.actionsIconTheme,//AppBar上actions圖示的樣式
this.textTheme,//AppBar上文本樣式
this.primary = true,
this.centerTitle,//标題是否居中
this.titleSpacing = NavigationToolbar.kMiddleSpacing,//标題與其他控件的空隙
this.toolbarOpacity = 1.0,//AppBar tool區域透明度
this.bottomOpacity = 1.0,//bottom區域透明度
this.toolbarHeight,
this.backwardsCompatibility,
this.toolbarTextStyle,
this.titleTextStyle,
this.systemOverlayStyle,
})