{"id":19273032,"url":"https://github.com/fluttercandies/waterfall_flow","last_synced_at":"2025-05-15T09:08:06.083Z","repository":{"id":49839654,"uuid":"220490114","full_name":"fluttercandies/waterfall_flow","owner":"fluttercandies","description":"A Flutter grid view which supports waterfall flow layout.","archived":false,"fork":false,"pushed_at":"2025-01-24T09:11:20.000Z","size":5028,"stargazers_count":424,"open_issues_count":6,"forks_count":44,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-14T15:56:52.249Z","etag":null,"topics":["flutter","waterfall-flow"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fluttercandies.png","metadata":{"files":{"readme":"README-ZH.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"http://zmtzawqlp.gitee.io/my_images/images/qrcode.png"}},"created_at":"2019-11-08T15:03:04.000Z","updated_at":"2025-04-10T06:42:24.000Z","dependencies_parsed_at":"2023-11-21T07:53:29.225Z","dependency_job_id":"e840ba03-2a6a-4fc9-96a8-e3188c894089","html_url":"https://github.com/fluttercandies/waterfall_flow","commit_stats":{"total_commits":53,"total_committers":2,"mean_commits":26.5,"dds":"0.018867924528301883","last_synced_commit":"abc3f88f3096e7089c58df05bfbd75e6378296e5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fwaterfall_flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fwaterfall_flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fwaterfall_flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fwaterfall_flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fluttercandies","download_url":"https://codeload.github.com/fluttercandies/waterfall_flow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310520,"owners_count":22049470,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","waterfall-flow"],"created_at":"2024-11-09T20:40:22.519Z","updated_at":"2025-05-15T09:08:01.075Z","avatar_url":"https://github.com/fluttercandies.png","language":"Dart","funding_links":["http://zmtzawqlp.gitee.io/my_images/images/qrcode.png"],"categories":[],"sub_categories":[],"readme":"# waterfall_flow\n\n\n[![pub package](https://img.shields.io/pub/v/waterfall_flow.svg)](https://pub.dartlang.org/packages/waterfall_flow) [![GitHub stars](https://img.shields.io/github/stars/fluttercandies/waterfall_flow)](https://github.com/fluttercandies/waterfall_flow/stargazers) [![GitHub forks](https://img.shields.io/github/forks/fluttercandies/waterfall_flow)](https://github.com/fluttercandies/waterfall_flow/network)  [![GitHub license](https://img.shields.io/github/license/fluttercandies/waterfall_flow)](https://github.com/fluttercandies/waterfall_flow/blob/master/LICENSE)  [![GitHub issues](https://img.shields.io/github/issues/fluttercandies/waterfall_flow)](https://github.com/fluttercandies/waterfall_flow/issues) \u003ca target=\"_blank\" href=\"https://jq.qq.com/?_wv=1027\u0026k=5bcc0gy\"\u003e\u003cimg border=\"0\" src=\"https://pub.idqqimg.com/wpa/images/group.png\" alt=\"flutter-candies\" title=\"flutter-candies\"\u003e\u003c/a\u003e\n\n能够快速构建瀑布流布局的列表.\n\n[Web demo for WaterfallFlow](https://fluttercandies.github.io/waterfall_flow/)\n\nLanguage: [English](README.md) | 中文简体\n\n- [waterfall_flow](#waterfall_flow)\n  - [使用](#使用)\n  - [简单使用](#简单使用)\n  - [列表元素回收](#列表元素回收)\n  - [ViewportBuilder](#viewportbuilder)\n  - [LastChildLayoutTypeBuilder](#lastchildlayouttypebuilder)\n  - [CloseToTrailing](#closetotrailing)\n\n## 使用\n\n* 在pubspec.yaml中增加库引用\n\n```yaml\n\ndependencies:\n  waterfall_flow: any\n\n```\n* 导入库\n\n```dart\n\n  import 'package:waterfall_flow/waterfall_flow.dart';\n\n```\n\n\n## 简单使用\n\n| ![img](https://raw.githubusercontent.com/fluttercandies/flutter_candies/master/gif/waterfall_flow/random_sized.gif) | ![img](https://raw.githubusercontent.com/fluttercandies/flutter_candies/master/gif/waterfall_flow/custom_scrollView.gif) |\n| --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |\n| ![img](https://raw.githubusercontent.com/fluttercandies/flutter_candies/master/gif/waterfall_flow/known_sized.gif)  | ![img](https://raw.githubusercontent.com/fluttercandies/flutter_candies/master/gif/waterfall_flow/variable_sized.gif)    |\n\n你可以通过设置SliverWaterfallFlowDelegate参数来定义瀑布流\n\n* SliverWaterfallFlowDelegateWithFixedCrossAxisCount\n\n| 参数      | 描述          | 默认 |\n| -------------- | -------------------- | ------- |\n| crossAxisCount | 横轴的等长度元素数量 | 必填    |\n\n* SliverWaterfallFlowDelegateWithMaxCrossAxisExtent\n\n| 参数          | 描述                                    | 默认  |\n| ------------------ | ---------------------------------------------- | -------- |\n| maxCrossAxisExtent | 横轴元素最大的大小. | required |\n\n* SliverWaterfallFlowDelegate\n\n| 参数          | 描述                                    | 默认  |\n| ------------------ | ---------------------------------------------- | -------- |\n| mainAxisSpacing            | 主轴元素之间的距离                     | 0.0|\n| crossAxisSpacing           | 横轴元素之间的距离                     | 0.0|\n| collectGarbage             | 元素回收时候的回调                     | -  |\n| lastChildLayoutTypeBuilder | 最后一个元素的布局样式(详情请查看后面) | -   |\n| viewportBuilder            | 可视区域中元素indexes变化时的回调      | -   |\n| closeToTrailing            | 可否让布局紧贴trailing(详情请查看后面) | false|\n\n```dart\n            WaterfallFlow.builder(\n              //cacheExtent: 0.0,\n              padding: EdgeInsets.all(5.0),\n              gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(\n                  crossAxisCount: 2,\n                  crossAxisSpacing: 5.0,\n                  mainAxisSpacing: 5.0,\n                  /// follow max child trailing layout offset and layout with full cross axis extend\n                  /// last child as loadmore item/no more item in [GridView] and [WaterfallFlow]\n                  /// with full cross axis extend\n                  //  LastChildLayoutType.fullCrossAxisExtend,\n\n                  /// as foot at trailing and layout with full cross axis extend\n                  /// show no more item at trailing when children are not full of viewport\n                  /// if children is full of viewport, it's the same as fullCrossAxisExtend\n                  //  LastChildLayoutType.foot,\n                  lastChildLayoutTypeBuilder: (index) =\u003e index == _list.length\n                      ? LastChildLayoutType.foot\n                      : LastChildLayoutType.none,\n                  ),\n\n```\n\n## 列表元素回收\n\n追踪列表元素回收，你可以在这个时刻回收一些内存，比如图片的内存缓存。\n\n[更多详情](https://github.com/fluttercandies/extended_image/blob/e1577bc4d0b57c725110a9d886703b98a72772b5/example/lib/pages/photo_view_demo.dart#L91)\n\n```dart\n        WaterfallFlow.builder(\n            gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(\n                     collectGarbage: (List\u003cint\u003e garbages) {\n                  ///collectGarbage\n                  garbages.forEach((index) {\n                    final provider = ExtendedNetworkImageProvider(\n                      _list[index].imageUrl,\n                    );\n                    provider.evict();\n                  });\n                },\n              ),\n```\n\n## ViewportBuilder\n\n追踪进入Viewport的列表元素的index（即你看到的可视区域，并不包括缓存距离）\n\n```dart\n        WaterfallFlow.builder(\n            gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(\n                viewportBuilder: (int firstIndex, int lastIndex) {\n                print(\"viewport : [$firstIndex,$lastIndex]\");\n                }),\n```\n\n## LastChildLayoutTypeBuilder\n\n为最后一个元素创建特殊布局，这主要是用在将最后一个元素作为loadmore/no more的时候。\n\n```dart\n        enum LastChildLayoutType {\n        /// 普通的\n        none,\n\n        /// 将最后一个元素绘制在最大主轴Item之后，并且使用横轴大小最为layout size\n        /// 主要使用在[ExtendedGridView] and [WaterfallFlow]中，最后一个元素作为loadmore/no more元素的时候。\n        fullCrossAxisExtend,\n\n        /// 将最后一个child绘制在trailing of viewport，并且使用横轴大小最为layout size\n        /// 这种常用于最后一个元素作为loadmore/no more元素，并且列表元素没有充满整个viewport的时候\n        /// 如果列表元素充满viewport，那么效果跟fullCrossAxisExtend一样\n        foot,\n        }\n\n      WaterfallFlow.builder(\n        gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(\n            lastChildLayoutTypeBuilder: (index) =\u003e index == length\n                ? LastChildLayoutType.foot\n                : LastChildLayoutType.none,\n            ),\n```\n\n## CloseToTrailing\n\n当reverse设置为true的时候，布局会变成如下。常用于聊天列表，新的会话会被插入0的位置，但是当会话没有充满viewport的时候，下面的布局不是我们想要的。\n\n```\n     trailing\n-----------------\n|               |\n|               |\n|     item2     |\n|     item1     |\n|     item0     |\n-----------------\n     leading\n```\n\n为了解决这个问题，你可以设置 closeToTrailing 为true, 布局将变成如下\n该属性同时支持[ExtendedGridView],[ExtendedList],[WaterfallFlow]。\n当然如果reverse如果不为ture，你设置这个属性依然会生效，没满viewport的时候布局会紧靠trailing\n\n```\n     trailing\n-----------------\n|     item2     |\n|     item1     |\n|     item0     |\n|               |\n|               |\n-----------------\n     leading\n```\n\n```dart\n      WaterfallFlow.builder(\n        reverse: true,\n        gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(closeToTrailing: true),\n```\n\n## ☕️Buy me a coffee\n\n![img](http://zmtzawqlp.gitee.io/my_images/images/qrcode.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercandies%2Fwaterfall_flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffluttercandies%2Fwaterfall_flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercandies%2Fwaterfall_flow/lists"}