跟我学PaPaSketch—5.滚动

papaman

当内容太多时，一屏显示不下，这时必须通过滚动来显示更多的内容，因此滚动是在手机和平板中常常用到的一种操作方式，本章我们讲PaPaSketch怎样实现滚动操作。

我们先创建一个空白文档，并放一个IPhone手机外壳在幻灯片中，界面如下：

用鼠标双击手机屏幕，在弹出的窗口中点击“创建幻灯片”，为手机屏幕创建一张新幻灯片

接下来我们要用到一个重要的组件:ScrollViewer，PaPaSketch中所有的滚动操作，都是由这个组件来实现，它位于“Common”组。我们拖一个ScrollViewer到当前幻灯片中，调整它的大小，占满整张幻灯片，界面如下：

ScrollViewer上面写着“双击编辑内容”，我们用鼠标编辑它，会发现进入了另一个界面，如下图：

我们现在进入了ScrollViewer内部，看到的界面是用来放ScrollViewer的内容的，它的内容的大小比ScrollViewer要大。注意左上角出现了导航栏，它上面写着”Slide>ScrollClontent”.如果你编辑过Group,应该见过这个导航栏。它表示我们现在进入了一个组件的内部，显示的进入这个组件的顺序，最外面是Slide,我们现在看到的是scrollContent,是Slide中的一个ScrollViewer的Content,如果我们要回到Slide的界面，只需要用鼠标点击导航栏上的“Slide”就可以了。

ScrollContent上画有虚线格子，格子的大小和ScrollViewer相等，这样调整ScrollContent时好有参照。我们现在调整ScrollContent的大小为两个ScrollViewer的大小，结果如下：

接下来我们放一个Image在ScrollContent的上半部分，并且添加一个图标“1”，结果如下：

在下半部分再放一个图标，增加一个图标“2”

我们点工作区左上角的导航栏的”Slide”文字，回到幻灯片，界面如下：

点击工具栏上的“放映”命令， 放映幻灯片。我们按住鼠标向上拖拽图标“1”，发现图标“1”会跟着向上衮东，图标“2”会从下来出来。

我们这里只做了两屏内容，你可以做更多地内容，可以选择竖向或横向，这样实现滚动的原型是不是很简单呢？