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;
}