Flutter 之 可滚动组件 -- 理论知识点（十四）

Flutter 中有两种布局模型：

基于 RenderBox 的盒模型布局。

基于 Sliver ( RenderSliver ) 按需加载列表布局。

通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大；如果要一次性将子组件全部构建出将会非常昂贵！为此，Flutter中提出一个Sliver（中文为“薄片”的意思）概念，Sliver 可以包含一个或多个子组件。Sliver 的主要作用是配合：加载子组件并确定每一个子组件的布局和绘制信息，如果 Sliver 可以包含多个子组件时，通常会实现按需加载模型。

只有当 Sliver 出现在视口中时才会去构建它，这种模型也称为“基于Sliver的列表按需加载模型”。可滚动组件中有很多都支持基于Sliver的按需加载模型，如 ListView 、 GridView ，但是也有不支持该模型的，如 SingleChildScrollView 。

Flutter 中的可滚动主要由三个角色组成： Scrollable 、 Viewport 和 Sliver ：

具体布局过程：

比如有一个 ListView，大小撑满屏幕，假设它有 100 个列表项（都是RenderBox）且每个列表项高度相同，结构如图6-1所示：

图中白色区域为设备屏幕，也是 Scrollable 、 Viewport 和 Sliver 所占用的空间，三者所占用的空间重合，父子关系为：Sliver 父组件为 Viewport，Viewport的 父组件为 Scrollable 。注意ListView 中只有一个 Sliver，在 Sliver 中实现了子组件的按需加载。

其中顶部和底部灰色的区域为 cacheExtent，它表示预渲染的高度，需要注意这是在可视区域之外，如果 RenderBox 进入这个区域内，即使它还未显示在屏幕上，也是要先进行构建的，预渲染是为了后面进入 Viewport 的时候更丝滑。cacheExtent 的默认值是 250，在构建可滚动列表时我们可以指定这个值，这个值最终会传给 Viewport。

用于处理滑动手势，确定滑动偏移，滑动偏移变化时构建 Viewport，我们看一下其关键的属性：

在可滚动组件的坐标描述中，通常将滚动方向称为主轴，非滚动方向称为纵轴。由于可滚动组件的默认方向一般都是沿垂直方向，所以默认情况下主轴就是指垂直方向，水平方向同理。

Viewport 比较简单，用于渲染当前视口中需要显示 Sliver。

需要注意的是：

Sliver 主要作用是对子组件进行构建和布局，比如 ListView 的 Sliver 需要实现子组件（列表项）按需加载功能，只有当列表项进入预渲染区域时才会去对它进行构建和布局、渲染。

Sliver 对应的渲染对象类型是 RenderSliver，RenderSliver 和 RenderBox 的相同点是都继承自 RenderObject 类，不同点是在布局的时候约束信息不同。RenderBox 在布局时父组件传递给它的约束信息对应的是 BoxConstraints ，只包含最大宽高的约束；而 RenderSliver 在布局时父组件（列表）传递给它的约束是对应的是 SliverConstraints 。关于 Sliver 的布局协议，我们将在本章最后一节中介绍。

几乎所有的可滚动组件在构造时都能指定 scrollDirection （滑动的主轴）、 reverse （滑动方向是否反向）、 controller 、 physics 、 cacheExtent ，这些属性最终会透传给对应的 Scrollable 和 Viewport，这些属性我们可以认为是可滚动组件的通用属性，后续再介绍具体的可滚动组件时将不再赘述。

可滚动组件都有一个 controller 属性，通过该属性我们可以指定一个 ScrollController 来控制可滚动组件的滚动，比如可以通过ScrollController来同步多个组件的滑动联动。由于 ScrollController 是需要结合可滚动组件一起工作，所以本章中，我们会在介绍完 ListView 后详细介绍 ScrollController。

Scrollbar是一个Material风格的滚动指示器（滚动条），如果要给可滚动组件添加滚动条，只需将Scrollbar作为可滚动组件的任意一个父级组件即可，如：

Scrollbar 和 CupertinoScrollbar 都是通过监听滚动通知来确定滚动条位置的。关于的滚动通知的详细内容我们将在本章最后一节中专门介绍。

CupertinoScrollbar是 iOS 风格的滚动条，如果你使用的是Scrollbar，那么在iOS平台它会自动切换为CupertinoScrollbar

>

Image（组件）是显示图像的组件，一个显示的widget，支持图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBM

构造方法

Image: 从ImageProvider获取数据

Imagenetwork: 加载网络。

Imageasset: 加载本地文件。

new Imagefile: 加载本地文件(File文件）。

new Imagememory: 加载Uint8List资源（byte数组）。

常用属性

方式一：CircleAvatar

CircleAvatar可以实现圆形头像，也可以添加一个子Widget：

在上加一个文本

方式二：ClipOval

ClipOval也可以实现圆角头像，而且通常是在只有头像时使用

方式三：Container+BoxDecoration

方法一：ClipRRect

方法二：Container + BoxDecoration

补充知识点

Icon字体图标和图标的区别 ？

Colorsred 是一个MaterialColor对象，为什么可以使用[]（Colorsred[10]）来设置颜色

MaterialColor 继承于ColorSwatch，ColorSwatch中有[] 运算符重载;

细心的开发者会发现flutter构建的App体积比native的大一些，是什么原因造成App体积大呢？

其实flutter 在release时App体积和native的大小差不多，而debug时体积通常会大。debug版本体积较大是为了Hot reload和快速编译。如果有flutter开发经验的朋友都体验过，如果您修改一下App的背景颜色，只需save一下就可以立刻看到修改后效果。我称之为“像艺术家一样在创造App”，因此为了实现这些目标，提高开发的效率，debug将占用全部资源。而当我们构建release版时，flutter又会采用AOT策略，提高App运行效率，release版只打包必需的资源，因而体积又会减少。

另外，flutter团队也一直在寻找减小程序大小的方法。

说明：Column中空Text会占一定空间，会影响布局效果，这空间大小跟文字设置的大小有关；建议用Container，SizedBox来替换，一般在动态控制一些view的加载会用到，不需要加载直接返回Container或SizeBox；

说明：早期版本sdk Row和Column 默认的对齐参数MainAxisAlignment和CrossAxisAlignment都为start，现在新版的sdk变化了，CrossAxisAlignment变为center，所以对于频繁使用的 Row和Column，建议写时添加对齐方式，不依赖sdk默认，避免升级sdk大面积修改,也可以直接封装Row和Column；

说明：早期版本sdk字体加粗FontWeight bold为w500，新版本sdk为w700，所以建议封装FontWeight ，有利于界面样式统一，封装如下：

说明：

说明：

说明：

int c;

print(c=5);//如果c为null的话，把5赋值给c

b = value;

如果b为空，则将value赋值给b；否则，b保持不变

expr1 expr2

如果expr1为非空，则返回其值；expr1为空，则计算并返回expr2的值

易错：

正确：

传送门

以上就是关于Flutter 之 可滚动组件 -- 理论知识点（十四）全部的内容，包括:Flutter 之 可滚动组件 -- 理论知识点（十四）、Flutter基础篇——常用Widget、Flutter之Image Widget（六）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！