如何進行Flutter仿頭條頂部tab切換實現

這期內容當中小編將會給大家帶來有關如何進行Flutter仿頭條頂部tab切換實現，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

概述

今天主要實現一個仿頭條頂部tab切換實現，這種效果在項目中同樣經常用到， 接下來我們就從頭開始實現。

效果圖

老規矩，開局先上效果圖。

仿頭條頂部tab切換實現

要實現這樣的效果，需要使用TabBar進行實現。我們先講一下TabBar的基本屬性。

TabBar 和 TabBarView

TabBar是屬于AppBar中的一個組件，通常和TabBarView結合使用。

TabBar構造方法及常用屬性簡介

const TabBar({
    Key key,    @required this.tabs,    this.controller,    this.indicatorColor,    this.labelColor,    this.unselectedLabelColor,
  })

TabBarView構造方法及常用屬性簡介

  const TabBarView({
      Key key,      @required this.children,      this.controller,
    })

簡單使用

接下來我們將使用兩種方式實現基本使用，第一種方式是配合DefaultTabController使用，另外一種是配合 TabController使用。在我們使用TabBar的時候必須放在Scaffold控件的AppBar中，如果我們的App中Scaffold無法修改， 那我們需要在想要實現tab效果的頁面上包裹一層Scaffold組件，要使用TabBar組件，必須為其指定TabController，要不然 會報錯，我們先看第一種實現方式，在Scaffold組件外面包裹DefaultTabController實現。

DefaultTabController實現

首先，我們先準備需要切換的tab子項的集合和對應tab子項的具體顯示內容。

  // 需要顯示的tab子項集合
  final tabs = <Tab>[
    Tab(
      text: "熱門",
    ),
    Tab(
      text: "新聞",
    ),
  ];  // 對應上述tab切換后具體需要顯示的頁面內容
  final tabBarViews = <Widget>[
    Center(
      child: Text("熱門Tab對應的界面"),
    ),
    Center(
      child: Text("新聞Tab對應的界面"),
    ),
  ];

然后再HomePage頁面定義一個TabBar實現。

  DefaultTabController(
        length: tabs.length, // tab的個數
        child: Scaffold(
          appBar: AppBar(
            title: TabBar(
              tabs: tabs,
            ),
          ),
          body: TabBarView(
            children: tabBarViews,
          ),
        ),
      );

正常情況下，我們的TabBar應該是對應appBar中的bottom屬性的，但此處我們卸載了title屬性下，是因為我們上層已經 有了一個appBar了，如果再把TabBar對應的寫在appBar的bottom屬性上，就會導致appBar留有一個空白非常難看，效果如下。 所以我們定義在了title屬性上。

TabController實現

上述實現方式有個局限，就是我們點擊切換tab的時候，往往需要監聽同時更改頁面狀態。所以我們以TabController實現。 首先先看一下TabController的構造方法及屬性。

  TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync });

要實現能動態改變狀態的tab切換效果必須先繼承StatefulWidget，因為TabController需要TickerProvider，所以我們同時 讓我們state類Mixins SingleTickerProviderStateMixin這個類。從而更容易的實現TabController，看一下具體的代碼實現。

  class ThirdPage extends StatefulWidget {    @override
    State createState() => _ThirdPageState();
  }  class _ThirdPageState extends State<ThirdPage>      with SingleTickerProviderStateMixin {
    TabController _tabController;    @override
    void initState() {      super.initState();
      _tabController = TabController(length: tabs.length, vsync: this);
      _tabController.addListener(() => print("當前點擊的是第${_tabController.index}個tab"));
    }    @override
    Widget build(BuildContext context) {      return Scaffold(
        appBar: AppBar(
          title: TabBar(
            controller: _tabController,
            tabs: tabs,
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: tabBarViews,
        ),
      );
    }
  }

至此，我們的仿頭條tab切換效果已經實現了。

上述就是小編為大家分享的如何進行Flutter仿頭條頂部tab切換實現了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。