成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括城區(qū)網(wǎng)站建設(shè)、城區(qū)網(wǎng)站制作、城區(qū)網(wǎng)頁制作以及城區(qū)網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，城區(qū)網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到城區(qū)省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何進(jìn)行Flutter仿頭條頂部tab切換實(shí)現(xiàn)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

概述

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

效果圖

老規(guī)矩，開局先上效果圖。

仿頭條頂部tab切換實(shí)現(xiàn)

要實(shí)現(xiàn)這樣的效果，需要使用TabBar進(jìn)行實(shí)現(xiàn)。我們先講一下TabBar的基本屬性。

TabBar 和 TabBarView

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

TabBar構(gòu)造方法及常用屬性簡介

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

屬性名	屬性值類型	說明
tabs	Tab類型的控件集合	要顯示的所有tab子項(xiàng)
controller	TabController類型	主要用來監(jiān)聽tab的切換
indicatorColor	Color	tab子項(xiàng)指示器的顏色
labelColor	Color	子項(xiàng)文字的顏色
unselectedLabelColor	Color	未選中子項(xiàng)文字的顏色

TabBarView構(gòu)造方法及常用屬性簡介

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

屬性名	屬性值類型	說明
children	Widget的集合	對應(yīng)TabBar每個子項(xiàng)要顯示的具體內(nèi)容
controller	TabController類型	主要用來監(jiān)聽tab的切換

簡單使用

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

DefaultTabController實(shí)現(xiàn)

首先，我們先準(zhǔn)備需要切換的tab子項(xiàng)的集合和對應(yīng)tab子項(xiàng)的具體顯示內(nèi)容。

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

然后再HomePage頁面定義一個TabBar實(shí)現(xiàn)。

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

正常情況下，我們的TabBar應(yīng)該是對應(yīng)appBar中的bottom屬性的，但此處我們卸載了title屬性下，是因?yàn)槲覀兩蠈右呀?jīng) 有了一個appBar了，如果再把TabBar對應(yīng)的寫在appBar的bottom屬性上，就會導(dǎo)致appBar留有一個空白非常難看，效果如下。 所以我們定義在了title屬性上。

TabController實(shí)現(xiàn)

上述實(shí)現(xiàn)方式有個局限，就是我們點(diǎn)擊切換tab的時候，往往需要監(jiān)聽同時更改頁面狀態(tài)。所以我們以TabController實(shí)現(xiàn)。 首先先看一下TabController的構(gòu)造方法及屬性。

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

屬性名	屬性值類型	說明
initialIndex	int	初始選擇的tab下標(biāo)
length	int	tab的個數(shù)
vsync	TickerProvider	提供動畫等行為

要實(shí)現(xiàn)能動態(tài)改變狀態(tài)的tab切換效果必須先繼承StatefulWidget，因?yàn)?code>TabController需要TickerProvider，所以我們同時 讓我們state類Mixins SingleTickerProviderStateMixin這個類。從而更容易的實(shí)現(xiàn)TabController，看一下具體的代碼實(shí)現(xiàn)。

  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("當(dāng)前點(diǎn)擊的是第${_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切換效果已經(jīng)實(shí)現(xiàn)了。

上述就是小編為大家分享的如何進(jìn)行Flutter仿頭條頂部tab切換實(shí)現(xiàn)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

分享標(biāo)題：如何進(jìn)行Flutter仿頭條頂部tab切換實(shí)現(xiàn)-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://www.rwnh.cn/article0/dciioo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站導(dǎo)航、服務(wù)器托管、App設(shè)計(jì)、用戶體驗(yàn)、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)