13-3使用TabBar+TabBarView 實現旅拍可滑動切換多Tab


實現tab,可以點擊切換

首先來實現一個tab框架。首先創建travel_page

定義成員變量,用到TabView,所以需要先定義TabController。然后定義本頁的數據TravelModel

默認為空數組

還有TravelTabModel

在initState內請求接口數據

這個this我們需要一個TickerProvider


這里我們讓他實現SingleTickerProviderStateMinxin就可以了。

名稱修改下,修改為TravelDao

這里返回類型修改為TravelTabModel。並導入這個包




獲取到接口的數據,並賦值給變量,實現內容的渲染


報錯的處理。

build內實現tab功能

首先頁面是上下結構的,自外層放一個column
實現Tabbar的組件之類用tabbar

tabBar接收一個Controller。可以把我們當前的_controller傳遞過去。

使tabBar可以左右滑動

設置指示器


設置淺入量

設置tabs

tabs屬性接收的是一個數組

這里直接調用toList就可以了


運行測試

彩蛋

如果TabBar是靜態的。在tabs這個屬性里面寫死的數據就沒事,

如果tabs是根據網路請求之后, 動態的渲染的就是出現這種空白的bug

節后獲取到數據之后需要重新初始化controller




這樣我們的tab數據就加載完成了。

底部的內容

加完這一塊,整個頁面又是空白

這是一個渲染的異常。

沒有指定高度,所以發生渲染的異常。



幫我們適配撐開內容。適配水平方向上的沒有撐開的內容。外層我們用它包裹一下。

這樣就解決了渲染過程中,丟失寬度和高度的問題。

禁止PageView的滑動

首頁左右滑動效果禁用,和旅拍的tab通過手指左右滑動的問題。


結束

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM