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


結束
