天天看點

Flutter 2-11】Flutter手把手教程UI布局和Widget——清單ListView | 七日打卡

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

效果如下

Flutter 2-11】Flutter手把手教程UI布局和Widget——清單ListView | 七日打卡

Axis.horizontal

Flutter 2-11】Flutter手把手教程UI布局和Widget——清單ListView | 七日打卡

參數reverse可以控制清單是按正序顯示還是倒序顯示。

reverse = true

表示倒序顯示

Flutter 2-11】Flutter手把手教程UI布局和Widget——清單ListView | 七日打卡

reverse = false

表示正序顯示

Flutter 2-11】Flutter手把手教程UI布局和Widget——清單ListView | 七日打卡

某些情況下我們并不想要ListView可以滾動,隻要把physics設定為NeverScrollableScrollPhysics即可。physics還有其他兩個比較重要的值:ClampingScrollPhysics:在Android裝置上有微光效果。BouncingScrollPhysics:在iOS裝置上有彈性效果。

在ListView.separated()構造函數中,我們可以傳入一個自定義的Divider來作作為分隔的樣式

這裡我們來看一下Divider都有哪些參數:

height = 0

Flutter 2-11】Flutter手把手教程UI布局和Widget——清單ListView | 七日打卡

height = 10

Flutter 2-11】Flutter手把手教程UI布局和Widget——清單ListView | 七日打卡

thinkness = 10

Flutter 2-11】Flutter手把手教程UI布局和Widget——清單ListView | 七日打卡

indent = 100

Flutter 2-11】Flutter手把手教程UI布局和Widget——清單ListView | 七日打卡

end = 100

Flutter 2-11】Flutter手把手教程UI布局和Widget——清單ListView | 七日打卡

想體驗以上示例的運作效果,可以到我的Github倉庫項目flutter_app->lib->routes->listview_page.dart檢視,并且可以下載下傳下來運作并體驗。

繼續閱讀