1. 基本介紹
AppBar 提供了常見的導(dǎo)航條功能赡突。
2. 示例代碼
代碼下載地址裳涛。如果對你有幫助的話記得給個關(guān)注，代碼會根據(jù)我的 Flutter 專題不斷更新立美。
3. AppBar 屬性
| AppBar屬性 | 介紹 |
|---|---|
| leading | 可以定制左上角按鈕 |
| automaticallyImplyLeading | 是否自動導(dǎo)入左上角按鈕，默認(rèn)為 true，例如默認(rèn)導(dǎo)入返回按鈕 |
| title | AppBar 標(biāo)題 |
| actions | 右上角功能按鈕汪拥，可自定義 |
| flexibleSpace | 可折疊的應(yīng)用欄，在改變 appBar 的 size 時有效果 |
| bottom | AppBar下方懸浮欄篙耗，可以看下文圖片 |
| elevation | 陰影高度迫筑，默認(rèn)為4.0 |
| shadowColor | 陰影顏色 |
| shape | 陰影 ShapeBorder |
| backgroundColor | AppBar 背景色 |
| brightness | Brightness.dark 和 Brightness.light，改變上方電池宗弯，時間等狀態(tài)欄顏色 |
| iconTheme | 所有 icon 的主題 |
| actionsIconTheme | actions 里的所有 icon 主題 |
| textTheme | text 主題 |
| primary | AppBar 是否在整個屏幕最上方脯燃，為 true 時，距離 AppBar 貼合狀態(tài)欄下方蒙保，false 時辕棚，貼合整個屏幕最上方 |
| centerTitle | title 是否居中 |
| excludeHeaderSemantics | Whether the title should be wrapped with header [Semantics]. 默認(rèn)為false，沒太大用 |
| titleSpacing | title 距離左側(cè)偏移量 |
| toolbarOpacity | AppBar 透明度 |
| bottomOpacity | bottom 透明度 |
| toolbarHeight | AppBar 高度 |
4. AppBar 組件
4.1 容器創(chuàng)建
優(yōu)雅的編程邓厕，首先創(chuàng)建一個 appbar.dart 文件逝嚎。
import 'package:flutter/material.dart';
class FMAppBarVC extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: _appBar(),
);
}
AppBar _appBar() {
return AppBar(
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
);
}
}
appbar title center.png
4.2 title
使用 Title 屬性給 AppBar 設(shè)置標(biāo)題，具體設(shè)置方法可以參考Flutter 組件之 Text 詳解详恼。
使用 centerTitle 設(shè)置標(biāo)題是否居中补君。
AppBar _appBar() {
return AppBar(
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
centerTitle: false,
);
}
appbar title left.png
4.3 actions
使用 actions 屬性自定義 AppBar 右側(cè)功能鍵。
AppBar _appBar() {
return AppBar(
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
);
}
List<Widget> _actions(){
return [
Container(
width: 50,
color: Colors.green,
child: Icon(Icons.image),
),
Container(
width: 50,
color: Colors.greenAccent,
child: Icon(Icons.accessible),
),
Container(
width: 50,
color: Colors.grey,
child: Icon(Icons.backspace),
),
Container(
width: 50,
color: Colors.yellowAccent,
child: Icon(Icons.battery_unknown),
),
];
}
appbar actions.png
4.4 flexibleSpace
可折疊的應(yīng)用欄昧互，在改變 appBar 的 size 時有效果挽铁。
AppBar _appBar() {
return AppBar(
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
flexibleSpace: _flexibleSpaceBar(),
);
}
FlexibleSpaceBar _flexibleSpaceBar(){
return FlexibleSpaceBar(
title: Text('FlexibleSpaceBar'),
);
}
appbar flexibleSpaceBar.png
4.5 leading
使用 leading 制定 appbar 左側(cè)按鈕伟桅。
AppBar _appBar() {
return AppBar(
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
// flexibleSpace: _flexibleSpaceBar(),
leading: _leading(),
);
}
Container _leading(){
return Container(
width: 50,
color: Colors.yellow,
child: Icon(Icons.favorite),
);
}
appbar leading.png
4.6 bottom
AppBar _appBar() {
return AppBar(
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
// flexibleSpace: _flexibleSpaceBar(),
leading: _leading(),
bottom: _preferredSize(),
);
}
PreferredSize _preferredSize(){
return PreferredSize(
preferredSize: const Size.fromHeight(60),
child: Container(
color: Colors.greenAccent,
height: 60,
),
);
}
appbar bottom.png
4.7 backgroundColor
AppBar _appBar() {
return AppBar(
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
// flexibleSpace: _flexibleSpaceBar(),
// leading: _leading(),
// bottom: _preferredSize(),
// shadowColor: Colors.black,
backgroundColor: Colors.grey,
);
}
appbar background grey.png
4.8 brightness
通過設(shè)置 brightness 改變上方，電池叽掘、時間...等圖標(biāo)顏色楣铁。
AppBar _appBar() {
return AppBar(
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
backgroundColor: Colors.grey,
brightness: Brightness.dark,
);
}
appbar brightness .png
appbar brightness light.png
4.9 toolbarHeight
通過 toolbarHeight 改變 appbar 高度。
AppBar _appBar() {
return AppBar(
toolbarHeight: 90,
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
backgroundColor: Colors.grey,
brightness: Brightness.light,
);
}
appbar toolbarHeight.png
4.10 toolbarOpacity
通過 toolbarOpacity 改變 appbar 透明度够掠。
AppBar _appBar() {
return AppBar(
toolbarHeight: 90,
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
backgroundColor: Colors.grey,
brightness: Brightness.light,
toolbarOpacity: 0.5,
);
}
appbar toolbarOpacity.png
4.11 iconTheme
使用 iconTheme 改變按鈕主題民褂。
AppBar _appBar() {
return AppBar(
toolbarHeight: 90,
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
backgroundColor: Colors.grey,
brightness: Brightness.light,
iconTheme: _iconThemeData(),
);
}
IconThemeData _iconThemeData(){
return IconThemeData(
color: Colors.red,
size: 40,
opacity: 0.5,
);
}
appbar iconTheme.png
4.12 actionsIconTheme
使用 actionsIconTheme 改變 actions 按鈕主題。注意與 iconTheme 的區(qū)別疯潭，iconTheme 改變了整個 appBar 的按鈕赊堪，而 actions 僅僅改變 actions 按鈕的主題。
AppBar _appBar() {
return AppBar(
toolbarHeight: 90,
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
backgroundColor: Colors.grey,
brightness: Brightness.light,
// iconTheme: _iconThemeData(),
actionsIconTheme: _iconThemeData(),
);
}
appbar actionsIconTheme.png
4.13 textTheme
我試了好多種 TextTheme 設(shè)置竖哩，并沒有發(fā)現(xiàn)哪有有變化哭廉，如果有思路歡迎私信。
4.14 titleSpacing
使用 titleSpacing 來控制 title 的左側(cè)偏移量
AppBar _appBar() {
return AppBar(
toolbarHeight: 90,
titleSpacing: 40,
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
backgroundColor: Colors.grey,
brightness: Brightness.light,
// iconTheme: _iconThemeData(),
actionsIconTheme: _iconThemeData(),
);
}
appbar titleSpacing.png
4.15 其他屬性
其實 AppBar 還有一些屬性相叁，有興趣可以自己研究一下遵绰。
5. 技術(shù)小結(jié)
- AppBar 整體使用并沒有太多難點，基礎(chǔ)屬性反而是使用最多的增淹。
- 多試一試各種屬性椿访，就能熟練掌握。
