ListView是在移動端非常常見的控件,在大多數的展示場景中都離不開ListView。在Flutter中對ListView的封裝也非常好,簡單幾行代碼就可以滿足我們布局一個滾動清單的需求。
先來看一下構造函數:
Flutter給我們提供了四種構造ListView的方法,有ListView()、ListView.builder()、ListView.separated()、ListView.custom()、
構造函數
描述
ListView()
靜态構造方法 初始化之前需要确定資料源的大小
ListView.builder()
動态構造方法 可動态傳入資料
ListView.separated()
動态構造方法 可動态傳入資料 可動态定制分割線的樣式
ListView.custom()
動态構造方法 需要傳入SliverChildDelegate來做動态生成
靜态構造方法和動态構造方法ListView()是初始化的時候需要确定資料源的大小,一旦初始化成功後不能再次動态的插入資料。ListView.builder()、ListView.separated()、ListView.custom()可以動态的插入資料,且能夠更小的節省記憶體空間。
我們來看以下代碼:
同樣是需要初始化10個子控件,我們分别在List.generate方法和itemBuilder方法中做了列印操作
輸出如下:
由輸出的log可見,builder方法隻初始化了7個子控件,ListView()方法完整的初始化了10個子控件。
builder方法是在需要使用的時候才會初始化,當頁面滾動到第9個子控件的時候,這個時候才會初始化第9個子控件。
這樣做的優勢是:當我們的清單資料量很大的時候(比如說有成百上千個資料),我們隻初始化幾個來滿足頁面的顯示需求,其他的控件在需要的時候,再做初始化這樣就大大的幫助我們節省記憶體空間。
ListView同時具備了水準布局和垂直布局的能力,我們隻需要給scrollDirection設定不同的參數即可。scrollDirection接收的參數值有兩個Axis.vertical和Axis.horizontal
Axis.vertical
效果如下
Axis.horizontal
參數reverse可以控制清單是按正序顯示還是倒序顯示。
reverse = true
表示倒序顯示
reverse = false
表示正序顯示
某些情況下我們并不想要ListView可以滾動,隻要把physics設定為NeverScrollableScrollPhysics即可。physics還有其他兩個比較重要的值:ClampingScrollPhysics:在Android裝置上有微光效果。BouncingScrollPhysics:在iOS裝置上有彈性效果。
在ListView.separated()構造函數中,我們可以傳入一個自定義的Divider來作作為分隔的樣式
這裡我們來看一下Divider都有哪些參數:
height = 0
height = 10
thinkness = 10
indent = 100
end = 100
想體驗以上示例的運作效果,可以到我的Github倉庫項目flutter_app->lib->routes->listview_page.dart檢視,并且可以下載下傳下來運作并體驗。