跳到主要内容

滚动(Scrolling)

响应式设计变小时,内容最终会放不下。布局有三种方式处理大于可用空间的内容:

  • 重排(Reflow): 用换行(Wrap)把内容移到更多行或列。
  • 缩小(Shrink): 用填充(Fill)和尺寸约束,让内容缩小到不小于某个最小值。
  • 滚动(Scroll): 保持内容的完整尺寸,让人滚动查看其余部分。

当内容数量可以无限增长时,滚动是合适的选择,例如消息列表、信息流,或选项很多的菜单。

滚动在 Rive 中如何工作(How scrolling works in Rive)​

Rive 中的滚动是添加到布局上的一种约束。一个滚动区域由三层布局组成:

  • 滚动视图(Scroll view): 定义可见区域的布局。它的尺寸通常来自响应式设计的其余部分,例如列(Column)中的填充高度。
  • 滚动内容(Scroll content): 滚动视图内部、承载所有滚动内容的布局。这个布局获得 Scroll 约束。把它设为 Hug,使它随内容增长。如果滚动内容直接包含文本,例如一大段文字,还要选中超出边界仍包裹(Hug past bounds),这样它才能长得比滚动视图更大。由子布局组成的滚动内容不需要这个选项。
  • 滚动项(Scroll items): 滚动内容内部的布局,例如列表中的每一行。

当滚动内容大于滚动视图时,人们可以通过拖拽、鼠标滚轮或触控板滚动,你也可以用动画或数据绑定来驱动它。

层级中的滚动视图布局,其中包含滚动内容布局及其项目

设置滚动(Setting up scrolling)​

逐步设置和每一项滚动选项见滚动约束(Scroll Constraint)。该页还介绍:

看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群