1. 基本介紹

TabBar赌蔑、TabBarView，TabController 提供了常見的多Tab切換的功能。本文接著 Flutter 組件之 TabBar 詳解繼續(xù)講解彻舰。

2. 示例代碼

代碼下載地址。如果對你有幫助的話記得給個關(guān)注候味，代碼會根據(jù)我的 Flutter 專題不斷更新。

3. 屬性介紹

4. TabBarView 組件

4.1 容器創(chuàng)建

優(yōu)雅的編程，首先創(chuàng)建一個 tabbarview.dart 文件法牲。先直接創(chuàng)建一個 TabBar 組件史汗，Flutter 組件之 TabBar 詳解 已經(jīng)介紹的很詳細(xì)了，不多敘述拒垃。

import 'package:flutter/material.dart';

class FMTabbarViewVC extends StatefulWidget {
  @override
  FMTabbarViewState createState() => FMTabbarViewState();
}

class FMTabbarViewState extends State<FMTabbarViewVC> {
  var pageDatas = [];
  TabController controller;

  @override
  void initState(){
    super.initState();

    initData();
    controller = TabController(length: pageDatas.length, vsync: ScrollableState());
  }


  void initData(){
    pageDatas.add({"title":"一年級英語", "content":["我是一年級英語一班", "我是一年級英語二班","我是一年級英語三班"]});
    pageDatas.add({"title":"二年級英語", "content":["我是二年級英語一班", "我是二年級英語二班","我是二年級英語三班"]});
    pageDatas.add({"title":"三年級英語", "content":["我是三年級英語一班", "我是三年級英語二班","我是三年級英語三班"]});
    pageDatas.add({"title":"四年級英語", "content":["我是四年級英語一班", "我是四年級英語二班","我是四年級英語三班"]});
    pageDatas.add({"title":"五年級英語", "content":["我是五年級英語一班", "我是五年級英語二班","我是五年級英語三班"]});

    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: pageDatas.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('TabBar'),
          bottom: _tabBar(),
        ),
        body: Container(
          color: Colors.grey,
        ),
      ),
    );
  }

  TabBar _tabBar(){
    return TabBar(
      tabs: _tabs(),
      isScrollable: true,
      indicatorColor: Colors.red,
      indicatorWeight: 5,
      controller: controller,
      onTap: (index){
        print("點(diǎn)擊了 index = ${index}");
      },
    );
  }

  List <Widget> _tabs(){
    List <Widget> tabList = [];
    pageDatas.forEach((page) {
      tabList.add(
        Tab(text: page["title"],),
      );
    });
    print(tabList);
    return tabList;
  }
}

tabbar.png

4.2 創(chuàng)建 TabBarView

  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: pageDatas.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('TabBar'),
          bottom: _tabBar(),
        ),
        body: _tabBarView(),
      ),
    );
  }

  TabBarView _tabBarView(){
    return TabBarView(
      children: _tabViews(),
      controller: controller,
    );
  }

  List <Widget> _tabViews(){
    List <Widget> tabViewList = [];
    pageDatas.forEach((page) {
      var contents = page["content"];
      tabViewList.add(
        ListView(
          children: _listViewChildren(contents),
        ),
      );
    });
    print(tabViewList);
    return tabViewList;
  }

  List <Widget> _listViewChildren(List contents){
    List <Widget> children = [];
    contents.forEach((content) {
      children.add(
          ListTile(title: Text("${content}"),)
      );
    });
    return children;
  }

到這里其實(shí)一個聯(lián)動的自定義數(shù)據(jù)的 tabBarView 已經(jīng)完成了停撞。

tabbarview one.png

tabbarview three.png

4.3 physics

使用 physics 完成一些物理效果，使用 ClampingScrollPhysics 實(shí)現(xiàn)Android下微光效果悼瓮。使用 BouncingScrollPhysics 實(shí)現(xiàn)iOS下彈性效果戈毒。

  TabBarView _tabBarView(){
    return TabBarView(
      children: _tabViews(),
      physics: BouncingScrollPhysics(

      ),
      controller: controller,
    );
  }

這里就不截圖了，建議滑到最后一頁繼續(xù)滑動感受一下谤牡。

4.4 dragStartBehavior

啟動阻尼副硅，默認(rèn)為 DragStartBehavior.start，還有個 DragStartBehavior.down翅萤，編譯后自行體驗(yàn)效果吧恐疲。

  TabBarView _tabBarView(){
    return TabBarView(
      children: _tabViews(),
      physics: BouncingScrollPhysics(

      ),
      dragStartBehavior: DragStartBehavior.down,
      controller: controller,
    );
  }

4.5 常見報錯

Controller's length property (5) does not match the number of tabs (1) present in TabBar's tabs property.

tabbarview error.png

注意：當(dāng) TabBarView.children 數(shù)量與 Tabs 數(shù)量不同時腊满，會報錯。注意保持 TabBarView.children 數(shù)量培己、DefaultTabController.length碳蛋， TabBar.tabs 三者數(shù)量相同。

5. 技術(shù)小結(jié)

• TabBarView 的屬性較少省咨。
• TabBarView.children 數(shù)量肃弟、DefaultTabController.length， TabBar.tabs 三者數(shù)量必須相同零蓉。
• TabBarView 可以理解為一個特殊的容器笤受，主要的還是子控件的布局，可以使用任意組件敌蜂。
• 使用好 TabController 控制聯(lián)動效果箩兽。