Flutter的staggered GridView詳細(xì)使用

一搁拙、簡介

flutter staggered gridview是一個支持多列網(wǎng)格大小不同的布局闹究，且Android、iOS滋迈、Web都適用
在這種布局中每個單元格都可以稱為一個Tile闸准。
它有以下幾種特性：

可以像GridView一樣設(shè)置多列
在縱軸和主軸上可以設(shè)置Tile的個數(shù)或者所占用的比例（如crossAxisCount：4硅瞧，StaggeredTile.fit(2)則表示在縱軸上有兩列，如果StaggeredTile.fit(1)則表示在縱軸上有4列恕汇，如果使用StaggeredTile.Count(2,index==0?2.5:3)則表示縱軸有兩列并且主軸方向上第一個Tile的大小其他Tile高度的2.5比3）
可以設(shè)置Tile間的行間距和列間距
能夠在CustomScollerView內(nèi)使用（可以用shrinkWrap:true腕唧，以及ScrollerController關(guān)聯(lián)兩個Widget）
Tile能夠在主軸方向上自適應(yīng)高度（這是比GridView好的地方或辖，不用設(shè)置寬高比，不擔(dān)心溢出）

二枣接、使用

2.1颂暇、pubspec.yaml添加依賴

dependencies:
   flutter_staggered_grid_view:

2.2、導(dǎo)包

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart’;

2.3但惶、6種創(chuàng)建方式

區(qū)別：

StaggeredGridView.count和StaggeredGridView.extent耳鸯，前者創(chuàng)建了一個縱軸方向固定Tile個數(shù)的布局，后者只是在縱軸方法指定了一個Tile個數(shù)的最大值膀曾，這兩種都是適合子Widget個數(shù)比較少的情況县爬，都是List<Widget>來設(shè)置
StaggeredGridView.countBuilder和StaggeredGridView.extentBuild，這兩個跟上面的含義差不多添谊，區(qū)別在于適合子Widget數(shù)量比較多的需要動態(tài)創(chuàng)建的情況
更高級的還有StaggeredGridView.builder和StaggeredGridView.custom财喳，區(qū)別在于創(chuàng)建的方式不同，而且也更加靈活

2.4斩狱、StaggeredTile的使用

StaggeredTile.count：固定縱軸和主軸上的數(shù)量
StaggeredTile.extent：縱軸上的數(shù)量和主軸上的最大范圍
StaggeredTile.fit：縱軸上的數(shù)量

StaggeredGridView有幾列是由crossAxisCount除以StaggeredTile設(shè)置上的縱軸的數(shù)量的結(jié)果耳高。

三、應(yīng)用場景

3.1所踊、無法確定GridView中的item的高度泌枪，所以無法設(shè)置寬高比，這種情況可以使用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實現(xiàn)下拉刷新

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)),
      ),
    ),
  ],
))

四、常見問題總結(jié)（持續(xù)更新）

4.1继薛、嵌套CustomScrollView使用時無法滑動

1陆蟆、升級StaggeredGridView的版本，據(jù)說0.3.0以上版本已經(jīng)解決

2惋增、StaggeredGridView設(shè)置shrinkWrap:true

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者