Skip to content

[Flutter] 使用 staggered_grid_view 套件建立漂亮的格狀界面

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:

我們就會得到這樣一個有著不同顏色、長寬的元件排列模式。

當然,由於我的美術細胞死去以及時間因素,我並沒有將這個模組使用得美侖美奐,但大家看到開發者設定的那張範例圖片,想必能感受到這個模組的強大。

這張圖片的 alt 屬性值為空,它的檔案名稱為 example_01.png

希望大家都能做出美觀的 App。

Tags:

Leave a Reply