Flutter 可滾動組件 之 GridView (十七)

GridView可以構(gòu)建一個二維網(wǎng)格列表

景泰網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),景泰網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為景泰成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的景泰做網(wǎng)站的公司定做！

默認構(gòu)造函數(shù)如下：

我們可以看到，GridView和ListView的大多數(shù)參數(shù)都是相同的，它們的含義也都相同的。我們唯一需要關(guān)注的是gridDelegate參數(shù)，類型是SliverGridDelegate，它的作用是控制GridView子組件如何排列(layout)。

SliverGridDelegate 是一個抽象類，定義了GridView Layout相關(guān)接口，子類需要通過實現(xiàn)它們來實現(xiàn)具體的布局算法。Flutter中提供了兩個 SliverGridDelegate 的子類 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithFixedCrossAxisCount

該子類實現(xiàn)了一個橫軸為固定數(shù)量子元素的layout算法，其構(gòu)造函數(shù)為：

可以發(fā)現(xiàn)，子元素的大小是通過crossAxisCount和childAspectRatio兩個參數(shù)共同決定的。注意，這里的子元素指的是子組件的最大顯示空間，注意確保子組件的實際大小不要超出子元素的空間。

示例

SliverGridDelegateWithMaxCrossAxisExtent

該子類實現(xiàn)了一個橫軸子元素為固定最大長度的layout算法，其構(gòu)造函數(shù)為

maxCrossAxisExtent為子元素在橫軸上的最大長度，之所以是“最大”長度，是因為橫軸方向每個子元素的長度仍然是等分的，舉個例子，如果ViewPort的橫軸長度是450，那么當(dāng)maxCrossAxisExtent的值在區(qū)間[450/4，450/3)內(nèi)的話，子元素最終實際長度都為112.5，而childAspectRatio所指的子元素橫軸和主軸的長度比為最終的長度比。其它參數(shù)和SliverGridDelegateWithFixedCrossAxisCount相同。

示例

GridView.count構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithFixedCrossAxisCount，我們通過它可以快速的創(chuàng)建橫軸固定數(shù)量子元素的GridView

示例

GridView.extent構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithMaxCrossAxisExtent，我們通過它可以快速的創(chuàng)建橫軸子元素為固定最大長度的的GridView

示例

上面我們介紹的GridView都需要一個widget數(shù)組作為其子元素，這些方式都會提前將所有子widget都構(gòu)建好，所以只適用于子widget數(shù)量比較少時，當(dāng)子widget比較多時，我們可以通過GridView.builder來動態(tài)創(chuàng)建子widget。GridView.builder 必須指定的參數(shù)有兩個：

示例

假設(shè)我們需要從一個異步數(shù)據(jù)源（如網(wǎng)絡(luò)）分批獲取一些Icon，然后用GridView來展示:

_retrieveIcons()：在此方法中我們通過Future.delayed來模擬從異步數(shù)據(jù)源獲取數(shù)據(jù)，每次獲取數(shù)據(jù)需要200毫秒，獲取成功后將新數(shù)據(jù)添加到_icons，然后調(diào)用setState重新構(gòu)建。

在 itemBuilder 中，如果顯示到最后一個時，判斷是否需要繼續(xù)獲取數(shù)據(jù)，然后返回一個Icon。

GridView.builder 源碼定義如下：

它主要要傳兩個參數(shù) gridDelegate 和 childrenDelegate ，gridDelegate是SliverGridDelegate類型，SliverGridDelegate它有兩個子類，就是我們上文中說的 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent ，childrenDelegate 是SliverChildDelegate類型，SliverChildDelegate也有兩個子類 SliverChildBuilderDelegate 和 SliverChildListDelegate ,一個是通過Builder創(chuàng)建Item，一個是指定所有item。和ListView 很類似

示例

補充知識點：

GridView中的Sliver是SliverGrid

ListView 和 GridView 都是繼承于BoxScrollView，BoxScrollView中存在一個抽象方法buildChildLayout，這個buildChildLayout方法是在提供Sliver，GridView中關(guān)于buildChildLayout實現(xiàn)如下：

Flutter 可滾動組件 之 SingleChildScrollView （十五）

SingleChildScrollView 源碼定義如下：

需要注意的是， 通常 SingleChildScrollView 只應(yīng)在期望的內(nèi)容不會超過屏幕太多時使用 ，這是因為 SingleChildScrollView 不支持基于 Sliver 的延遲加載模型，所以如果預(yù)計視口可能包含超出屏幕尺寸太多的內(nèi)容時，那么使用 SingleChildScrollView 將會非常昂貴（性能差），此時應(yīng)該使用一些支持Sliver延遲加載的可滾動組件，如 ListView 。

示例1

下面是一個將大寫字母 A-Z 沿垂直方向顯示的例子，由于垂直方向空間會超過屏幕視口高度，所以我們使用SingleChildScrollView：

示例2

示例3 - 橫向滾動

Flutter ScrollView（滾動視圖）

ScrollView 是一個帶有滾動的視圖組件。

ScrollView 由三部分組成：

ScrollView 有以下常用屬性：

注：ScrollView 是一個抽象類，通常使用 CustomScrollView。

SliverAppBar 可以實現(xiàn)背景，標(biāo)題，頂部導(dǎo)航欄聯(lián)動，漸隱漸出動畫。