iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 17
0
Mobile Development

「Google Flutter」學習筆記系列 第 17

【Day 17】flutter_staggered_grid_view - 來做個瀑布流版面吧

今日要點
》介紹 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天,寫完。


上一篇
【Day 16】Flame - Flutter 的 遊戲引擎, sample & langaw
下一篇
【Day 18】timeline_tile - 來個時間軸吧
系列文
「Google Flutter」學習筆記30

尚未有邦友留言

立即登入留言