Last Updated on 2021-05-18 by Clay
之前我曾經寫過《在 Flutter 中使用 ListView 元件建立清單》紀錄如何使用 Flutter 當中內建的 ListView 元件，顯示的效果如下：
但是為了展示的效果更好，我又去搜尋了各式各樣的元件，最後找到了一個賞心悅目的模組：flutter_staggered_grid_view。
在這裡，請原諒我厚顏無恥地引用他們 pub.dev 上的圖片：
如何？真的很漂亮吧？不同的方格組合成一個 Widget，而且還可以向下滑動。有鑑於此，我便開始了這個模組的學習，也順手紀錄在這裡。
更詳細的內容可以到開發者的 pub.dev 去參考： https://pub.dev/packages/flutter_staggered_grid_view
事前準備
由於這是外部的模組，並非 Flutter 自帶的，所以我們得先去 pubspec.yaml 設定這個模組。
在我學習的時候，這個模組的版本到了 0.3.0，但將來想必還會繼續更新吧，最好隨時上開發者的 pub.dev 查看當前最新版本。
寫好了要引用的版本號後，點擊上方的 Packages get，應該幾秒內就可以完成。
上述步驟結束以後，我們便開始撰寫程式。
flutter_staggered_grid_view 使用方法
import 'package:flutter/material.dart'; import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: new Scaffold( appBar: new AppBar( title: new Text('staggered_grid_view TEST'), ), body: StaggeredGridView.countBuilder( crossAxisCount: 4, itemCount: 20, itemBuilder: (BuildContext context, int index) => new Container( color: Colors.deepOrange, child: new Center( child: new CircleAvatar( backgroundColor: Colors.white, child: new Text('$index'), ), ), ), staggeredTileBuilder: (int index) => new StaggeredTile.count(2, 2), mainAxisSpacing: 4.0, crossAxisSpacing: 4.0, ), ), ); } }
Output:
為了展示，我沒有精心設計成上方開發者調整的那般漂亮的界面，只是單純地設定成左右對稱、都含有白底圓框數字的元件。
以下來講解程式碼中各種設置：
- StaggeredGridView.countBuilder： 最重要的設置，這個模組的建立
- crossAxisCount: 寬度的數量
- itemCount: 元件的數量
- StaggeredTile.count: 長寬設定
- mainAxisSpacing: 上下元件間隔
- crossAxisSpacing: 左右元件間隔
當然，以上的設定我們都可以恣意調整。
比如說我們將
itemBuilder: (BuildContext context, int index) => new Container( color: Colors.deepOrange,
設定為深橘色的元件改為：
itemBuilder: (BuildContext context, int index) => new Container( color: index%3==0?Colors.deepOrange:Colors.blueAccent,
這樣一來只有當元件編號整除 3 的元件才會顯示深橘色，其他元件都是藍色。
比如說我們將所有長寬都等於 2 的設定
staggeredTileBuilder: (int index) => new StaggeredTile.count(2, 2),
更改為：
staggeredTileBuilder: (int index) => new StaggeredTile.count(2, index.isOdd?1:2),
只有當元件編號為偶數時長度才是 2，若為奇數則長度只有 1。
Output:
我們就會得到這樣一個有著不同顏色、長寬的元件排列模式。
當然，由於我的美術細胞死去以及時間因素，我並沒有將這個模組使用得美侖美奐，但大家看到開發者設定的那張範例圖片，想必能感受到這個模組的強大。
希望大家都能做出美觀的 App。