属性 | 描述 |
---|---|
leading |
在标题前面显示一个控件,在首页通常显示引用logo ,在其他界面则是返回键 |
title |
标题,通常显示当前页面的标题文字,可以放组件 |
actions |
通常使用IconButton 来表示,可以放按钮组 |
bottom |
通常会放TabBar ,在标题下面显示一个Tab 导航栏 |
backgroundColor |
导航背景颜色 |
iconTheme |
图标样式 |
textTheme |
文字样式 |
centerTitle |
标题是否居中显示 |
属性 | 描述 |
---|---|
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 |
属性 | 描述 |
---|---|
initialIndex |
默认显示第几个 |
length |
总共显示几个tab页面 |
child |
组件 |
接下来我们来看一下我们的如何使用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: [
Tab(text:'电影'),
Tab(text:'电视剧'),
],
),
),
body: TabBarView(//此处的每一个Widget代表的是每个tab所对应的页面
children: [
ListView(
children: [
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
],
),
ListView(
children: [
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
],
)
],
)
),
);
}
}
这里提一个小知识点
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: [
Expanded(
flex: 1,
child: TabBar(
//将tab放在appbar中
tabs: [
Tab(text:'电影'),
Tab(text:'电视剧'),
],
),
)
],
)
),
body: TabBarView(
children: [
ListView(
children: [
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
ListTile(title: Text('这是电影tab'),),
],
),
ListView(
children: [
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
ListTile(title: Text('这是电视剧tab'),),
],
)
],
)
),
);
}
}
class TabControllerPage extends StatefulWidget{
@override
State createState() {
return _TabControllerPageState();
}
}
class _TabControllerPageState extends State 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: [
Text('热销'),
Text('推荐'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
Center(child: Text('热销'),),
Center(child: Text('推荐'),),
],
),
);
}
}