Flutter 系列文章：Flutter TabBarView 控件介紹

1、控件介紹

一個用於顯示切換的內容區域的視圖控件，經常使用於與tabBar結合使用，abBar就是導航欄，TabBarView就是導航欄當前所對應的內容區，也能夠單獨使用作滑動切換的效果相似android的viewpager。

2、使用方法

TabBarView(
    children: mTabView,//用於切換的子控件列表，若要合TabBar一塊兒使用注意和TabBar的長度同樣
    controller:_tabController,//控制器，若TabBar一塊兒使用注意和TabBar使用同一個controller ，這樣才能保證二者的聯動關係
    physics: ScrollPhysics()), //??
    drawerDragStartBehavior: DragStartBehavior.start, //?
    );
  
複製代碼

3、經常使用屬性

1.設置切換的子控件列表，若要合TabBar一塊兒使用注意和TabBar的長度同樣

children: mTabView,//用於切換的子控件列表，若要合TabBar一塊兒使用注意和TabBar的長度同樣
複製代碼

var mTabView = [
    Container(
      child: Center(
        child: Text(
          '1',
          style: TextStyle(fontSize: 50),
        ),
      ),
      color: Colors.green,
    ),
    Container(
      child: Center(
        child: Text(
          '2',
          style: TextStyle(fontSize: 50),
        ),
      ),
      color: Colors.yellow,
    ),
    Container(
      child: Center(
        child: Text(
          '3',
          style: TextStyle(fontSize: 50),
        ),
      ),
      color: Colors.red,
    )
  ]; //使用widget的形式

複製代碼

2.設置TabController對象（控制器，若是和TabBar一塊兒使用注意和TabBar使用同一個controller）

controller:TabController(vsync: this, length: mTabView.length) //TabController對象

複製代碼

4、總結

一、TabBarView 一個用於顯示切換的內容區域的視圖控件，相似android開發的viewpager控件，經常使用於與tabbar結合使用，與tabbar結合使用時，若要進行二者的聯動，要用同一個TabController，以下面的完整例子所示

二、若要對TabBarView 的切換進行監聽能夠經過TabController.addListener 進行監聽

@override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: mTabView.length);
    //監聽tab切換的回調
    _tabController.addListener(() {
      var index = _tabController.index;
      print('tab 切換了 $index');
    });
  }

複製代碼

三、使用TabController 時對應的類要實現 TickerProviderStateMixin 接口，見下面完整例子，若用DefaultTabController 則簡單不少，因爲應用在無狀態控件中，使用DefaultTabController包裹須要用到Tab的頁面便可，也能夠不用實現對應的接口。

class TabbedAppBarSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new DefaultTabController(
        length: choices.length,
        child: new Scaffold(
          appBar: new AppBar(
            title: const Text('Tabbed AppBar'),
            bottom: new TabBar(
              isScrollable: true,
              tabs: choices.map((Choice choice) {
                return new Tab(
                  text: choice.title,
                  icon: new Icon(choice.icon),
                );
              }).toList(),
            ),
          ),
          body: new TabBarView(
            children: choices.map((Choice choice) {
              return new Padding(
                padding: const EdgeInsets.all(16.0),
                child: new ChoiceCard(choice: choice),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

複製代碼

5、一個完整的例子

import 'dart:ui';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'TabBar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TabBarViewPage(),
    ));

// This app is a stateful, it tracks the user's current choice.
class TabBarViewPage extends StatefulWidget {
  TabBarViewPage({Key key}) : super(key: key);
  @override
  _TabBarViewPageState createState() => _TabBarViewPageState();
}

class _TabBarViewPageState extends State<TabBarViewPage> with TickerProviderStateMixin {
  var mTab = [
    Tab(text: 'tab1', icon: Icon(Icons.ac_unit)),
    Tab(text: 'tab2', icon: Icon(Icons.link)),
    Tab(text: 'tab3', icon: Icon(Icons.directions_run))
  ];
  var mTabView = [
    Container(
      child: Center(
        child: Text(
          '1',
          style: TextStyle(fontSize: 50),
        ),
      ),
      color: Colors.green,
    ),
    Container(
      child: Center(
        child: Text(
          '2',
          style: TextStyle(fontSize: 50),
        ),
      ),
      color: Colors.yellow,
    ),
    Container(
      child: Center(
        child: Text(
          '3',
          style: TextStyle(fontSize: 50),
        ),
      ),
      color: Colors.red,
    )
  ];

  TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: mTabView.length);
    //監聽tab切換的回調
    _tabController.addListener(() {
      var index = _tabController.index;
      print('tab 切換了 $index');
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBarView Demo'),
        bottom: TabBar(
          tabs: mTab, //設置tabbar 的標籤顯示內容，通常使用Tab對象,固然也能夠是其餘的Widget
          controller: _tabController, //TabController對象
          isScrollable: true, //是否可滾動
          indicatorColor: Colors.lightBlueAccent, //指示器顏色
          indicatorWeight: 10.0, //指示器的高度
          indicatorPadding: EdgeInsets.all(10), //底部指示器的Padding
          indicator: BoxDecoration(
              border: Border.all(
                  width: 1, color: Colors.black)), //指示器decoration，例如邊框、顏色等
          indicatorSize: TabBarIndicatorSize
              .tab, //指示器大小計算方式,label 爲以文本爲邊框計算，tab 爲以指示器爲邊框計算
          labelColor: Colors.yellowAccent, //tab 標籤顏色
          labelStyle: TextStyle(color: Colors.black, fontSize: 20), //設置標籤樣式
          unselectedLabelColor: Colors.redAccent, //未選中Tab中文字顏色
          unselectedLabelStyle:
              TextStyle(color: Colors.red, fontSize: 25), //未選中Tab中文字style
        ),
        //tab 文字樣式
      ),
      body: TabBarView(
          children: mTabView, //一系列子控件，若是和TabBar一塊兒使用注意和TabBar的長度同樣
          controller:
              _tabController, //控制器，若是和TabBar一塊兒使用注意和TabBar使用同一個controller
          physics: ScrollPhysics()), //??
      drawerDragStartBehavior: DragStartBehavior.start, //?
    );
  }
}




複製代碼