用flutter_staggered_grid_view实现分页瀑布流效果【flutter20个实例之四】

一、老套路，先看样式

二、讲解

1.前言的话

GridView是一个可滚动的，2D数组控件可以用这个组件实现滚动效果，但是它渲染的高度是一样的。

如果要实现不同高度的滚动瀑布流，就要使用这个插件：

flutter_staggered_grid_view

说明：配置pubspec.yaml文件，最好要使用0.3.2版本以上，此时flutter版本需要1.17以上的支持

因为低版本的插件支持并不友好

flutter_staggered_grid_view: ^0.3.2

如果组件无法滑动，可能就是版本的问题导致

2.插件的git地址

https://github.com/letsar/flutter_staggered_grid_view

在使用的flutter组件中导入这个插件

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

3.效果体验

new StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)

4.配合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)),
      ),
    ),
  ],
))

5.六种创建方式和属性

StaggeredGridView.count和StaggeredGridView.extent，前者创建了一个纵轴方向固定Tile个数的布局，后者只是在纵轴方法指定了一个Tile个数的最大值，这两种都是适合子Widget个数比较少的情况，都是List<Widget>来设置
StaggeredGridView.countBuilder和StaggeredGridView.extentBuild，这两个跟上面的含义差不多，区别在于适合子Widget数量比较多的需要动态创建的情况
更高级的还有StaggeredGridView.builder和StaggeredGridView.custom，区别在于创建的方式不同，而且也更加灵活

StaggeredTile.count：固定纵轴和主轴上的数量
StaggeredTile.extent：纵轴上的数量和主轴上的最大范围
StaggeredTile.fit：纵轴上的数量
StaggeredGridView有几列是由crossAxisCount除以StaggeredTile设置上的纵轴的数量的结果

三、部分源码（不可直接运行，根据自己的逻辑进行调试）

import 'dart:math';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

final Uint8List kTransparentImage = new Uint8List.fromList(<int>[
  0x89,
  0x50,
  0x4E,
  0x47,
  0x0D,
  0x0A,
  0x1A,
  0x0A,
  0x00,
  0x00,
  0x00,
  0x0D,
  0x49,
  0x48,
  0x44,
  0x52,
  0x00,
  0x00,
  0x00,
  0x01,
  0x00,
  0x00,
  0x00,
  0x01,
  0x08,
  0x06,
  0x00,
  0x00,
  0x00,
  0x1F,
  0x15,
  0xC4,
  0x89,
  0x00,
  0x00,
  0x00,
  0x0A,
  0x49,
  0x44,
  0x41,
  0x54,
  0x78,
  0x9C,
  0x63,
  0x00,
  0x01,
  0x00,
  0x00,
  0x05,
  0x00,
  0x01,
  0x0D,
  0x0A,
  0x2D,
  0xB4,
  0x00,
  0x00,
  0x00,
  0x00,
  0x49,
  0x45,
  0x4E,
  0x44,
  0xAE,
]);




List<IntSize> _createSizes(int count) {
  Random rnd = new Random();
  return new List.generate(count,
      (i) => new IntSize((rnd.nextInt(500) + 200), rnd.nextInt(800) + 200));
}

class Example08 extends StatefulWidget {
  @override
  Example08State createState() => new Example08State();
}

class Example08State extends State<Example08> {
  static const int _kItemCount = 10;
  final List<IntSize> _sizes = _createSizes(_kItemCount).toList();
  ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('random dynamic tile sizes'),
      ),
      body: new StaggeredGridView.countBuilder(
        controller: _scrollController,
        itemCount: 10,
        primary: false,
        crossAxisCount: 4,
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
        itemBuilder: (context, index) => new _Tile(index, _sizes[index]),
        staggeredTileBuilder: (index) => new StaggeredTile.fit(2),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    print('初始化进入');

    _scrollController.addListener(() {
      print('我监听到了');
    });
  }

}

class IntSize {
  const IntSize(this.width, this.height);

  final int width;
  final int height;
}

class _Tile extends StatelessWidget {
  const _Tile(this.index, this.size);

  final IntSize size;
  final int index;

  @override
  Widget build(BuildContext context) {
    return new Card(
      child: new Column(
        children: <Widget>[
          new Stack(
            children: <Widget>[
              //new Center(child: new CircularProgressIndicator()),
              new Center(
                child: new FadeInImage.memoryNetwork(
                  placeholder: kTransparentImage,
                  image: 'https://picsum.photos/${size.width}/${size.height}/',
                ),
              ),
            ],
          ),
          new Padding(
            padding: const EdgeInsets.all(4.0),
            child: new Column(
              children: <Widget>[
                new Text(
                  'Image number $index',
                  style: const TextStyle(fontWeight: FontWeight.bold),
                ),
                new Text(
                  'Width: ${size.width}',
                  style: const TextStyle(color: Colors.grey),
                ),
                new Text(
                  'Height: ${size.height}',
                  style: const TextStyle(color: Colors.grey),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

持续更新中......

来源：oschina

链接：https://my.oschina.net/songms/blog/4473148

标签

Flutter

StaggeredGridView