專案常用效果!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, })
屬性名 | 屬性值型別 | 說明 |
---|---|---|
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
切換效果已經實現了。
上面是我入門時的學習內容: Flutte從入門到進階實戰學習影片,可以在這裡免費分享給大家,關注+點贊,簡信我【flutter】就行,篇幅有限,下篇文章繼續講解其他的內容。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69952849/viewspace-2675521/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Flutter仿頭條頂部tab切換實現Flutter
- 用CSS實現Tab頁切換效果CSS
- html兩種方法來實現tab切換效果HTML
- 仿天貓App實現商品列表佈局切換效果APP
- Android RecyclerView實現頭部懸浮吸頂效果AndroidView
- 用純css實現Tab切換CSS
- Vue實現內部元件輪播切換效果Vue元件
- 純CSS實現Tab欄的切換CSS
- flutter實戰6:TAB頁面切換免重繪Flutter
- 仿京東、淘寶首頁,通過兩層巢狀的RecyclerView實現tab的吸頂效果巢狀View
- javascript實現tab切換的四種方法JavaScript
- vue專案tween方法實現返回頂部Vue
- 【Android】 banner+tab吸頂+viewpager切換+重新整理載入之實現AndroidViewpager
- jquery另外一種類似tab切換效果jQuery
- 實現Vue專案主題切換Vue
- MVVM框架下實現左右滑動切換tabMVVM框架
- [前端外掛] js返回頂部 效果實現前端JS
- 仿今日頭條按鈕loading效果
- flutter 自定義tab導航-頂部導航-底部導航Flutter
- Blazor如何實現類似於微信的Tab切換?Blazor
- OpenGL ES 實現頭部形變和頭部晃動效果
- 封裝頭部切換檢視封裝
- activity切換無動畫效果的實現動畫
- 小程式 tab切換
- vue 實現tab切換動態載入不同的元件Vue元件
- 用Flutter實現一個仿Twitter的點贊效果Flutter
- iOS開發之多表檢視滑動切換示例(仿”頭條”客戶端)iOS客戶端
- flutter 暗黑模式切換過渡動畫實現Flutter模式動畫
- 前端小demo——tab切換前端
- 安卓仿微信Tab頁用Fragment實現安卓Fragment
- 點選返回頂部效果實現程式碼詳解
- css實現網頁”回到頂部“的程式碼效果CSS網頁
- Android 高仿騰訊新聞視訊切換效果Android
- iOS AVPlayer之無縫切換播放(類似今日頭條視訊播放效果)iOS
- Vue 全家桶仿原生App切換效果和頁面快取實踐VueAPP快取
- 直播軟體搭建,利用原生JS實現回到頂部以及吸頂效果JS
- app直播原始碼,利用原生JS實現回到頂部以及吸頂效果APP原始碼JS
- iOS專案開發實戰——實現檢視切換動畫iOS動畫