flutter 初学 入坑 之 tabBarView切换页面 防止页面重绘

在flutter中，我们经常会用到TabBar来做分类视图，我们可以通过TabBar和TabBarView来进行实现，并且通过TabController实现联动效果。

但是我们会发现，当切换tabBar时，跳转到的页面会进行rebuild，这是为什么呢？

这是因为页面没有保持状态。

解决方法：

1. 混入AutomaticKeepAliveClientMixin

2. 实现wantKeepAlive

3. 在build方法中实现super.build(context)

class _HomePageWidgetState extends State with AutomaticKeepAliveClientMixin, SingleTickerProviderStateMixin {
  TabController _tabController;
  List _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切换页面时避免不必要的重绘。