瀑布流

一个 Flutter 网格视图，可以快速轻松地构建瀑布流布局。

使用

  • 将库添加到您的pubspec.yaml

dependencies:
  waterfall_flow: any
  • 在dart文件中导入库

  import 'package:waterfall_flow/waterfall_flow.dart';

易于使用

random_sized custom_scrollView
known_sized variable_sized

您可以在SliverWaterfallFlowDelegate中定义瀑布流布局。

参数 描述 默认值
crossAxisCount 交叉轴上的子项数量。 必需
mainAxisSpacing 主轴上每个子项之间的逻辑像素数量。 0.0
crossAxisSpacing 交叉轴上每个子项之间的逻辑像素数量。 0.0
collectGarbage 调用以收集垃圾，返回要收集的索引 -
lastChildLayoutTypeBuilder 用于获取最后一个子项布局类型的构建器，注意：它应该只用于最后一个子项 -
viewportBuilder 用于获取视口中索引的构建器 -
closeToTrailing 是否使布局靠近末尾 假 
            WaterfallFlow.builder(
              //cacheExtent: 0.0,
              padding: EdgeInsets.all(5.0),
              gridDelegate: SliverWaterfallFlowDelegate(
                  crossAxisCount: 2,
                  crossAxisSpacing: 5.0,
                  mainAxisSpacing: 5.0,
                  /// follow max child trailing layout offset and layout with full cross axis extend
                  /// last child as loadmore item/no more item in [GridView] and [WaterfallFlow]
                  /// with full cross axis extend
                  //  LastChildLayoutType.fullCrossAxisExtend,

                  /// as foot at trailing and layout with full cross axis extend
                  /// show no more item at trailing when children are not full of viewport
                  /// if children is full of viewport, it's the same as fullCrossAxisExtend
                  //  LastChildLayoutType.foot,
                  lastChildLayoutTypeBuilder: (index) => index == _list.length
                      ? LastChildLayoutType.foot
                      : LastChildLayoutType.none,
                  ),

CollectGarbage

跟踪收集的索引，您可以在此时收集垃圾（例如图像缓存）

更多详情

        WaterfallFlow.builder(
            gridDelegate: SliverWaterfallFlowDelegate(
                collectGarbage: (List<int> garbages) {
                  ///collectGarbage
                  garbages.forEach((index) {
                    final provider = ExtendedNetworkImageProvider(
                      _list[index].imageUrl,
                    );
                    provider.evict();
                  });
                },
              ),

ViewportBuilder

跟踪进入视口的索引，不包括缓存范围。

        WaterfallFlow.builder(
            gridDelegate: SliverWaterfallFlowDelegate(
                viewportBuilder: (int firstIndex, int lastIndex) {
                print("viewport : [$firstIndex,$lastIndex]");
                }),

LastChildLayoutTypeBuilder

构建最后一个子项作为特殊子项，以防它是加载更多/没有更多项。

        enum LastChildLayoutType {
        /// as default child
        none,

        /// follow max child trailing layout offset and layout with full cross axis extend
        /// last child as loadmore item/no more item in [ExtendedGridView] and [WaterfallFlow]
        /// with full cross axis extend
        fullCrossAxisExtend,

        /// as foot at trailing and layout with full cross axis extend
        /// show no more item at trailing when children are not full of viewport
        /// if children is full of viewport, it's the same as fullCrossAxisExtend
        foot,
        }

      WaterfallFlow.builder(
        gridDelegate: SliverWaterfallFlowDelegate(
            lastChildLayoutTypeBuilder: (index) => index == length
                ? LastChildLayoutType.foot
                : LastChildLayoutType.none,
            ),

CloseToTrailing

当列表的reverse属性为true时，布局如下。
它就像聊天列表，新的会话将插入到零索引。
但是当项目不满视口时，这是不正确的。

     trailing
-----------------
|               |
|               |
|     item2     |
|     item1     |
|     item0     |
-----------------
     leading

为了解决这个问题，您可以将closeToTrailing设置为true，布局如下。
支持[ExtendedGridView],[ExtendedList],[WaterfallFlow]。
当reverse为false时，它也有效，布局将靠近末尾。

     trailing
-----------------
|     item2     |
|     item1     |
|     item0     |
|               |
|               |
-----------------
     leading

      WaterfallFlow.builder(
        reverse: true,
        gridDelegate: SliverWaterfallFlowDelegate(closeToTrailing: true),

GitHub

https://github.com/fluttercandies/waterfall_flow