1. 基本介绍
AppBar 提供了常见的导航条功能。
2. 示例代码
代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。
3. AppBar 属性
| AppBar属性 | 介绍 |
|---|---|
| leading | 可以定制左上角按钮 |
| automaticallyImplyLeading | 是否自动导入左上角按钮，默认为 true，例如默认导入返回按钮 |
| title | AppBar 标题 |
| actions | 右上角功能按钮，可自定义 |
| flexibleSpace | 可折叠的应用栏，在改变 appBar 的 size 时有效果 |
| bottom | AppBar下方悬浮栏，可以看下文图片 |
| elevation | 阴影高度，默认为4.0 |
| shadowColor | 阴影颜色 |
| shape | 阴影 ShapeBorder |
| backgroundColor | AppBar 背景色 |
| brightness | Brightness.dark 和 Brightness.light，改变上方电池，时间等状态栏颜色 |
| iconTheme | 所有 icon 的主题 |
| actionsIconTheme | actions 里的所有 icon 主题 |
| textTheme | text 主题 |
| primary | AppBar 是否在整个屏幕最上方，为 true 时，距离 AppBar 贴合状态栏下方，false 时，贴合整个屏幕最上方 |
| centerTitle | title 是否居中 |
| excludeHeaderSemantics | Whether the title should be wrapped with header [Semantics]. 默认为false，没太大用 |
| titleSpacing | title 距离左侧偏移量 |
| toolbarOpacity | AppBar 透明度 |
| bottomOpacity | bottom 透明度 |
| toolbarHeight | AppBar 高度 |
4. AppBar 组件
4.1 容器创建
优雅的编程，首先创建一个 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 设置标题，具体设置方法可以参考Flutter 组件之 Text 详解。
使用 centerTitle 设置标题是否居中。
AppBar _appBar() {
return AppBar(
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
centerTitle: false,
);
}
appbar title left.png
4.3 actions
使用 actions 属性自定义 AppBar 右侧功能键。
AppBar _appBar() {
return AppBar(
title: Text(
'AppBar',
style: TextStyle(
color: Colors.red,
),
),
actions: _actions(),
);
}
List _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
可折叠的应用栏，在改变 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 左侧按钮。
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
通过设置 brightness 改变上方，电池、时间...等图标颜色。
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 的区别，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 设置，并没有发现哪有有变化，如果有思路欢迎私信。
4.14 titleSpacing
使用 titleSpacing 来控制 title 的左侧偏移量
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. 技术小结
- AppBar 整体使用并没有太多难点，基础属性反而是使用最多的。
- 多试一试各种属性，就能熟练掌握。