在flutter中,我们经常会用到TabBar来做分类视图,我们可以通过TabBar和TabBarView来进行实现,并且通过TabController实现联动效果。
但是我们会发现,当切换tabBar时,跳转到的页面会进行rebuild,这是为什么呢?
这是因为页面没有保持状态。
解决方法:
1. 混入AutomaticKeepAliveClientMixin
2. 实现wantKeepAlive
3. 在build方法中实现super.build(context)
class _HomePageWidgetState extends State<HomePageWidget> with AutomaticKeepAliveClientMixin<HomePageWidget>, SingleTickerProviderStateMixin {
TabController _tabController;
List<String> _tabTitles;/*首页导航分类的titles*/
/*保证页面的活跃*/
@override
bool get wantKeepAlive => true; ///see AutomaticKeepAliveClientMixin
@override
void initState() {
super.initState();
_tabTitles = ['精选', '智能推荐', '母婴', '食品', '女装', '彩妆', '体育', '电竞'];
_tabController = TabController(length: _tabTitles.length, vsync: this);
}
@override
Widget build(BuildContext context) {
super.build(context); /// see AutomaticKeepAliveClientMixin
return Scaffold(
appBar: AppBar(
bottom: PreferredSize(
preferredSize: Size.fromHeight(28.0),
child: TabBarWidget(
tabController: _tabController,
tabTitles: _tabTitles,
...
),
),
),
body: TabBarView(
controller: _tabController,
children: _tabTitles.map((title) {
...
}).toList(),
),
);
}
通过上述三点操作即可实现tabBarView切换页面时避免不必要的重绘。
网友评论