怎么用flutter_staggered_grid_view实现分页瀑布流效果

本篇内容介绍了"怎么用flutter_staggered_grid_view实现分页瀑布流效果"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

讲解

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: [    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来设置

• 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([  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 _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 {  static const int _kItemCount = 10;  final List _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: [          new Stack(            children: [              //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: [                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),                ),              ],            ),          )        ],      ),    );  }}

"怎么用flutter_staggered_grid_view实现分页瀑布流效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！