Flutter仿頭條頂部tab切換實現

微信公衆號：[程序員指北] 關注可瞭解更多的教程。問題或建議，請公衆號留言;

轉載請註明出處: learnandfish.com/

概述

上篇咱們講了實現一個仿閒魚底部導航欄的功能，今天主要實現一個仿頭條頂部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,
  })
複製代碼

屬性名	屬性值類型	說明
tabs	Tab類型的控件集合	要顯示的全部tab子項
controller	TabController類型	主要用來監聽tab的切換
indicatorColor	Color	tab子項指示器的顏色
labelColor	Color	子項文字的顏色
unselectedLabelColor	Color	未選中子項文字的顏色

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

const TabBarView({
    Key key,
    @required this.children,
    this.controller,
  })
複製代碼

屬性名	屬性值類型	說明
children	Widget的集合	對應TabBar每一個子項要顯示的具體內容
controller	TabController類型	主要用來監聽tab的切換

簡單使用

接下來咱們將使用兩種方式實現基本使用，第一種方式是配合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 });
複製代碼

屬性名	屬性值類型	說明
initialIndex	int	初始選擇的tab下標
length	int	tab的個數
vsync	TickerProvider	提供動畫等行爲

要實現能動態改變狀態的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，你懂的。。。