Flutter 基礎Widgets之AppBar詳解

摘要： AppBar Material風格應用欄，有工具欄和其他的Widget構成 應用欄通常用於Scaffold.appBar屬性，該屬性將應用欄放置在螢幕頂部的固定高度小部件中。對於可滾動的應用欄，請參閱SliverAppBar，它將一個AppBar嵌入到一個條子中，以便在CustomScroll...

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 {
@override
Widget build(BuildContext context) {
return new DefaultTabController(
length: 3,
child: new Scaffold(
// AppBarMaterial 應用欄，有工具欄和其他的Widget構成 應用欄通常用於Scaffold.appBar屬性，
// 該屬性將應用欄放置在螢幕頂部的固定高度小部件中。對於可滾動的應用欄，
// 請參閱SliverAppBar，它將一個AppBar嵌入到一個條子中，以便在CustomScrollView中使用。
appBar: AppBar(
// leading: ,

// 現在標題前面的Widget，一般為一個圖示按鈕，也可以是任意Widget
leading: 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底部透明度，設定方式同toolbarOpacity
bottomOpacity: 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(),
));
}
}

複製程式碼

實現效果：