Flutter仿頭條頂部tab切換實現

Carlwang發表於2020-02-12
Flutter

微信公眾號：[程式設計師指北] 關注可瞭解更多的教程。問題或建議，請公眾號留言;

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

概述

上篇我們講了實現一個仿閒魚底部導航欄的功能，今天主要實現一個仿頭條頂部tab切換實現，這種效果在專案中同樣經常用到， 接下來我們就從頭開始實現。

效果圖

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

ezgif.com-video-to-gif.gif

仿頭條頂部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屬性上。

1.PNG

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，你懂的。。。

相關文章