跳到主要内容

布局参数(Layout Parameters)

布局参数大致可以分为两类 — 影响父布局的参数和影响子布局的参数。

在 Rive 中,重要的是要记住布局参数通常只影响其他布局容器。这经常会导致为了达到预期效果而需要嵌套布局,但也为以创造性的方式与 Rive 的更自由形式的画布混合提供了机会。

绝对定位与相对定位(Absolute vs relative)​

要控制行、列、网格或堆叠中子布局的流动,需要子项是相对定位的,即没有启用其绝对定位选项。使用布局检查器右上角的图标在绝对和相对布局之间切换。

图片

  • 绝对定位(Absolute): 绝对定位布局在画板或父布局容器内定位自己。它可以将其 2 个或更多边缘固定到容器上。
  • 相对定位(Relative): 相对定位布局的位置由父画板或布局定义。更改父级上的弹性属性将决定子布局的行为。

缩放类型(Scale types)​

布局的宽度和高度可以使用 3 种不同的缩放行为:

  • 固定(Fixed): 布局的固定宽度或高度。定义的值可以是点数或百分比值。使用字段内的单位切换在值类型之间切换。
  • 包裹(Hug): 布局的宽度和/或高度收缩以适应其子项。例如,您可能希望布局包裹文本对象,根据内部文本的长度调整大小。
  • 填充(Fill): 布局的宽度和/或高度扩展以填充父布局或画板内的可用空间。填充选项将宽度/高度字段切换为 fr(填充比例)单位,并显示基础大小字段。填充比例值使得可以控制具有填充缩放行为的多个子项之间的填充行为。例如,您可能希望子项平均填充可用空间,或者让一个子项的缩放比例大于其他子项。

在检查器中的宽度和高度字段下方可以找到设置缩放类型的选项。

图片

包裹和填充选项只会在适用时显示。例如,没有任何子项的布局不会显示包裹选项,而只有具有另一个布局作为父级的布局才能设置为填充。

尺寸约束(Size Constraints)​

使用绝对定位切换旁边的图标来添加最小和/或最大宽度和高度值。与宽度和高度值本身一样,这些值可以定义为点数或百分比。

图片

裁剪(Clip)​

裁剪切换可以隐藏布局中超出布局边界的任何子元素。

图片

位置(Position)​

绝对定位布局提供了额外的选项来设置它们在画板或父布局中的位置。位置由至少 2 个固定边缘定义 — 一个水平和一个垂直,但也可以启用额外的边缘。

通过在检查器图形中选择标记或通过下方的字段来设置要固定的所需边缘。您可以在选择标记时按住 shift 来添加同一轴上的第二个边缘。从选定边缘的距离值可以通过在字段中选择所选单位类型来提供为点数或百分比。

图片

内边距和外边距(Padding and margin)​

内边距只影响布局子项。例如,如果您想拥有一个带标签的按钮,文本应该包装在一个布局中,而该布局应该是应用内边距的另一个布局的子项。

外边距影响应用外边距的布局相对于其父布局的位置。

内边距和外边距可以沿轴对称应用,或应用于单个边缘。使用边缘切换来显示每个边缘的字段以及使用点数或百分比值的选项。

  • 内边距(Padding): 布局边界和任何相对布局子项之间的内部空间。
  • 外边距(Margin): 布局边界和相对父布局或画板之间的外部空间。

布局子项(Layout children)​

布局的弹性参数只应用于其布局子项。形状、文本和图像可以通过在 Inspector 顶部选择 Layout 而不是 Node,直接成为布局子项。其他内容(例如组和路径)必须包装在额外的布局容器中,才能生成可重排的内容行、列和网格。

布局类型(Layout type)​

布局类型决定布局如何排列其相对布局子项。

  • 行(Row): 沿水平轴布局子项。
  • 列(Column): 沿垂直轴布局子项。
  • 行反转(Row Reverse): 以相反的顺序沿水平轴布局子项。
  • 列反转(Column Reverse): 以相反的顺序沿垂直轴布局子项。
  • 网格(Grid): 在由列和行定义的单元格中布局子项。参见网格(Grid)。
  • 堆叠(Stack): 将所有子项放在同一空间中,相互层叠。参见堆叠(Stack)。

图片

网格(Grid)​

网格布局将其子项排列到列和行中。将布局设为网格时,它从一列一行开始。增加列数和行数以构建网格。选中该布局时,舞台会显示每个单元格的参考线,并在间隙处着色。

子项按层级顺序放入网格,从左到右填满每一行后再进入下一行。

列和行(Columns and rows)​

每一列和每一行(或 轨道 track)都有自己的尺寸,使用与布局相同的缩放类型:

  • 填充(Fill): 轨道扩展以填充可用空间,以 fr(填充比例)为单位。例如,三列都设为 1fr 时会均分宽度,而 2fr 列占用的空间是 1fr 列的两倍。
  • 固定(Fixed): 轨道具有固定的宽度或高度。
  • 包裹(Hug): 轨道收缩以适应其内部内容。

拖动轨道可重新排序。要同时编辑多条轨道,按住 Shift 并点击它们的轨道编号。

使用间距(Gap) 在列和行之间添加空间。

网格单元格(Grid cell)​

网格布局的子项会在检查器中显示 Grid Cell 选项:

  • 位置(Position): 子项所在的列和行。默认情况下,子项会自动放入下一个可用单元格。
  • 跨度(Span): 子项占用的列数和/或行数。

当子项跨越多个单元格时,其后的子项会被推到下一个可用单元格。如果子项数量多于单元格,Rive 会添加行以容纳它们。要控制这些额外行的尺寸,请显式将它们添加到网格并设置其缩放类型。

提示(Tip):要让子项填满其单元格,将其宽度和高度设为 Fill。处于 Layout 模式且设为 Fill 的组件实例会填满其单元格,但要使用跨度等 Grid Cell 选项,请将实例包装在布局中,并将该布局的宽度和高度设为 Fill。

信息(Info):网格中的列数和行数无法制作动画。轨道尺寸、间距以及 Grid Cell 的跨度和位置可以设置关键帧,从而让你可以动画化子项在网格内的重排。

堆叠(Stack)​

堆叠布局将其所有子项放在同一空间中,相互层叠。子项按层级顺序绘制:层级中最上方的子项绘制在最前面,最下方的绘制在最后面。

使用对齐(Alignment) 在堆叠内定位子项。设为 Fill 的子项会扩展以覆盖整个堆叠,而 Fixed 或 Hug 子项则由对齐方式定位。

堆叠适用于由多层部分组成的组件。

用例:库存物品卡片(Inventory item card)

物品卡片是一个包含四层的 Stack:徽章、物品信息、物品插图和背景。每一层都是设为 Fill 的布局,因此它们都覆盖整张卡片。每一层使用自己的内边距和对齐来放置内容:徽章位于左上角,物品名称和类别对齐到底部。库存界面再将这些卡片放入网格,其中一张卡片跨两列。

换行(Wrap)​

换行适用于行和列布局。

  • 不换行(No Wrap): 当内容达到布局边界时,继续延伸超出边界。
  • 换行(Wrap): 当内容达到布局边界时,将下一个项目放在当前行/列的下方或旁边。
  • 反向换行(Wrap Reverse): 与换行相同,但以相反的顺序显示内容。

图片

对齐(Alignment)​

选择检查器小部件上的所需点来对齐布局容器中的内容。

图片

两端对齐(Justify)​

点击当前对齐位置以展开内容以填充可用空间。再次选择活动图块将内容折叠回来。

图片

间距(Gap)​

内容之间的间距(间隙)可以在水平和垂直方向上设置,并可以是点数或容器宽度/高度的百分比。

图片

从左到右 / 从右到左(Left-to-right/right-to-left)​

决定此布局的水平方向,并会级联到其子布局(当子布局设置为继承时)。这将改变基于行的布局方向以及任何布局内的文本对齐方式。当需要支持从右到左的语言时,这很有用。

样式(Styles)​

布局可以像 Rive 中的其他对象一样拥有填充、描边、羽化、混合模式和圆角。

样式可以在 背景(background) 中渲染,位于布局子项后面,或者在 前景(foreground) 中渲染,位于子项前面。例如,您可以将填充和羽化阴影放在子项后面,同时将描边放在前面渲染。

圆角适用于布局的样式及其裁剪边界。

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