排列子级(Arranging Children)
布局会排列参与其中的子级。本页介绍在父级上设置的选项:子级沿哪个方向流动、如何换行和对齐、周围和彼此之间有多少空间,以及布局本身的外观。
除裁剪和样式外,这些设置只影响参与布局的子级:其他布局,在 检查器(Inspector) 中设为 布局(Layout) 的形状、文本和图像,以及 布局(Layout) 模式的组件实例。绝对子级会忽略它们。要控制子级自己的尺寸,或把它固定到父级边缘,参见尺寸与定位。
布局类型(Layout type)
布局类型决定布局用来排列子级的整体模式:
- 行(Row): 从左到右并排放置子级。
- 列(Column): 从上到下逐个放置子级。
- 网格(Grid): 把子级放进由列和行定义的单元格。参见网格。
- 堆叠(Stack): 把所有子级放在同一空间里,彼此层叠。参见堆叠。
子级按层级顺序排列。要更改顺序,在 层级(Hierarchy) 中重排子级,或在舞台上拖拽它们。
要在不重排层级的情况下翻转行或列的顺序,选中 反向(Reverse) 复选框。反向的行从右到左,反向的列从下到上。
布局排列子级的方向是它的 主轴(main axis)。行的主轴是水平的,列的主轴是垂直的。另一个方向是 交叉轴(cross axis)。包括对齐、换行和填充在内的若干设置,沿每条轴的行为不同。
对齐(Alignment)
当子级没有占满布局的全部空间时,对齐决定它们坐落在哪里。在 检查器(Inspector) 的对齐控件上选择九个点之一,例如左上或居中。

对齐把子级作为一个整体移动。在对齐到中心的行中,子级彼此挨着,这一组位于行的中间。
间距分布(Space between)
要改为沿主轴把子级散开,再次点击已选中的点。第一个子级移到布局的起点,最后一个子级移到终点,剩余空间在它们之间平均分配。交叉轴对齐保持不变。再次点击该点,子级会重新聚成一组。

换行(Wrap)
换行决定行或列没有足够空间容纳子级时会发生什么:
- 不换行(No Wrap): 子级保持在一行上,并伸出布局边缘。
- 换行(Wrap): 放不下的子级移到行的下方新的一行,或列旁边新的一列。
- 反向换行(Wrap Reverse): 与 换行 相同,但新行加在相反方向:行的上方,或列的前方。

对应当在空间变窄时重排到更多行的内容使用换行,例如一组标签或缩略图画廊。本教程制作一个元素会随调整大小而重排的文件:
内边距、间隙和外边距(Padding, gap, and margin)
Rive 有三种在布局中添加空间的设置。内边距和间隙设在父级上,外边距设在子级上。
- 内边距(Padding): 父级边缘与其子级之间的空间。内边距设在父级上,把所有子级向内推。
- 间隙(Gap): 相邻子级之间的空间。间隙设在父级上,均匀地加在每一对子级之间。
- 外边距(Margin): 某一个子级周围的空间。外边距设在子级上,只影响该子级。参见外边距。
均匀间距优先使用间隙,而不是外边距。如果每个子级都有 10 点外边距,相邻子级最终会相距 20 点,因为它们的外边距相加。10 点间隙会在每个子级之间正好放 10 点,边缘处不额外加空间。
内边距只影响参与布局的子级。要在按钮内的标签周围加空间,标签需要参与按钮的布局。你可以在 检查器(Inspector) 中把标签设为 布局(Layout),或把它包进自己的布局。
设置内边距(Setting padding)
内边距可以在一条轴的两侧设为相同,也可以在每条边上分别设置。用边缘开关显示每条边的字段,用单位开关在点和百分比之间切换。
设置间隙(Setting gap)
间隙可以分别为水平和垂直方向设置,以点为单位,或为布局宽度或高度的百分比。在会换行的行中,水平间隙分隔同一行上的子级,垂直间隙分隔各行。

文本方向(Text direction)
文本方向决定布局从左到右还是从右到左阅读。用它支持阿拉伯语和希伯来语等从右到左的语言。
- 继承(Inherit): 使用父布局的方向。这是默认值。
- 从左到右(Left to Right): 行从左到右,文本左对齐。
- 从右到左(Right to Left): 行从右到左,文本右对齐。
该方向会向下传递给每个设为 继承(Inherit) 的子布局,因此通常只需在画板或外层布局上设置一次。
裁剪(Clip)
选中裁剪开关,以隐藏布局内部超出其边缘的任何内容。裁剪适用于布局的全部内容,包括绝对子级和不参与布局的内容。

样式(Styles)
布局可以像 Rive 中的其他对象一样具有填充、描边、羽化、混合模式和圆角。这意味着布局本身可以是按钮或卡片的可见形状,而不必在内容后面另放一个矩形。
样式可以画在 背景(Background),位于布局子级后面,或画在 前景(Foreground),位于它们前面。例如,你可以在子级后面放置填充和羽化阴影,同时把描边画在前面。
圆角同时作用于布局的样式和它的裁剪边缘,因此被裁剪的内容会跟随圆角。