大家好，我是堅果，公眾號“堅果前端”

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 接受一個小部件，可以分配任何東西——文本、圖標，甚至一行中的多個小部件。

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 {@overrideWidget 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 {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(),);} }

當我們將 添加Drawer到Scaffold時 ，會分配一個菜單圖標leading來打開抽屜。

class HomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(),drawer: Drawer(),);} }

如果需要，可以通過設置automaticallyImplyLeadingfalse來防止這種行為。

AppBar(automaticallyImplyLeading: false, // simple as that! ),

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是與 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 的圖標、文本、背景、高度、陰影顏色和工具欄設置主題

所以我們有了！關于 Flutter 的 AppBar 必須提供的所有內容的完整演練。我希望這篇文章能幫助你在未來所有的 Flutter 應用程序中創建漂亮的 AppBars。

最后附上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, })

希望大家能夠喜歡本文，謝謝

總結

以上是生活随笔為你收集整理的[flutter专题]详解AppBar小部件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。