Flutter TabBar

先看一下Tab的构造方法:

TabBar({

    Key key,

    @required this.tabs,

    this.controller,

    this.isScrollable: false,

    this.indicatorColor,

    this.indicatorWeight: 2.0,

    this.indicatorPadding: EdgeInsets.zero,

    this.indicator,

    this.indicatorSize,

    this.labelColor,

    this.labelStyle,

    this.unselectedLabelColor,

    this.unselectedLabelStyle,

  })

Tab使用方法

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {

  @override

  createState() => new MyHomePageState();

}

class MyHomePageState extends State<MyHomePage> {

  final List<Tab> myTabs = <Tab>[

    Tab(text: '明教'),

    Tab(text: '霸刀'),

    Tab(text: '天策'),

    Tab(text: '纯阳'),

    Tab(text: '少林'),

    Tab(text: '藏剑'),

    Tab(text: '七秀'),

    Tab(text: '五毒'),

  ];

  @override

  Widget build(BuildContext context) {

    return DefaultTabController(

      length: myTabs.length,

      child: Scaffold(

        appBar: AppBar(

          backgroundColor: Colors.blue,

           title: TabBar(

            tabs: myTabs,

            isScrollable: true,

            indicatorColor: Colors.red,

            labelColor: Colors.white,

          ),

        ),

        body: TabBarView(

            children: myTabs

                .map((Tab tab) => Center(child: Text(tab.text)))

                .toList()),

      ),

    );

  }

}

Flutter切换tab后保留tab状态
Flutter中为了节约内存不会保存widget的状态，widget都是临时变量。当我们使用TabBar，TabBarView是我们就会发现，切换tab后再重新切换回上一页面，这时候tab会重新加载重新创建，体验很不友好。Flutter出于自己的设计考虑并没有延续android的ViewPager这样的缓存页面设计，毕竟控件两端都要开发，目前还在beta版本有很多设计还不够完善，但是设计的拓展性没得说，flutter还是为我们提供了解决办法。我们可以强制widget不显示情况下保留状态，下回再加载时就不用重新创建了。

AutomaticKeepAliveClientMixin
AutomaticKeepAliveClientMixin 是一个抽象状态，使用也很简单，我们只需要用我们自己的状态继承这个抽象状态，并实现 wantKeepAlive 方法即可。

继承这个状态后，widget在不显示之后也不会被销毁仍然保存在内存中，所以慎重使用这个方法。

详细官方文档请看这里。

这里还有一个说的比较详细的 demo。

/*

 * Created by 李卓原 on 2018/9/13.

 * email: zhuoyuan93@gmail.com

 *

 */

import 'package:flutter/material.dart';

class TweetsListPage extends StatefulWidget {

  @override

  State<StatefulWidget> createState() => TweetListState();

}

class TweetListState extends State<TweetsListPage>

    with AutomaticKeepAliveClientMixin {

  @override

  Widget build(BuildContext context) {

    return Center(

      child: Text('TweetsListPage'),

    );

  }

  @override

  void dispose() {

    print('TweetsListPage dispose');

    super.dispose();

  }

  // 当页面不显示的时候也常驻在内存中

  @override

  bool get wantKeepAlive => true;

}

巴特西

Flutter TabBar

Tab使用方法

最新文章

热门文章