Flutter熊孩子拆组件系列之拆ListView（五）——ViewPort

引言

我们上一次，说到了ListView中的另一个重要的部件——ViewPort，上一次，我们的讲解由于时间关系，没有完全说完，这一次，就来说一下剩余部分。

ViewPort与Scrollable

上一次，我们从官方文档中，简单的了解了一下ViewPort，从官方文档中，我们知道了，ViewPort是滚动视图内部的子组件，它可以接收来自父组件的滚动事件并对其做出响应。

这句话里面，有多个关键词，其中一个关键词，就是滚动视图 。

那么什么是滚动视图呢？从名称，我们可以知道，滚动视图，就是可以让用户进行滚动操作的视图。说到这里，大家应该马上就能想起来，在Flutter中，主要有两个滚动视图，分别是SingleChildScrollView 和Scrollable 。

其中，SingleChildScrollView 是专门用来处理一个子组件滚动的，而Scrollable ，是可以用来处理多个子组件滚动的，也就是我们所说的ListView。

因此，ViewPort ，其实就是Scrollable 的一个子组件，之所以它的名字叫做ViewPort ，是因为ViewPort 负责的是可视区域 的绘制，而Scrollable ，则负责处理用户的滚动操作，以及根据用户的滚动操作，来更新ViewPort 的绘制区域。

ViewPort的作用

• 1. 确定可视区域

ViewPort的作用，是确定可视区域 ，可视区域 ，是指用户在屏幕上可以看到的区域，ViewPort会根据Scrollable 传过来的滚动位置，来确定可视区域 。

• 2. 绘制可视区域

ViewPort确定了可视区域 之后，就会对可视区域 进行绘制，绘制的过程，就是将可视区域 内的所有子组件，都绘制出来，ViewPort 会根据子组件 的大小和位置，来确定子组件 在可视区域 中的位置，然后将子组件 绘制到可视区域 中。

• 3. 裁剪可视区域

ViewPort在绘制可视区域 之后，还会对可视区域 进行裁剪，裁剪的意思，就是将可视区域 之外的部分，都裁剪掉，只保留可视区域 内的部分，这样，就可以保证用户只能看到可视区域 内的内容，而看不到可视区域 之外的内容。

结语

本次，我们对ListView中的ViewPort组件进行了讲解，我们了解到了ViewPort的作用，以及ViewPort与Scrollable之间的关系，我们也了解到了ViewPort是如何确定可视区域 的，以及是如何绘制可视区域 的，最后，我们也了解到了ViewPort是如何裁剪可视区域 的。