AppBar由工具栏和其他组件组成，如TabBar和FlexibleSpaceBar。AppBar通常使用IconButtons公开一个或多个常见的操作，也可以使用PopupMenuButton，用于不常见的操作（有时称为“溢出菜单”）。
TabBar：一个显示水平Tabs的Material Design组件。通常使用AppBar.bottom与TabBarView（用来显示与每个TabBar对应的页面视图）结合实现AppBar底部的切换选项卡。在TabBar与TabBarView结合使用时，若未提供TabController，则必须提供父级DefaultTabController。并且选项卡控制器的TabController.length必须等于选项卡列表的长度。
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyTabbedPage());
//选项卡
class MyTabbedPage extends StatefulWidget {
const MyTabbedPage({Key key}) : super(key: key);
@override
_MyTabbedPageState createState() => _MyTabbedPageState();
}
class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
final List<Tab> myTabs = <Tab> [
Tab(text: '首页', icon: Icon(Icons.home),),
Tab(text: '消息', icon: Icon(Icons.message),),
Tab(text: '我的', icon: Icon(Icons.account_circle),)
];
TabController _tabController;
String appBarTitle = "首页";
@override
void initState() {
super.initState();
//监听选项卡事件，选择选项卡重置AppBar标题
_tabController = TabController(length: myTabs.length, vsync: this)..addListener(() {
if(_tabController.indexIsChanging) {
setState(() {
appBarTitle = '${myTabs[_tabController.index].text}';
});
}
});
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(appBarTitle),
bottom: TabBar(
tabs: myTabs,//两个或多个Tab组件的列表
controller: _tabController,//组件的选择和动画状态
isScrollable: true,//选项卡是否可以水平滚动，若为true，则每个选项卡宽度与其标签一样宽，并且整个TabBar都可以滚动。否则每个选项卡将根据可用空间被等分
indicatorColor: Colors.red,//显示在选项卡下边的线条颜色，如果设置为null，则使用Theme的indicatorColor属性的颜色值
indicatorWeight: 2.0,//选项卡下边线条的权重，也就是粗细
indicatorPadding: EdgeInsets.all(5.0),//选中选项卡下边的线条水平填充
//定义所选选项卡指示器的外观,如果指定该属性值，则忽略indicatorColor，indicatorWeight和indicatorPadding属性
//可以使用UnderlineTabIndicator定义默认值，下划线样式，选中Tab标签的线条样式
//indicator: BoxDecoration(color: Colors.amber, border: Border.all(width: 2.0, color: Colors.deepOrange)),
indicatorSize: TabBarIndicatorSize.tab,//定义选中选项卡下边线条的宽度，与文本标签一样宽，与tab标签一样宽
labelColor: Colors.deepPurple,//选中Tab中文本标签样式
labelStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),//所选标签的文本样式
labelPadding: EdgeInsets.all(10.0),//选项卡文本标签内边距
unselectedLabelStyle: TextStyle(fontSize: 12.0),//未选中的Tab文本标签样式
unselectedLabelColor: Colors.deepOrangeAccent,//未选中的Tab文本标签颜色
dragStartBehavior: DragStartBehavior.down,//确定处理拖动开始行为方式
),
),
body: TabBarView(
controller: _tabController,
children: myTabs.map((Tab tab) {
return Center(child: Text(tab.text),);
}).toList(),
),
),
);
}
}
效果图如下：
TabBar
用于扩展和折叠Material Design AppBar，常用于
SliverAppBar.flexibleSpace属性来灵活控制组件的滚动而展开和收缩。
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyFlexibleSpaceBar());
class MyFlexibleSpaceBar extends StatefulWidget {
const MyFlexibleSpaceBar({Key key}):super(key: key);
@override
_MyFlexiblePaceBarPageState createState() => _MyFlexiblePaceBarPageState();
}
class _MyFlexiblePaceBarPageState extends State<MyFlexibleSpaceBar> with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('FlexibleSpaceBar组件'),
),
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget> [
SliverAppBar(
expandedHeight: 150.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
"可折叠的组件"
),
),
backgroundColor: Colors.red,
),
];
},
body: Center(
child: Text("向上拖动，查看效果"),
),
),
),
);
}
}
效果如下：
FlexibleSpaceBar
从上边示例我们可以看出，通常使用Scaffold.appBar属性，将AppBar放置在屏幕顶部并固定高度。对于可以滚动的AppBar，我们可以使用SliverAppBar。
我们可以在AppBar上显示工具栏组件，标题组件前显示的组件，标题组件，标题组件后显示的操作组件以及AppBar底部的组件（如果有的话）。如果指定了flexibleSpace窗口组件，则它将堆叠在工具栏和底部窗口组件后。
AppBar布局
如果我们省略了leading组件，但应用程序中我们实现了抽屉式的组件，则会自动在leading组件位置插入一个打开抽屉的按钮。可以通过automatedImplyLeading设置为false来关闭此行为。
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyAppBar());
class MyAppBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(icon: Icon(Icons.add), onPressed: () {
}),
],
leading: Icon(Icons.face),
centerTitle: false,//控制文本标签是否居中
title: Text("AppBar组件"),
flexibleSpace: Icon(Icons.print),
bottom: PreferredSize(
child: Text("我是AppBar Bottom"),
preferredSize: Size(10.0, 10.0),
),
),
),
);
}
}
效果如下：
AppBar
AppBar 属性
AppBar属性
本节内容到此结束，若在使用过程中遇到问题，欢迎留言交流，我们一起成长。
