概述

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 {@overrideWidget build(BuildContext context) {return new DefaultTabController(length: 3,child: new Scaffold(// AppBar Material 應用欄，有工具欄和其他的Widget構成 應用欄通常用于Scaffold.appBar屬性，// 該屬性將應用欄放置在屏幕頂部的固定高度小部件中。對于可滾動的應用欄，// 請參閱SliverAppBar，它將一個AppBar嵌入到一個條子中，以便在CustomScrollView中使用。appBar: AppBar(// leading: ,// 現在標題前面的Widget，一般為一個圖標按鈕，也可以是任意Widgetleading: 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底部透明度，設置方式同toolbarOpacitybottomOpacity: 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(),));} }復制代碼

實現效果：

轉載于:https://juejin.im/post/5cc31c216fb9a0321d73b131

總結

以上是生活随笔為你收集整理的Flutter 基础Widgets之AppBar详解的全部內容，希望文章能夠幫你解決所遇到的問題。

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