image
前言
今天看了Flutter Interact, 全程有个小姐姐翻译（同声翻译，好强力），于是我就边听边完成了这篇文章。
image
接着上一章Flutter Sliver一生之敌 (ExtendedList)，这章我们将编写一个瀑布流布局，来检验一下我们上一章对Sliver列表源码分析是否正确。
欢迎加入Flutter Candies <a target="_blank" href="https://jq.qq.com/?_wv=1027&k=5bcc0gy"><img border="0" src="https://user-gold-cdn.xitu.io/2019/10/27/16e0ca3f1a736f0e?w=90&h=22&f=png&s=1827" alt="flutter-candies" title="flutter-candies"></a> QQ群: 181398081。
image
知道你们只关心小姐姐，我还是先放效果图吧。
image
|
image
|
|---|---|
image
|
image
|
原理
之前做UWP的时候，我自己也做过瀑布流布局。似乎是一种执念，入坑Flutter之后也想实现一下瀑布流布局。下面简单讲一下什么是瀑布流以及原理。
瀑布流布局的特点是等宽不等高。
为了让最后一行的差距最小，从第二行开始，需要将一项放在第一行最矮的一项下面，以此类推，如下图。4在0下面，5在3下面，6在1下面，7在2下面，8在4下面...
image
核心代码
知道了原理，下面我们来一起把原理实现为代码。
由于我们需要知道离viewport顶部最近的Items，以及viewport底部最近的Items。这样才能知道向后滚动新的item放哪个item下面，或者说向前滚动的时候知道新的item放在哪个item的上面
我设计了CrossAxisItems 来存放leadingItems 和 trailingItems。向后添加新的item的时候代码如下
1.补充leadingItems直到等于crossAxisCount
2.找到当前最矮的一项，将设置它的layoutoffset
3.保存这一列的indexes
void insert({
@required RenderBox child,
@required ChildTrailingLayoutOffset childTrailingLayoutOffset,
@required PaintExtentOf paintExtentOf,
}) {
final WaterfallFlowParentData data = child.parentData;
final LastChildLayoutType lastChildLayoutType =
delegate.getLastChildLayoutType(data.index);
///处理最后一个特殊化布局
switch (lastChildLayoutType) {
case LastChildLayoutType.fullCrossAxisExtend:
case LastChildLayoutType.foot:
//横轴绘制offset
data.crossAxisOffset = 0.0;
//横轴index
data.crossAxisIndex = 0;
//该child的大小
final size = paintExtentOf(child);
if (lastChildLayoutType == LastChildLayoutType.fullCrossAxisExtend ||
maxChildTrailingLayoutOffset + size >
constraints.remainingPaintExtent) {
data.layoutOffset = maxChildTrailingLayoutOffset;
} else {
//如果全部children没有绘制viewport的大
data.layoutOffset = constraints.remainingPaintExtent - size;
}
data.trailingLayoutOffset = childTrailingLayoutOffset(child);
return;
case LastChildLayoutType.none:
break;
}
if (!leadingItems.contains(data)) {
//补充满leadingItems
if (leadingItems.length != crossAxisCount) {
data.crossAxisIndex ??= leadingItems.length;
data.crossAxisOffset =
delegate.getCrossAxisOffset(constraints, data.crossAxisIndex);
if (data.index < crossAxisCount) {
data.layoutOffset = 0.0;
data.indexs.clear();
}
trailingItems.add(data);
leadingItems.add(data);
} else {
if (data.crossAxisIndex != null) {
var item = trailingItems.firstWhere(
(x) =>
x.index > data.index &&
x.crossAxisIndex == data.crossAxisIndex,
orElse: () => null);
///out of viewport
if (item != null) {
data.trailingLayoutOffset = childTrailingLayoutOffset(child);
return;
}
}
//找到最矮的那个
var min = trailingItems.reduce((curr, next) =>
((curr.trailingLayoutOffset < next.trailingLayoutOffset) ||
(curr.trailingLayoutOffset == next.trailingLayoutOffset &&
curr.crossAxisIndex < next.crossAxisIndex)
? curr
: next));
data.layoutOffset = min.trailingLayoutOffset + delegate.mainAxisSpacing;
data.crossAxisIndex = min.crossAxisIndex;
data.crossAxisOffset =
delegate.getCrossAxisOffset(constraints, data.crossAxisIndex);
trailingItems.forEach((f) => f.indexs.remove(min.index));
min.indexs.add(min.index);
data.indexs = min.indexs;
trailingItems.remove(min);
trailingItems.add(data);
}
}
data.trailingLayoutOffset = childTrailingLayoutOffset(child);
}
- 向前添加新的item的时候代码如下
1.通过indexs找到新item属于哪一列
2.添加到旧的item的上面
void insertLeading({
@required RenderBox child,
@required PaintExtentOf paintExtentOf,
}) {
final WaterfallFlowParentData data = child.parentData;
if (!leadingItems.contains(data)) {
var pre = leadingItems.firstWhere((x) => x.indexs.contains(data.index),
orElse: () => null);
if (pre == null || pre.index < data.index) return;
data.trailingLayoutOffset = pre.layoutOffset - delegate.mainAxisSpacing;
data.crossAxisIndex = pre.crossAxisIndex;
data.crossAxisOffset =
delegate.getCrossAxisOffset(constraints, data.crossAxisIndex);
leadingItems.remove(pre);
leadingItems.add(data);
trailingItems.remove(pre);
trailingItems.add(data);
data.indexs = pre.indexs;
data.layoutOffset = data.trailingLayoutOffset - paintExtentOf(child);
}
}
- 计算离viewport顶部最近的，应该确保leadingItems都在viewport里面
跟之前Listview的源码分析差不多，只是这里我们要保证最大的LeadingLayoutOffset都小于scrollOffset，这样leadingItems就都在viewport里面了
if (crossAxisItems.maxLeadingLayoutOffset > scrollOffset) {
RenderBox child = firstChild;
//move to max index of leading
final int maxLeadingIndex = crossAxisItems.maxLeadingIndex;
while (child != null && maxLeadingIndex > indexOf(child)) {
child = childAfter(child);
}
//fill leadings from max index of leading to min index of leading
while (child != null && crossAxisItems.minLeadingIndex < indexOf(child)) {
crossAxisItems.insertLeading(
child: child, paintExtentOf: paintExtentOf);
child = childBefore(child);
}
//collectGarbage(maxLeadingIndex - index, 0);
while (crossAxisItems.maxLeadingLayoutOffset > scrollOffset) {
// We have to add children before the earliestUsefulChild.
earliestUsefulChild =
insertAndLayoutLeadingChild(childConstraints, parentUsesSize: true);
if (earliestUsefulChild == null) {
if (scrollOffset == 0.0) {
// insertAndLayoutLeadingChild only lays out the children before
// firstChild. In this case, nothing has been laid out. We have
// to lay out firstChild manually.
firstChild.layout(childConstraints, parentUsesSize: true);
earliestUsefulChild = firstChild;
leadingChildWithLayout = earliestUsefulChild;
trailingChildWithLayout ??= earliestUsefulChild;
crossAxisItems.reset();
crossAxisItems.insert(
child: earliestUsefulChild,
childTrailingLayoutOffset: childTrailingLayoutOffset,
paintExtentOf: paintExtentOf,
);
break;
} else {
// We ran out of children before reaching the scroll offset.
// We must inform our parent that this sliver cannot fulfill
// its contract and that we need a scroll offset correction.
geometry = SliverGeometry(
scrollOffsetCorrection: -scrollOffset,
);
return;
}
}
crossAxisItems.insertLeading(
child: earliestUsefulChild, paintExtentOf: paintExtentOf);
final WaterfallFlowParentData data = earliestUsefulChild.parentData;
// firstChildScrollOffset may contain double precision error
if (data.layoutOffset < -precisionErrorTolerance) {
// The first child doesn't fit within the viewport (underflow) and
// there may be additional children above it. Find the real first child
// and then correct the scroll position so that there's room for all and
// so that the trailing edge of the original firstChild appears where it
// was before the scroll offset correction.
// do this work incrementally, instead of all at once,
// i.e. find a way to avoid visiting ALL of the children whose offset
// is < 0 before returning for the scroll correction.
double correction = 0.0;
while (earliestUsefulChild != null) {
assert(firstChild == earliestUsefulChild);
correction += paintExtentOf(firstChild);
earliestUsefulChild = insertAndLayoutLeadingChild(childConstraints,
parentUsesSize: true);
crossAxisItems.insertLeading(
child: earliestUsefulChild, paintExtentOf: paintExtentOf);
}
geometry = SliverGeometry(
scrollOffsetCorrection: correction - data.layoutOffset,
);
return;
}
assert(earliestUsefulChild == firstChild);
leadingChildWithLayout = earliestUsefulChild;
trailingChildWithLayout ??= earliestUsefulChild;
}
}
- 计算达到viewport底部，应该确保trailingItems中最短的要超过viewport的底部
// Now find the first child that ends after our end.
if (child != null) {
while (crossAxisItems.minChildTrailingLayoutOffset <
targetEndScrollOffset ||
//make sure leading children are painted.
crossAxisItems.leadingItems.length < _gridDelegate.crossAxisCount
|| crossAxisItems.leadingItems.length > childCount
) {
if (!advance()) {
reachedEnd = true;
break;
}
}
}
waterfall_flow使用
- 在pubspec.yaml中增加库引用
dependencies:
waterfall_flow: any
- 导入库
import 'package:waterfall_flow/waterfall_flow.dart';
如何定义
你可以通过设置SliverWaterfallFlowDelegate参数来定义瀑布流
| 参数 | 描述 | 默认 |
|---|---|---|
| crossAxisCount | 横轴的等长度元素数量 | 必填 |
| mainAxisSpacing | 主轴元素之间的距离 | 0.0 |
| crossAxisSpacing | 横轴元素之间的距离 | 0.0 |
| collectGarbage | 元素回收时候的回调 | - |
| lastChildLayoutTypeBuilder | 最后一个元素的布局样式(详情请查看后面) | - |
| viewportBuilder | 可视区域中元素indexes变化时的回调 | - |
| closeToTrailing | 可否让布局紧贴trailing(详情请查看后面) | false |
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,
),
结语
没有再对源码有更多的分析，上一篇如果你看过了，应该会更加明白其中的道理。这一篇是对瀑布流原理在Flutter上面实现的展示，没有做不到效果，只有想不到的效果，这就是Flutter给我带来的体验。
最后放上Flutter Interact 的一些内容，我是边听边写的，如果有误，请提醒我更改下。
- Flutter 1.12版本
- Material design 以及字体库
- 带来了Desktop/Web(你现在可以尝试他们了,不再是玩具)
- 叼炸天的各种开发工具(同时调试7种设备，UI化界面)
- gskinner 酷炫交互+开源
- supernova 知名的 design-to-code (设计转代码) 工具
- Adobe XD 程序猿们颤抖吧，UI将代替你们了。
- flutter_vignettes商业互吹
- rive.app展示了一个炒鸡可爱的游戏，而且是用Flutter web
欢迎加入Flutter Candies，一起生产可爱的Flutter小糖果( <a target="_blank" href="https://jq.qq.com/?_wv=1027&k=5bcc0gy"><img border="0" src="https://user-gold-cdn.xitu.io/2019/10/27/16e0ca3f1a736f0e?w=90&h=22&f=png&s=1827" alt="flutter-candies" title="flutter-candies"></a>QQ群:181398081)
最最后放上Flutter Candies全家桶，真香。
image
