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。