跳到主要内容

尺寸与定位(Sizing and Positioning)

在布局中,父级决定如何排列子级,每个子级决定自己的尺寸。本页介绍在子级上设置的选项:宽度和高度、尺寸限制、外边距,以及它是相对于兄弟定位,还是固定到父级边缘。

这些设置适用于参与布局的任何对象:其他布局,以及在 检查器(Inspector) 中设为 布局(Layout) 的形状、文本和图像。布局(Layout) 模式的组件实例使用相同的宽高选项。参见组件尺寸。

控制父级如何排列子级的设置,例如方向、内边距和间隙,见排列子级。

宽度和高度(Width and height)​

子级的宽度和高度各自使用三种缩放类型之一:固定(Fixed)、包裹(Hug) 或 填充(Fill)。宽度和高度可以独立设置。例如,按钮可以在水平方向包裹其标签,同时保持固定高度。

在 检查器(Inspector) 中,于宽度和高度字段下方选择缩放类型。

布局检查器,突出显示宽度和高度的缩放类型下拉菜单(包裹与固定)

固定(Fixed)​

固定的宽度或高度保持同一尺寸,与父级或子级内容无关。以点输入数值,或用字段中的单位开关切换为父级尺寸的百分比。

当子级应随父级缩放、但你又不希望它占满全部可用空间时,百分比很有用,例如始终为屏幕宽度 50% 的面板。

包裹(Hug)​

包裹的宽度或高度会缩小或增长,以适合子级自己的内容。当内容应决定尺寸时使用包裹,例如随标签变长的按钮,或随项目增加而变高的列表。

要使用包裹,布局需要可以测量的内容:子布局、文本,或参数化形状(矩形、椭圆、三角形、多边形和星形)。如果布局没有任何可测量的内容,包裹选项不可用。

包裹子布局的布局总会增长到能容纳它们。文本以及 Rive 测量的其他内容则不同:默认情况下,由这类内容决定尺寸的包裹子级会在父级边缘停止增长,即使内容更大。要让它增长到完整的内容尺寸,选中 超出边界仍包裹(Hug past bounds)。例如,滚动区域中的一大段文字需要这个选项,才能长得比可见区域更高。宽度或高度使用包裹时会出现此选项。最小和最大尺寸约束仍然适用。

本教程用包裹制作一个随标签调整大小的按钮:

画板只有在包含相对布局,或 布局(Layout) 模式的组件实例时才能包裹。

填充(Fill)​

填充的宽度或高度会扩展,以占据父级中的可用空间。填充只可用于布局内的相对子级。绝对子级不能使用填充。

填充的行为取决于该轴是否与父级的排列方向相同:

  • 沿父级方向: 在行父级中这是宽度,在列父级中这是高度。子级与同样使用填充的兄弟共享剩余空间。数量以 fr(填充比例)为单位。
  • 跨父级方向: 在行父级中这是高度,在列父级中这是宽度。子级拉伸到父级的完整尺寸,再减去内边距。

填充比例决定兄弟如何分割剩余空间。三个设为 1fr 的子级各得剩余空间的相等一份。设为 2fr 的子级得到的空间是设为 1fr 的子级的两倍。

当子级沿父级方向使用填充时,检查器(Inspector) 还会显示 基准尺寸(Base size) 字段。基准尺寸是分出剩余空间之前子级的起始尺寸。以点或百分比设置,或保持自动,以便从子级内容的尺寸开始。

基准尺寸为自动时,填充比例相同的兄弟不一定一样大。每个子级从自身内容的尺寸开始,只有剩余空间被平均分配。例如,如果三个 1fr 子级包含尺寸不同的子布局,内容最大的那个最终也最大。要让它们大小完全相同,把每个子级的 基准尺寸(Base size) 设为 0。

尺寸约束(Size constraints)​

尺寸约束设置最小或最大的宽度或高度。它们对包裹和填充最有用:你希望子级响应内容或父级,但只到某个程度。例如,文本字段可以填满它所在的行,但宽度增长到 400 点就停止。

点击绝对/相对开关上方的图标,然后选择 最小宽度(Min width)、最大宽度(Max width)、最小高度(Min height) 或 最大高度(Max height)。与宽高一样,约束可以设为点或百分比。

布局检查器中打开的尺寸约束菜单,列出最小宽度、最大宽度、最小高度、最大高度和清除约束

外边距(Margin)​

外边距在子级外侧、它与父级边缘或兄弟之间添加空间。用边缘开关分别设置每一侧的外边距,用单位开关在点和百分比之间切换。

外边距设在子级上,而内边距和间隙设在父级上。要在父级的所有子级之间加入相同的空间,使用父级的间隙,而不是给每个子级设置外边距。相邻兄弟的外边距会相加,因此两个各有 10 点外边距的子级相距 20 点。参见内边距、间隙和外边距。

相对与绝对定位(Relative and absolute positioning)​

子级以两种方式之一定位:

  • 相对(Relative): 父级根据方向、对齐和间隙放置子级。父级调整大小或增删兄弟时,相对子级会重排。
  • 绝对(Absolute): 子级忽略父级的排列,把自己固定到父级边缘。绝对子级不占空间,因此它们的兄弟会像它们不存在一样排列。

对应当在其他内容重排时保持不动的东西使用绝对定位,例如对话框角落的关闭按钮,或卡片上的徽章。

用 检查器(Inspector) 中布局部分右上角的开关,在相对和绝对之间切换。

布局检查器,右上角突出显示绝对/相对开关

固定到边缘(Pinning to edges)​

绝对子级至少固定到父级的两条边缘:一条水平、一条垂直。父级调整大小时,到每条被固定边缘的距离保持不变。

要选择固定哪些边缘,在 检查器(Inspector) 的位置控件中选择标记,或使用它下方的字段。选择标记时按住 Shift,可以在同一轴上固定第二条边缘,例如同时固定左和右。距离可以设为点,或父级尺寸的百分比。

绝对布局的四条边都以 80 px 固定,检查器中显示位置控件以及左+右 / 上+下字段

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