简介
垂直滚动视图是一种在消息应用中常用的模式，用于展示用户之间的对话。滚动效果的目的是让用户能够轻松查看对话中的最新更新。从底部开始滚动可让用户先看到最近的更新，再向上滚动查看之前的所有消息。
ProtoPie 通过使用滚动容器及其属性，使创建这种效果变得非常容易。
你将学到的内容
创建滚动容器以实现可滚动视图
如何设置滚动视图的初始状态
最后，你将能够做出这样的效果！
分步说明
1. 创建滚动容器以实现可滚动视图
在Header和List两个组之间添加一个滚动容器（Scroll Container）。滚动容器通过同时上下移动图层中的属性来实现滚动效果。你希望List图层具有滚动效果，因此将滚动容器放在Header和List之间，既便于拖拽，也能保持其他分组图层的顺序。
点击顶部对齐按钮，并将宽度和高度都设置为100%。这会将滚动容器调整为填满整个画布。
继续将滚动容器重命名为 **Scroll **，这是良好的组织习惯。
4. 将List组拖入滚动容器中。只有需要滚动效果的元素才应放入滚动容器。将List组拖入滚动容器会告诉 ProtoPie 同时上下移动这些元素。在预览模式下，你现在可以上下滚动List图层了。你已经有了一个很棒的开始！
2. 设置滚动视图的初始状态
在预览中，你会注意到滚动视图从顶部开始，但你希望从底部的最新消息开始。选中你的Scroll容器，前往滚动容器的属性面板，并将scroll值设置为250。
scroll 属性值决定了滚动容器内内容所在的位置。增加 scroll 属性值会使内容向上移动。当属性值为250时，消息会上移，最新消息位于底部。
💡 提示与技巧
调整List容器的高度将使列表元素停留在你想要的位置。正如你可能注意到的，当列表向上滚动时，图层会重置到一个位置，导致最后一条消息被Add a comment输入框遮住。这是因为List足够短，能够完全适配画布中的滚动视图。拉长列表容器会在列表末尾增加边距，并在重置时将列表保持在正确位置。
使用该方法时，请确保List的约束（constraints）已正确设置，这样调整容器大小时不会使内部元素变形。
就是这样！
你已经学会了如何创建滚动容器并设置滚动视图的初始状态。在此演示中，你将滚动设置为从底部开始，但当然也可以根据设计从顶部或中间开始滚动。这是一项你会在 ProtoPie 工具箱中反复用到的实用技能！
这个用例教程对你有帮助吗？欢迎参与这份 1 分钟问卷 来帮助我们改进教育内容。
