前前后后研究了近半个月，身为准大三渣渣，感觉要没时间可以花了，五月初短短续续研究到五月底。= =||。主要是看到别人实现了这样的效果，自己也想尝试一下，之后才发现差距，但迈步一步总比原地踏步好。封面是快速滑动，同时加载图片的帧数，设备是荣耀9X 乞丐版。

预先的知识储备

这边给出两个比较有代表性的文章，里面有对基本知识的讲解，这两篇文章里的涉及的其他文章链接一定要点开慢慢看。

Nayuta的ListView优化

法老的WaterFlow

GSY的滑动原理

进入正题

文章分两部分，这篇从Widget的实现部分讲起。下篇从RenderObject部分讲起。

相关的类

如果自己搭积木，按道理来说应该是三个类。

1. 一个能创建RenderObject的Widget类
2. 一个管理Widget和RenderObject的Element类
3. 一个实现布局和绘制的RenderObject类

知道了ViewPort的概念，我使用了官方的CustomScrollView作为ViewPort,以官方的SliverMultiBoxAdaptorElement作为Widget和RendetObject的管理工具，即Element。所以代码的实现核心就剩下了RenderObject和Widget的实现。

FlowSliver 照葫芦画瓢

别的名字都被取过了,就随便想了个名字。通过研究SliverList的源码发现，自己实现Widget最好从继承SliverMultiBoxAdaptorWidget开始，实现也很简单，重写如下几个方法，提供一个构造函数。

FlowSliver.builder(
      {Key? key,
      required SliverChildDelegate delegate,//产生内容Widget用的，比如图片，卡片
      required this.gridDelegate})          //配置一行有几个元素用的
      : super(key: key, delegate: delegate);



@override
RenderFlowSliver createRenderObject(BuildContext context);

@override
void updateRenderObject(BuildContext context, RenderFlowSliver renderObject);
复制代码

这样，一个瀑布流的Widget就被我们封装完成了。

使用也很简单

CustomScrollView(
      slivers: [
          FlowSliver(
          参数...
          )
        ]
      );
复制代码

看到这，出现了一些没见过的类，比如RenderFlowSliver，也就是下篇文章要讲的部分，也是实现布局的核心。源码地址将在下篇文章给出，有错误请指出。