實現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通過手指左右滑動的問題。
結束