Flutter教学目录持续更新中
github源代码持续更新中
1.AppBar介绍
类似于安卓里面的ToolBar，可以设置title，左右action，右边可以实现action聚合，底部可以防止tabBar，大概结构如下：
1600693822(1).png
2.常用属性介绍
- leading：左侧的action功能
- title：标题文字。
- actions ：右侧的action功能，也可以使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单，实现功能聚合。
- bottom：通常是 TabBar，Tab 导航栏。
- elevation： 控件的 z 坐标
- flexibleSpace：可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用，类似于Android中的CollapsingToolbarLayout，可以轻松实现页面头部展开、合并的效果，这个组件后期会讲到。
- backgroundColor： Appbar 的颜色，改值通常和下面的三个属性一起使用。
- brightness： Appbar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness。
- iconTheme ：Appbar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme。
- textTheme：Appbar 上的文字样式。
- centerTitle：标题是否居中显示，默认值根据不同的操作系统，显示方式不一样。
- titleSpacing： 标题与其他控件的空隙
- toolbarOpacity： AppBar tool区域透明度
- bottomOpacity： bottom区域透明度
3.leading介绍
这个默认情况下都是返回键，如果设置了策划栏就是变为打开侧滑栏，当然也可以自定义一个按钮
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
}),
4.actions介绍
这个可以放普通的widget也可应使用 PopupMenuButton 来显示为三个点做功能聚合，比如我们按一个关注按钮跟一个更多按钮，更多里面是邮件、搜索功能
1600694725(1).png
1600694740(1).png
actions: [
IconButton(
icon: Icon(Icons.favorite),
onPressed: () {
ToastUtil.showToast('关注');
}),
PopupMenuButton(
padding: EdgeInsets.all(0),
itemBuilder: (context) => [
PopupMenuItem(
child: Row(
children: [
Icon(
Icons.mail,
color: Colors.black,
),
Text(
'邮件邮件邮件',
style:
TextStyle(fontSize: 18, backgroundColor: Colors.red),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'mail',
),
PopupMenuItem(
child: Row(
children: [
Icon(Icons.search, color: Colors.black),
Text(
'搜索',
style:
TextStyle(fontSize: 18, backgroundColor: Colors.red),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'search',
),
],
onSelected: (value) {
switch (value) {
case 'mail':
ToastUtil.showToast('mail');
break;
case 'search':
ToastUtil.showToast('search');
break;
}
},
),
],
5.bottom介绍
这个一般是用来实现tanBar的，关于tabBar的详细使用会在后面的文章单独在介绍
1600695100(1).png
class _TabBean {
const _TabBean({this.title, this.icon});
final String title;
final IconData icon;
}
final _tabDataList = [
_TabBean(title: 'Tab1', icon: Icons.account_balance),
_TabBean(title: 'Tab2', icon: Icons.people),
_TabBean(title: 'Tab3', icon: Icons.save),
_TabBean(title: 'Tab4', icon: Icons.favorite),
_TabBean(title: 'Tab5', icon: Icons.home),
_TabBean(title: 'Tab6', icon: Icons.audiotrack),
_TabBean(title: 'Tab7', icon: Icons.add_shopping_cart),
];
bottom: TabBar(
tabs: widget._tabDataList
.map((e) => Container(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [Icon(e.icon), Text(e.title)],
),
))
.toList(),
isScrollable: true,
controller:
TabController(length: widget._tabDataList.length, vsync: this),
labelColor: Colors.black,
indicatorColor: Colors.red,
),
下一节基础组件之FlutterLogo、Placeholder