目錄
參數詳解
AppBar
TabBar
代碼示例
效果圖
完整代碼
Flutter AppBar元件是應用的工具欄，是由多個元件組成。下面詳細介紹appBar使用方法、TabBar使用方法、去掉頭部的appBar、仿美團發現AppBar(可滾動TabBar)
官方常用屬性圖文簡要說明：
參數詳解
AppBar
| 屬性 | 說明 |
| leading | 在标題前面顯示的一個控件，在首頁通常顯示應用的 logo或菜單； 在其他界面通常顯示為傳回按鈕 |
| automaticallyImplyLeading | 預設true leading為null，并且堆棧中存在頁面，則自動推導為BackButton。 leading不為null，則此參數無效 為false時不會推導，使中間/标題拉伸 |
| title | 标題，通常顯示為目前界面的标題文字，可以放元件 |
| actions | 通常使用 IconButton 來表示，可以放按鈕組 |
| flexibleSpace | 可伸展、折疊部件 |
| bottom | 通常放 tabBar，标題下面顯示一個 Tab 導航欄 |
| elevation | 陰影高度 |
| shape | 形狀 |
| backgroundColor | 導航背景顔色 |
| brightness | 亮度 |
| iconTheme | 圖示樣式 |
| actionsIconTheme | actions樣式 |
| textTheme | 文字樣式 |
| primary | 預設true |
| centerTitle | 标題是否居中顯示 |
| titleSpacing | 預設NavigationToolbar.kMiddleSpacing |
| toolbarOpacity | 應用工具欄透明度 |
| bottomOpacity | 應用欄底部透明度 |
下表面對bottom做簡單介紹
bottom 通常放 tabBar，标題下面顯示一個 Tab 導航欄
Scaffold外層為DefaultTabController元件（嵌套），有三個屬性length（TabBar個數）、initialIndex（預設顯示tabbar下标）、child（子元件）。
注意事項：必須給定length屬性、bottom中子元件個數與TabBarView中子元件個數相對應(不明白可以看示例代碼)。
TabBar
| 屬性 | 說明 |
| tabs | 子元件集合 |
| controller | tab控制器 |
| isScrollable | 是否可滾動。預設false |
| indicatorColor | 訓示器顔色 |
| indicatorWeight | 訓示器高度。預設2.0 |
| indicatorPadding | 訓示器内邊距。預設EdgeInsets.zero |
| indicator | 訓示器裝飾/樣式 |
| indicatorSize | 訓示器大小計算方式，TabBarIndicatorSize.label 跟文字等寬,TabBarIndicatorSize.tab 跟每個 tab 等寬 |
| labelColor | 選中label文字顔色 |
| labelStyle | 選中label字樣式 |
| labelPadding | label内邊距 |
| unselectedLabelColor | 未選中label文字顔色 |
| unselectedLabelStyle | 未選中label字樣式 |
| dragStartBehavior | 預設DragStartBehavior.start |
| onTap |
代碼示例
appBar的基本用法：示例代碼效果見（圖一）
return MaterialApp(
//去掉debug标簽
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Flutter AppBar 元件'),
//标題不居中
centerTitle: false,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
print('我是leading按鈕');
},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.add_a_photo),
onPressed: () {
print('我是右3按鈕');
},
),
IconButton(
icon: Icon(Icons.save),
onPressed: () {
print('我是右2按鈕');
},
),
IconButton(
icon: Icon(Icons.close),
onPressed: () {
print('我是右1按鈕');
},
),
],
),
),
);
appBar中Bottom使用方法：示例代碼效果見（圖二）
return MaterialApp(
home: DefaultTabController(
//指定tabbar個數
length: 3,
initialIndex:0,
child: Scaffold(
appBar: AppBar(
title: Text('Flutter AppBar 元件'),
bottom: TabBar(
tabs: <Widget>[
Tab(text: 'PageA',),
Tab(text: 'PageB',),
Tab(text: 'PageC',),
],
),
),
body: TabBarView(
children: <Widget>[
TabPageA(),
TabPageB(),
TabPageC(),
],
),
),
),
);
}
}
去掉頭部的appBar ：示例代碼效果見（圖三）
//去掉頭部的appBar(其實就是将TabBar元件放在了title中)
return MaterialApp(
home: DefaultTabController(
//指定tabbar個數
length: 3,
initialIndex:0,
child: Scaffold(
appBar: AppBar(
title: TabBar(
tabs: <Widget>[
Tab(text: 'PageA',),
Tab(text: 'PageB',),
Tab(text: 'PageC',),
],
),
),
body: TabBarView(
children: <Widget>[
TabPageA(),
TabPageB(),
TabPageC(),
],
),
),
),
);
仿 美團 發現 AppBar：示例代碼效果見（圖四）
return MaterialApp(
home: DefaultTabController(
//指定tabbar個數
length: 9,
initialIndex:0,
child: Scaffold(
appBar: AppBar(
title: Text('發現',style: TextStyle(fontSize: 22,color: Color(0xff000000)),),
centerTitle: true,
backgroundColor:Color(0xffffffff),
elevation: 0,
bottom: TabBar(
labelColor: Color(0xff000000),
labelStyle: TextStyle(fontSize: 19),
unselectedLabelColor: Color(0xff000000),
unselectedLabelStyle: TextStyle(fontSize: 13),
isScrollable: true,
indicatorColor: Color(0xff00BF00),
indicatorSize:TabBarIndicatorSize.label,
indicatorWeight:3.0,
tabs: <Widget>[
Tab(text: '推薦',),
Tab(text: '麗人',),
Tab(text: '旅行',),
Tab(text: '電影',),
Tab(text: '結婚',),
Tab(text: '購物',),
Tab(text: '教培',),
Tab(text: '家裝',),
Tab(text: '親子',),
],
),
),
body: TabBarView(
children: <Widget>[
// Widgets ......
),
],
)
),
),
);
效果圖
完整代碼
檢視完整代碼