今日要點
》介紹 flutter_staggered_grid_view 專案
》下載並編譯 flutter_staggered_grid_view 專案
》程式架構研究

介紹 flutter_staggered_grid_view 專案

今天要介紹的Github專案，是版面配置用的專案。一般相同大小格狀的版面可以用Gridview, 但如果你需要每格有不同的高度，那你可能需要這個專案來協助你處理版面 letsar/flutter_staggered_grid_view 這Flutter交錯Grid版面配置，支持多列且行大小不同。1.7K 的星星，也是觀注度很高的專案。

先看看他 README.md 裡的運行畫面。

常見的瀑布流版面

下載並編譯 flutter_staggered_grid_view 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 flutter_staggered_grid_view 專案囉。

% git clone https://github.com/letsar/flutter_staggered_grid_view.git

Cloning into 'flutter_staggered_grid_view'...
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
remote: Compressing objects: 100% (27/27), done.
remote: Total 768 (delta 8), reused 14 (delta 0), pack-reused 738
Receiving objects: 100% (768/768), 13.31 MiB | 1.18 MiB/s, done.
Resolving deltas: 100% (390/390), done.

% cd flutter_staggered_grid_view/example 
% flutter pub get

Running "flutter pub get" in example...     1.9s

試 build 一下，

% flutter run -d all

ok，一次成功 Android 執行起來了，iOS也OK。

Staggered

Spannable

其他

程式架構研究

Main.dart : MaterialApp

StaggeredGridView與GridView遵循相同的構造函數約定。
還有兩個構造函數：countBuilder 和 extentBuilder。

StaggeredGridView.countBuilder

這構造函數用來創建具有可變大小的小部件的可滾動2D數組，並在橫軸上按需創建固定數量的圖塊。

StaggeredGridView.extentBuilder

這構造函數用來創建一個可滾動的2D陣列可變大小的 widgets，每一塊具有按需創建的最大橫軸範圍的圖塊。

這二個構造函數適用於具有大量（或無限）子項的網格視圖，因為僅針對那些實際可見的子代調用構建器。

今天就先這樣吧。

好，第17天，寫完。