Flutter的staggered GridView詳細使用

panmin發表於2020-05-26
FlutterView

一、簡介

flutter staggered gridview是一個支援多列網格大小不同的佈局，且Android、iOS、Web都適用 在這種佈局中每個單元格都可以稱為一個Tile。 它有以下幾種特性：

  • 可以像GridView一樣設定多列
  • 在縱軸和主軸上可以設定Tile的個數或者所佔用的比例（如crossAxisCount：4，StaggeredTile.fit(2)則表示在縱軸上有兩列，如果StaggeredTile.fit(1)則表示在縱軸上有4列，如果使用StaggeredTile.Count(2,index==0?2.5:3)則表示縱軸有兩列並且主軸方向上第一個Tile的大小其他Tile高度的2.5比3）
  • 可以設定Tile間的行間距和列間距
  • 能夠在CustomScollerView內使用（可以用shrinkWrap:true，以及ScrollerController關聯兩個Widget）
  • Tile能夠在主軸方向上自適應高度（這是比GridView好的地方，不用設定寬高比，不擔心溢位）

二、使用

2.1、pubspec.yaml新增依賴

dependencies:
   flutter_staggered_grid_view:
複製程式碼

2.2、導包

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart’;
複製程式碼

2.3、6種建立方式

區別：

  • StaggeredGridView.count和StaggeredGridView.extent，前者建立了一個縱軸方向固定Tile個數的佈局，後者只是在縱軸方法指定了一個Tile個數的最大值，這兩種都是適合子Widget個數比較少的情況，都是List來設定
  • StaggeredGridView.countBuilder和StaggeredGridView.extentBuild，這兩個跟上面的含義差不多，區別在於適合子Widget數量比較多的需要動態建立的情況
  • 更高階的還有StaggeredGridView.builder和StaggeredGridView.custom，區別在於建立的方式不同，而且也更加靈活

2.4、StaggeredTile的使用

  • StaggeredTile.count：固定縱軸和主軸上的數量

  • StaggeredTile.extent：縱軸上的數量和主軸上的最大範圍

  • StaggeredTile.fit：縱軸上的數量

    StaggeredGridView有幾列是由crossAxisCount除以StaggeredTile設定上的縱軸的數量的結果。

三、應用場景

3.1、無法確定GridView中的item的高度，所以無法設定寬高比，這種情況可以使用StaggeredGridView來自動適配高度

StaggeredGridView.countBuilder(
  shrinkWrap: true,
    controller: _scrollController,
    crossAxisCount: 4,
    crossAxisSpacing: 4,
    mainAxisSpacing: 10,
    itemCount: _count,
    itemBuilder: (context, index) {
      return Container(
          color: Colors.green,
          child: new Center(
            child: new CircleAvatar(
              backgroundColor: Colors.white,
              child: new Text('$index'),
            ),
          ));
    },
    staggeredTileBuilder: (index) =>
        StaggeredTile.fit(2))
複製程式碼

3.2、瀑布流樣式

StaggeredGridView.countBuilder(
  shrinkWrap: true,
    controller: _scrollController,
    crossAxisCount: 4,
    crossAxisSpacing: 4,
    mainAxisSpacing: 10,
    itemCount: _count,
    itemBuilder: (context, index) {
      return Container(
          color: Colors.green,
          child: new Center(
            child: new CircleAvatar(
              backgroundColor: Colors.white,
              child: new Text('$index'),
            ),
          ));
    },
    staggeredTileBuilder: (index) =>
        StaggeredTile.count(2, index == 0 ? 2.5 : 3))
複製程式碼

3.3、配合RefreshIndicator實現下拉重新整理

CustomScrollView(
  controller: _scrollController,
  slivers: <Widget>[
    SliverToBoxAdapter(
      child: RefreshIndicator(
        onRefresh: () async {
          await Future.delayed(Duration(seconds: 5));
        },
        child: StaggeredGridView.countBuilder(
          shrinkWrap: true,
            controller: _scrollController,
            crossAxisCount: 4,
            crossAxisSpacing: 4,
            mainAxisSpacing: 10,
            itemCount: _count,
            itemBuilder: (context, index) {
              return Container(
                  color: Colors.green,
                  child: new Center(
                    child: new CircleAvatar(
                      backgroundColor: Colors.white,
                      child: new Text('$index'),
                    ),
                  ));
            },
            staggeredTileBuilder: (index) =>
                StaggeredTile.count(2, index == 0 ? 2.5 : 3)),
      ),
    ),
  ],
))
複製程式碼

四、常見問題總結（持續更新）

4.1、巢狀CustomScrollView使用時無法滑動

1、升級StaggeredGridView的版本，據說0.3.0以上版本已經解決

2、StaggeredGridView設定shrinkWrap:true

相關文章