前前後後研究了近半個月，身為準大三渣渣，感覺要沒時間可以花了，五月初短短續續研究到五月底。= =||。主要是看到別人實現了這樣的效果，自己也想嘗試一下，之後才發現差距，但邁步一步總比原地踏步好。封面是快速滑動，同時載入圖片的幀數，裝置是榮耀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，也就是下篇文章要講的部分，也是實現佈局的核心。原始碼地址將在下篇文章給出，有錯誤請指出。