专栏首页技术人生用flutter_staggered_grid_view实现分页瀑布流效果【flutter20个实例之四】

用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.countStaggeredGridView.extent,前者创建了一个纵轴方向固定Tile个数的布局,后者只是在纵轴方法指定了一个Tile个数的最大值,这两种都是适合子Widget个数比较少的情况,都是List<Widget>来设置
  • StaggeredGridView.countBuilderStaggeredGridView.extentBuild,这两个跟上面的含义差不多,区别在于适合子Widget数量比较多的需要动态创建的情况
  • 更高级的还有StaggeredGridView.builderStaggeredGridView.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),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

持续更新中......

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter自动注释(尾注释)、 Android Studio自动注释(尾注释)

    4.勾选show closing labels in Dart source code,然后点击ok,就可以美滋滋写Flutter了

    sinnoo
  • 谈谈flutter中Checkbox复选框的全选与删除【flutter20个实例之三】

    左侧三张图片是我的实际开发中业务界面,用作展示而已,具体源码效果是右边侧的三张图片。

    sinnoo
  • flutter在android studio 中升级或者降低版本【Mac系统】

    查看当前版本,我的版本是The current Flutter SDK version is 1.7.8+hotfix.4。

    sinnoo
  • php中的依赖注入实例详解

    有兴趣可以参考下《PHP之道》上面对“依赖注入”的 解释。 http://laravel-china.github.io/php-the-right-way...

    砸漏
  • Flutter 构建完整应用手册-处理手势

    我们不仅希望向用户展示信息,还希望我们的用户与我们的应用进行互动! 那么,我们如何回应基本操作,如点击和拖动? 我们将使用GestureDetector部件!

    南郭先生
  • JAVA获取线程执行结果的几种方式

    Future 的优点:可以对任务设置时限,如果超时了,可以取消,然后返回一个默认结果,防止

    prepared
  • 字符流出现乱码问题

    shimeath
  • Socket编程

    Java中的java.net包提供了网络通信的各种实现,如果我们要使两台计算机间通过网络来交换数据,那么中间就需要有连接才可进行,而net包中Socket对象就...

    晚上没宵夜
  • 能动手就别吵吵!

    自从上回跑通了Hello World后,鲍勃对Flutter的信心大增啊。心里琢磨着能不能用Flutter实现公司现在正在做的APP的效果呢!说做就做,马上拿起...

    吴延宝
  • Java 生成二维码实战

    不知道从什么时候开始,我们的生活突然之间就充满了二维码——看网页要扫二维码,加好友要扫二维码,现在连楼下卖草莓的大爷都支持扫码支付了。

    业余草

扫码关注云+社区

领取腾讯云代金券