Flutter 滚动布局：sliver模型

一、滚动布局

Flutter中可滚动布局基本都来自Sliver模型，原理和安卓传统UI的ListView、RecyclerView类似，滚动布局里面的每个子组件的样式往往是相同的，由于组件占用内存较大，所以在内存上我们可以缓存有限个组件，滚动布局时仅仅刷新组件的数据，来达到滚动布局存放无限个子组件的目标。另一方面，内容被渲染到了lazy widget里，也就是SliverList and SliverGrid (以及它们的变种 SliverFixedExtentList 和 SliverAnimatedGrid）。这些组件确保只有列表中可见部分会被布局和渲染。ListView 和 GridView只是CustomScrollView 和 SliverList 或 SliverGrid组合在一起，方便我们使用的一个封装组件而已。它们允许我们直接使用box widget。而CustomScrollView的slivers属性明确要求我们使用sliver widget。但是sliver widget也只是box widget的包裹，后者才是真正用于渲染的。按照列表内容的差异，我们可以将scrolling widget分为以下三类：

 sliver widget是可滚动列表中的一部分，它是面向viewport进行布局的。

二、ViewPort

• ViewPort 是一个显示窗口，它内部可包含多个 Sliver；
• ViewPort 的宽高是确定的，它内部 Slivers 的宽高之和是可以大于自身的宽高的；
• ViewPort 为了提高性能采用懒加载机制，它只会绘制可视区域内容 Widget。

ViewPort 有一些重要属性：

class Viewport extends MultiChildRenderObjectWidget {
  /// 主轴方向
  final AxisDirection axisDirection;
  /// 纵轴方向
  final AxisDirection crossAxisDirection;
  /// center 决定 viewport 的 zero 基准线，也就是 viewport 从哪个地方开始绘制，默认是第一个 sliver
  /// center 必须是 viewport slivers 中的一员的 key
  final Key center;
  
/// 锚点，取值[0,1]，和 zero 的相对位置，比如 0.5 代表 zero 被放到了 Viewport.height / 2 处
  final double anchor;
  /// 滚动的累计值，确切的说是 viewport 从什么地方开始显示
  final ViewportOffset offset;
  /// 缓存区域，也就是相对有头尾需要预加载的高度
  final double cacheExtent;
  //