Flutter AppBar
AppBar 显示在app的顶部。AppBar包含5大部分,如下图:
属性介绍:
leading | 左上角的控件,一般放一个icon,位置如上图 |
title | 标题,位置如上图 |
actions | 一系列的组件,位置如上图 |
flexibleSpace | 位置如上图 |
bottom | 位置如上图 |
elevation | 阴影Z轴 |
backgroundColor | 背景颜色 |
brightness | 亮度 |
iconTheme | 图标样式 |
textTheme | 字体样式 |
centerTitle | title是否显示在中间 |
return Scaffold(
appBar: AppBar(
leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () {}),
title: Text('AppBar'),
actions: <Widget>[
IconButton(icon: Icon(Icons.add), onPressed: () {}),
IconButton(icon: Icon(Icons.dashboard), onPressed: () {}),
IconButton(icon: Icon(Icons.cached), onPressed: () {}),
],
flexibleSpace: Container(
color: Colors.red,
),
bottom: PreferredSize(
child: Container(
height: 50,
width: double.infinity,
color: Colors.grey,
child: Text('bottom'),
),
preferredSize: Size(30, 100),
),
),
);
效果:
交流
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
同时也