專案常用效果!Flutter仿頭條頂部tab切換實現!

yilian發表於2020-02-13

概述

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

效果圖

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

專案常用效果!Flutter仿頭條頂部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中,如果我們的 AppScaffold無法修改, 那我們需要在想要實現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屬性上。

專案常用效果!Flutter仿頭條頂部tab切換實現!

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,所以我們同時 讓我們 stateMixins 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切換實現!

上面是我入門時的學習內容: Flutte從入門到進階實戰學習影片,可以在這裡免費分享給大家,關注+點贊,簡信我【flutter】就行,篇幅有限,下篇文章繼續講解其他的內容。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69952849/viewspace-2675521/,如需轉載,請註明出處,否則將追究法律責任。

相關文章