AppBar
属性 | 描述 |
|---|---|
leading | 在标题前面显示一个控件，在首页通常显示引用logo，在其他界面则是返回键 |
title | 标题，通常显示当前页面的标题文字，可以放组件 |
actions | 通常使用IconButton来表示，可以放按钮组 |
bottom | 通常会放TabBar，在标题下面显示一个Tab导航栏 |
backgroundColor | 导航背景颜色 |
iconTheme | 图标样式 |
textTheme | 文字样式 |
centerTitle | 标题是否居中显示 |
TabBar
属性 | 描述 |
|---|---|
tabs | 显示的标签内容，一般使用Tab对象，也可以是其他Widget |
controller | TabController(控制器)对象 |
isScrollable | 是否可以滚动 |
indicatorColor | 指示器颜色 |
indicatorWeight | 指示器高度 |
indicatorPadding | 底部指示器的Padding |
indicator | 指示器decoration，例如边框等 |
indicatorSize | 指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽，TabBarIndicatorSize.tab跟每个tab等宽 |
labelColor | 选中label颜色 |
labelStyle | 选中label的Style |
unselectedLabelColor | 未选中label的颜色 |
unselectedLabelStyle | 未选中label的Style |
DefaultTabController
属性 | 描述 |
|---|---|
initialIndex | 默认显示第几个 |
length | 总共显示几个tab页面 |
child | 组件 |
Demo
接下来我们来看一下我们的如何使用DefaultTabController Tab AppBar实现顶部Tab
使用DefaultTabController时，我们应该注意的是，需要将其放在MaterialApp里，Scaffold的外层。
class AppBarDemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 0,//默认显示第几个
length: 2,//有几个tab页面
child: Scaffold(
appBar: AppBar(
title: Text('AppBarDemoPage'),
bottom: TabBar(
//将tab放在appbar中
tabs: <Widget>[
Tab(text:'电影'),
Tab(text:'电视剧'),
],
),
),
body: TabBarView(//此处的每一个Widget代表的是每个tab所对应的页面
children: <Widget>[
ListView(
children: <Widget>[
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
],
),
ListView(
children: <Widget>[
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
],
)
],
)
),
);
}
}
代码语言：javascript复制这里提一个小知识点
debugShowCheckedModeBanner可以取消flutter那个右上角debug的标签
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
//是否显示debug
debugShowCheckedModeBanner: false,
// home: Tabs(),等同于 initialRoute: '/',
initialRoute: '/', //初始化的时候加载的路由
onGenerateRoute: onGenerateRoute,
);
}
}我们的展示看起来有那么一丝丑陋，那么我们来继续优化吧！
我们将AppBar中Tab放入我们的TabBar组件。
class AppBarDemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 0,//默认显示第几个
length: 2,//有几个tab页面
child: Scaffold(
appBar: AppBar(
title:Row(
children: <Widget>[
Expanded(
flex: 1,
child: TabBar(
//将tab放在appbar中
tabs: <Widget>[
Tab(text:'电影'),
Tab(text:'电视剧'),
],
),
)
],
)
),
body: TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
],
),
ListView(
children: <Widget>[
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
],
)
],
)
),
);
}
}
TabBarController实现顶部Tab切换
代码语言：javascript复制class TabControllerPage extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return _TabControllerPageState();
}
}
class _TabControllerPageState extends State<TabControllerPage> with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void dispose() { //生命周期函数-组件被销毁时调用。
// TODO: implement dispose
super.dispose();
_tabController.dispose();//进行销毁
}
@override
void initState() { //生命周期函数-组件初始化时调用
// TODO: implement initState
super.initState();
_tabController=TabController(
vsync: this,
initialIndex: 0,//默认加载第几个
length: 2
);
_tabController.addListener((){ //监听器。
print(_tabController.index);//获取下标
setState(() {//进行改变
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabController实现顶部tab切换'),
bottom: TabBar(
controller: _tabController, //此处必须填入
tabs: <Widget>[
Text('热销'),
Text('推荐'),
],
),
),
body: TabBarView(
controller: _tabController,
children: <Widget>[
Center(child: Text('热销'),),
Center(child: Text('推荐'),),
],
),
);
}
}
