简介
滚动是一种常见的 UI 技术，可将信息精炼到单个页面中。这可以减少用户点击并提升 UI 性能。在 ProtoPie 中，使用滚动容器即可轻松实现滚动。今天我们将学习如何进行水平和垂直信息滚动，还会了解如何无缝实现这一效果的小技巧。
你将学到什么
如何制作水平滚动视图
如何制作垂直滚动视图
如何在滚动视图中添加边距以保持 UI 一致性
最后，你将能够做出这样的效果！
分步说明
1. 制作水平滚动视图
1. 创建一个滚动容器（Scroll Container），将其宽度设置为当前使用的屏幕宽度（本例中为375），高度设置为Story List图层的高度。
💡 滚动容器是如何工作的？
要让滚动容器生效，我们需要为水平滚动调整容器的宽度，为垂直滚动调整容器的高度。在本例中，我们将容器宽度调整为屏幕宽度（375），因为我们只能看到屏幕宽度范围内的内容。要让水平滚动生效，必须确保内容在水平方向上超出容器限制，这样我们才能在容器内及超出范围进行水平滚动。
2. 将Story List图层拖入我们刚创建的容器中，并将该容器重命名为Horizontal Scroll。
💡 注意：
滚动容器会使其中的内容可滚动。
命名很重要，尤其是在项目变得庞大复杂时。
3. 在 **Horizontal Scroll 的属性面板中，**将方向改为 horizontal，因为我们希望容器内的内容水平流动（滚动默认方向为：vertical）。
4. 现在你应该会得到如下效果（水平滚动）：
2. 制作垂直滚动视图（嵌套滚动）
1. 创建一个覆盖整个屏幕的滚动容器，并将其重命名为"Vertical Scroll"。我们会让该滚动容器下的内容进行垂直移动。
2. 将Horizontal Scroll、Card1、Card2、Card3拖入Vertical Scroll中，因为我们只希望这些内容可垂直滚动。
💡 注意：请确保页眉和底部导航栏放在容器项目之外，因为我们希望它们在原型中保持固定。同时，请确保这些元素位于所有图层的顶部。这样可以避免内容覆盖到页眉和导航栏。
3. 现在你应该会得到如下效果（垂直滚动）：
3. 为两个滚动视图添加边距
💡 在滚动容器中添加边距的逻辑是什么？
为什么需要添加边距？很简单，因为我们希望内容更易读，同时提升 UI 的可访问性和一致性。
当我们想在滚动容器末尾添加边距时，只需调整滚动容器内部内容的尺寸（水平滚动容器调整内容宽度，垂直滚动容器调整内容高度）。换句话说，我们是在滚动容器内的内容末尾添加一些留白/负空间。可以通过两种方式实现：
调整子图层容器大小——使用此方法时，请确保约束设置正确。
在容器内列表末尾添加一个矩形，并将其不透明度设为 0
我们将对 Horizontal Scroll 使用第一种方法，对 Vertical Scroll 使用第二种方法。
为 Horizontal Scroll 添加边距（通过调整子图层容器大小）
1. 将 Story List 图层（位于 Horizontal Scroll 图层内）的宽度从432改为448。
💡 为什么把数值从 432 改为 448？
两个数值的差是16，这也是 story list 图层中两个 story 之间的间距。因此，我们在原始容器图层末尾增加 16，以保持间距一致。该数值可根据你的原型而变化。
2. 现在你应该会得到如下效果（带有 16 边距的水平滚动）：
为 Vertical Scroll 添加边距（使用不可见矩形）
1. 在Vertical Scroll图层内创建一个矩形，并将其重命名为Margin。然后将其移动到Card3图层底部（我们必须确保该矩形位于垂直容器的末端）。
💡 为什么使用矩形？
添加矩形的思路是在不调整容器本身大小的情况下，在容器末尾增加一些空间。之所以用矩形，只是因为它容易创建。也可以使用其他对象，例如圆形或图片。
2. 将Margin对象的高度设置为 100 之类的值。最后，将矩形的不透明度（opacity）设置为0，因为我们不希望该矩形在原型中可见。
💡 为什么是 100？
该数值可根据你的原型而变化。你可以根据希望增加的空间，将矩形高度调整为更高/更低的值。
3. 现在你应该会得到如下效果（不调整原始容器大小的垂直滚动边距）：
恭喜！
最后，我们学习了如何嵌套滚动容器，以及如何为滚动容器设置边距。我们还学到了一些在 ProtoPie 中实现该效果的实用技巧。干得漂亮，你已经完成本教程！
试着用这些知识多做尝试，你将能够创建更有趣的交互！我们很期待看到你大胆的实验。创建你自己的原型，并在Twitter或Instagram上带上#MadeWithProtoPie.进行分享。
