Flutter網格型佈局 - GridView篇

1. 前言

Flutter作爲時下最流行的技術之一，憑藉其出色的性能以及抹平多端的差異優勢，早已引起大批技術愛好者的關注，甚至一些閒魚，美團，騰訊等大公司均已投入生產使用。雖然目前其生態還沒有完全成熟，但身靠背後的Google加持，其發展速度已經足夠驚人，可以預見將來對Flutter開發人員的需求也會隨之增長。

無論是爲了現在的技術嚐鮮還是將來的潮流趨勢，都9102年了，作爲一個前端開發者，似乎沒有理由不去嘗試它。正是帶着這樣的心理，筆者也開始學習Flutter，同時建了一個用於練習的倉庫，後續所有代碼都會託管在上面，歡迎star，一起學習。

經過上一篇對ListView組件的學習，我們已經對滾動型組件的使用有了初步認識，這對今天要學習的GridView組件十分有幫助。因爲兩者都繼承自BoxScrollView，所以兩者的屬性有80%以上是相同的，用法非常相似。

而且如下圖所示可見，GridView網格佈局在app中的使用頻率其實非常高，所以接下來就讓我們來看看在Flutter中如何使用吧~

2. 初識GridView

今天我們的主角GridView一共有5個構造函數：GridView，GridView.builder，GridView.count，GridView.extent和GridView.custom。但是不用慌，因爲可以說其實掌握其默認構造函數就都會了~

來看下GridView構造函數（已省略不常用屬性）：

GridView({
  Key key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  @required this.gridDelegate,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})

雖然又是一大堆屬性，但是大部分都很熟悉，老朋友嘛~除了一個必填參數gridDelegate外，全和ListView默認構造函數的參數一樣，這也是文章開頭爲什麼說掌握了ListView再學GridView非常容易的原因。

那麼接下來，就讓我們來重點關注下gridDelegate這個參數，它其實是GridView組件如何控制排列子元素的一個委託。跟蹤源碼我們可以在scroll_view.dart中看到，gridDelegate的類型是SliverGridDelegate，進一步跟蹤進sliver_grid.dart可以看到SliverGridDelegate其實是一個抽象類，而且一共有兩個實現類：

• SliverGridDelegateWithFixedCrossAxisCount：用於固定列數的場景；
• SliverGridDelegateWithMaxCrossAxisExtent：用於子元素有最大寬度限制的場景；

2.1 SliverGridDelegateWithFixedCrossAxisCount

我們先來看下SliverGridDelegateWithFixedCrossAxisCount，根據類名我們也能大概猜它是幹什麼用的：如果你的佈局中每一行的列數是固定的，那你就應該用它。

來看下其構造函數：

SliverGridDelegateWithFixedCrossAxisCount({
  @required this.crossAxisCount,
  this.mainAxisSpacing = 0.0,
  this.crossAxisSpacing = 0.0,
  this.childAspectRatio = 1.0,
})

• crossAxisCount：列數，即一行有幾個子元素；
• mainAxisSpacing：主軸方向上的空隙間距；
• crossAxisSpacing：次軸方向上的空隙間距；
• childAspectRatio：子元素的寬高比例。

想必看到上面的示例圖，你就秒懂其中各個參數的含義了。不過，這裏有一點需要特別注意：如果你的子元素寬高比例不爲1，那麼你一定要設置childAspectRatio屬性。

2.2 SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithMaxCrossAxisExtent在實際應用中可能會比較少，來看下其構造函數：

SliverGridDelegateWithMaxCrossAxisExtent({
  @required this.maxCrossAxisExtent,
  this.mainAxisSpacing = 0.0,
  this.crossAxisSpacing = 0.0,
  this.childAspectRatio = 1.0,
})

可以看到除了maxCrossAxisExtent外，其他參數和SliverGridDelegateWithFixedCrossAxisCount都是一樣的。那麼maxCrossAxisExtent是幹什麼的呢？我們來看個例子：

假如手機屏寬375，crossAxisSpacing值爲0，

• maxCrossAxisExtent值爲125時，網格列數將是3。因爲125 * 3 = 375，剛好，每一列的寬度就是375/3。
• maxCrossAxisExtent值爲126時，網格列數將是3。因爲126 * 3 > 375，顯示不下，每一列的寬度將是375/3。
• maxCrossAxisExtent值爲124時，網格列數將是4。因爲124 * 3 < 375，仍有多餘，每一列的寬度將是375/4。

可以看到，maxCrossAxisExtent其實就是告訴GridView組件子元素的最大寬度可能是多少，然後計算得到合適的列寬（實際上，我們也很少這麼應用，所以這種方法的使用頻率不高）。

3. 實際應用

經過前面的介紹，我們已經對GrdiView組件有了初步瞭解，下面就來看看如何使用。還記得之前GridView的各種構造函數嗎？其實：

1. GridView默認構造函數可以類比於ListView默認構造函數，適用於有限個數子元素的場景，因爲GridView組件會一次性全部渲染children中的子元素組件；
2. GridView.builder構造函數可以類比於ListView.builder構造函數，適用於長列表的場景，因爲GridView組件會根據子元素是否出現在屏幕內而動態創建銷燬，減少內存消耗，更高效渲染；
3. GridView.count構造函數是GrdiView使用SliverGridDelegateWithFixedCrossAxisCount的簡寫（語法糖），效果完全一致；
4. GridView.extent構造函數式GridView使用SliverGridDelegateWithMaxCrossAxisExtent的簡寫（語法糖），效果完全一致。

先來看一個簡單的例子，它使用到GridView.count構造函數模仿美團外賣首頁服務列表（服務菜單項的代碼可以看這裏，也算是對基礎組件使用的進一步鞏固）：

代碼（文件地址）

GridView.count(
  crossAxisCount: 5,
  padding: EdgeInsets.symmetric(vertical: 0),
  children: serviceList.map((item) => ServiceItem(data: item)).toList(),
)

/*************/
/* 完全等同於 */
/************/

GridView(
  padding: EdgeInsets.symmetric(vertical: 0),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 5,
  ),
  children: serviceList.map((item) => ServiceItem(data: item)).toList(),
)

預覽

再來看一個模仿喜馬拉雅中相聲列表用到GridView.builder創建網格佈局的具體例子（相聲卡片的代碼可以看這裏）：

代碼（文件地址）

GridView.builder(
  shrinkWrap: true,
  itemCount: programmeList.length,
  physics: NeverScrollableScrollPhysics(),
  padding: EdgeInsets.symmetric(horizontal: 16),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
    childAspectRatio: 0.7,
  ),
  itemBuilder: (context, index) {
    return Programme(data: programmeList[index]);
  },
)

預覽

4. 總結

本文先是介紹了GridView組件的屬性含義，並着重講解了SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent分別適用的應用場景。然後，通過兩個實際的應用例子介紹了GridView組件常用的構造函數使用方法。希望通過本文的介紹，你可以掌握Flutter中網格型佈局的使用~

本文所有代碼託管在這兒，也可以關注我的Blog，歡迎一起交流學習~