iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 15
1
Mobile Development

iOS Developer Learning Flutter系列 第 15

iOS Developer Learning Flutter. Lesson14 網格

可能會有一些讀者發現為什麼這麼奇怪
標題都要用中文
這樣很沒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
        )
    );
  }

對照表

Android iOS Flutter
RecycleView(set GridLayoutManager) UICollectionView GridView

下集預告:特製滾動

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


上一篇
iOS Developer Learning Flutter. Lesson13 裁判~可以讓人列完又列這樣的嗎? (多選與側滑)
下一篇
iOS Developer Learning Flutter. Lesson15 特製滾動
系列文
iOS Developer Learning Flutter30

1 則留言

0
ytyubox
iT邦新手 5 級 ‧ 2020-09-30 09:53:11

中文大好,翻譯的過去是真實力!

就亂翻
/images/emoticon/emoticon07.gif

我要留言

立即登入留言