可能會有一些讀者發現為什麼這麼奇怪
標題都要用中文
這樣很沒sence
是不是英文不好？(是)
其實是在三個環境下
通常要做同一件事
會有不同的名字
所以才想要用中文來統一

Today Preview

GridView跟ListView基本上就是一模模一樣樣
只是差別在於：
ListView是一維
GridView是二維
(複習一下～前面有提到, Flutter的ListView是可以水平scroll的喔⚠️⚠️⚠️)

既然是二維就會有一排幾個的問題
Flutter提供了兩個SliverGridDelegate類別要給餵給gridDelegate屬性
一個是SliverGridDelegateWithFixedCrossAxisCount
另一個SliverGridDelegateWithMaxCrossAxisExtent

FixedCount, 就是固定數量, 以前我們要做到這件事, 還要自己去算cellSize
現在Flutter直接幫你算好⚠️⚠️⚠️
像上面的Preview圖就是把crossAxisCount設為3

而MaxExtent, 就是最大長度(直滾時是寬度, 橫滾時是高度)
GirdView會拿這個數字去計算, 在cell長度不超過的情況下
等分每個cell的大小
這會照成一種效果, 如果不同尺寸的手機
有可能會一排的數量不同(maxCrossAxisExtent為80)

除了這個crossAxisCount/maxCrossAxisExtent不同以外
這兩個SliverGridDelegate的共通屬性是：

• childAspectRatio寬是高的幾倍
• mainAxisSpacing/crossAxisSpacing
  就是minimumLineSpacing/minimumInteritemSpacing啦☘️☘️☘️
  (這兩個我永遠記不得哪個是哪個)

最後
建構GridView的方式
還是一樣有children跟builder兩種
如果看到GridView.count 或 GridView.extent
其實都是透過children

PS. GridView是沒有paging scroll的功能的⚠️⚠️⚠️
(耶～Apple總算贏了)
找了一下好像沒有看到比較好的做法或套件(而且很多都找到分頁加載....)
如果真要做的話應該會使用PageView

  final icons = List.generate(99, (index) => randomBrandIcon());

  @override
  Widget build(BuildContext context) {

    final space = 10.0;
    
    final gird = GridView.builder(
        gridDelegate:
          SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 80,
              mainAxisSpacing: space,
              crossAxisSpacing: space,
              childAspectRatio: 2 //寬是高的幾倍
          ),
        itemCount: icons.length,
        itemBuilder: (ctx, idx) {
          final colorIndex = idx % rainbowBlackWhiteColors().length;
          return Container(
              color: random9Color(),
              child: icons[idx]
          );
        }
    );

    return Scaffold(
        appBar: AppBar(
          title: Text("第十二堂課"),
        ),
        body: Container(
          color: Colors.grey,
          padding: EdgeInsets.all(space),
          child: gird
        )
    );
  }

對照表

下集預告：特製滾動

最後提供一下github.com/mark33699/IDLF