Flutter網格型佈局 - GridView篇

小石頭若海發表於2019-07-15
FlutterView

1. 前言

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

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

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

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

app網格佈局使用

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(),
)
複製程式碼

預覽

Flutter網格型佈局 - GridView篇

再來看一個模仿喜馬拉雅中相聲列表用到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]);
  },
)
複製程式碼

預覽

Flutter網格型佈局 - GridView篇

4. 總結

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

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

相關文章