Flutter教学目录持续更新中
Github源代码持续更新中
1.TabBarView简介
显示与当前选中的选项卡相对应的页面视图。通常和TabBar一起使用。
2.TabBarView常用属性
- children：子节点的widgets，跟选项卡相对应
- physics：确定可滚动控件的物理特性
- controller：TabController控制器，
（这个上一节已经讲过，不了解怎么用的可以看一下Flutter入门（13）：Material组件之TabBar）
3. physics属性
这个属性可以确定可滚动控件的物理特性
- BouncingScrollPhysics ：允许滚动超出边界，但之后内容会反弹回来。
- ClampingScrollPhysics ： 防止滚动超出边界，夹住 。
- AlwaysScrollableScrollPhysics ：始终响应用户的滚动。
- NeverScrollableScrollPhysics ：不响应用户的滚动。
4.代码演示
这里我们实现三个Tab选项绑定三个不同的页面，三个页面也不比较简单，就是StatefulWidget页面，里面有text，button，如果需要监听页面或者tab的切换可以设置tabController.addListener()。
1600825899481.jpg
子节点页面
@override
Widget build(BuildContext context) {
super.build(context);
print('_HomeItemPageState build');
return Container(
padding: EdgeInsets.all(10),
child: Column(
children: [
Text('首页'),
Text('num：$_count'),
RaisedButton(
onPressed: () {
_count++;
setState(() {});
},
child: Text('num++'),
),
],
),
);
}
主页面
final _tabList = [
Tab(
text: '首页',
icon: Icon(Icons.home),
iconMargin: EdgeInsets.all(5),
),
Tab(
text: '邮件',
icon: Icon(Icons.mail),
iconMargin: EdgeInsets.all(5),
),
Tab(
text: '我的',
icon: Icon(Icons.people),
iconMargin: EdgeInsets.all(5),
),
];
//定义三个页面
final _pageWidgetList = [
HomeItemPage(),
EmailItemPage(),
MineItemPage(),
];
@override
void initState() {
super.initState();
_tabController = TabController(length: widget._tabList.length, vsync: this);
_tabController.addListener(() {
print('_tabController.addListener');
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabBarViewPage'),
bottom: TabBar(
tabs: widget._tabList,
controller: _tabController,
),
),
body: TabBarView(
children: widget._pageWidgetList,
controller: _tabController,
physics: BouncingScrollPhysics(),
),
);
}
5. TabBarView页面重载的问题
大家都看到子页面里面的Button点击后，num会不断的增加，页面会刷新，但是当三个子页面相互切换的时候，num会归为0，这是因为flutter里面这种时候默认情况下页面从视图移走会被dispose，每次都是重新载入的，因此页面状态没有被保留，那么这个肯定不是我们要的，所以我们需要解决页面重载的问题。这里的理解需要先了解一下State的生命周期，不了解的同学可以看一下这篇文章：Flutter：State生命周期以及页面重载问题详解
不需要重载需要三步
- 混入（with）AutomaticKeepAliveClientMixin
- build方法添加super.build(context)
- 重写wantKeepAlive返回true
（注意这里是对不需要重载的页面添加，就是对TabBarView里的页面，不是对主页面添加，网上有大多博文都是错误的，这也是我为什么想从基础开始写一篇很长的Flutter教学的目的，希望有一个正确的引导）
（如果有对混入（with）不了解的同学可以看一下这篇文章：Flutter（Dart）中extends 、 implements 、 with的用法与区别）
代码示例
我们这里就用HomeItemPage做例子，我们需要home不重载，那么就是对home的State混入（with）AutomaticKeepAliveClientMixin
1600909895283.jpg
class _HomeItemPageState extends State
with AutomaticKeepAliveClientMixin {
var _count = 0;
@override
Widget build(BuildContext context) {
super.build(context);
print('_HomeItemPageState build');
return Container(
padding: EdgeInsets.all(10),
child: Column(
children: [
Text('首页'),
Text('num：$_count'),
RaisedButton(
onPressed: () {
_count++;
setState(() {});
},
child: Text('num++'),
),
RaisedButton(
onPressed: () {
Navigator.pushNamed(context, Constant.homeHomePage);
},
child: Text('下一个页面'),
),
RaisedButton(
onPressed: () {
setState(() {
});
},
child: Text('刷新页面'),
),
],
),
);
}
@override
bool get wantKeepAlive => true;
}
下一节：Material组件之BottomNavigationBar