怎么用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: <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),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

“怎么用flutter_staggered_grid_view實現分頁瀑布流效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！