布局与定位
付费墙编辑工具与流程编辑工具均采用响应式布局。你无需将元素拖放到精确坐标——而是将它们嵌套在容器中,由容器自动排列子元素。
容器负责控制元素的排列方向(垂直或水平)、对齐方式和间距。各个元素可进一步微调自身的尺寸和边距,或者在需要时通过绝对定位或固定定位脱离常规流程。
有关填充、边框和效果等视觉属性,请参阅样式与外观。
向 AI 编辑器请求”最受欢迎”徽章、粘性页脚或全新的社会证明板块——它会自动为你构建容器。
布局

布局是在屏幕上排列元素的核心工具。每个容器会按照一组规则(方向、对齐方式和间距)自动分配其子元素。编辑工具中可用的布局元素如下:
容器是屏幕的基本构建单元,可以相互嵌套来实现复杂布局。右侧面板的 Layout 部分用于控制容器内子元素的排列方式。
如需将元素归组到新容器中,可使用 Wrap 图层操作;如需移除容器并将子元素提升到上一层,则使用 Unwrap。
有关屏幕和图层层级结构的详细信息,请参阅屏幕与图层。
方向
- Free:无自动布局。子元素相互叠加,而非依次排列。选择 Free 会将所有子元素转换为绝对定位,其堆叠顺序决定哪个元素覆盖哪个
- Vertical:子元素从上到下排列,如列中的行
- Horizontal:子元素从左到右排列,如行中的项目
元素顺序
子元素按照图层面板中的排列顺序进行渲染。在垂直容器中,列表顶部的元素显示在屏幕上方;在水平容器中,列表顶部的元素显示在左侧。你可以在图层面板中拖动元素来调整顺序,或使用上移和下移图层操作。
对齐方式

对齐网格控制子元素在容器交叉轴上的位置。在垂直容器中,对齐方式控制子元素的水平位置(左对齐、居中或右对齐)。在水平容器中,它控制子元素的垂直位置(顶部、居中或底部)。
分布
分布决定了子元素在主轴方向上的空间分配方式:
- Gap (默认):相邻子元素之间的固定像素间距
- Space Between:子元素分布到两端,元素之间的间距相等
- Space Around:每个子元素两侧拥有相等的空间,但边缘处的间距为中间间距的一半
- Space Evenly:所有子元素前后及之间的空间完全相等
裁剪内容
从视觉上裁剪超出容器边界的内容。关闭此选项可允许内容溢出(例如,一个有意延伸到卡片边缘之外的徽章)。
位置

默认情况下,每个元素的位置由其容器的布局自动决定。Position 切换开关允许你将元素从正常流中脱离出来,手动设置其位置。
相对定位(默认)
元素保持在正常的布局流中,其位置由父容器的布局规则自动决定——你无法自由拖动它。可使用**外边距(Margin)**来调整相对定位元素周围的间距。
绝大多数内容都适合使用相对定位,例如文本块、图片、卡片、按钮和列表项。
绝对定位

元素脱离正常文档流,覆盖在其他内容之上,不再影响相邻元素的布局。
选择 Absolute 后,会出现以下额外控件:
- 偏移字段(T、L、R、B):设置元素与父容器各边缘之间的像素距离
- 锚点网格:点击 3×3 网格中的某个点,选择元素要锚定到父容器的哪个角、边或中心
- 水平锚点 (Left / Center / Right)和垂直锚点 (Top / Center / Bottom):与网格锚点功能相同的下拉菜单
- Z-index:数值字段,用于设置元素在其他已定位元素中的层叠顺序
对装饰性叠层、徽章、关闭按钮以及放置在图片上方的图标,请使用绝对定位。
若要让绝对定位元素横向撑满其父元素,请将水平锚点设置为 Left,然后将 Right 偏移设为 0。元素将同时固定到两侧边缘,其宽度也会切换为 Auto。
固定

该元素完全忽略父容器,直接固定在屏幕上。用户滚动时它始终可见,页面内容在其下方移动。
固定定位使用与绝对定位相同的控件(偏移量、锚点网格、Z-index)。所有偏移量均相对于屏幕安全区域计算,而非相对于父元素。例如,底部偏移量为 0 时,元素会保持在 Home 指示条上方。如需从屏幕物理边缘计算偏移量,请启用忽略安全区域。
对于需要悬浮在滚动内容上方而不占用布局空间的元素,请使用固定定位——例如浮动的关闭或返回按钮、固定的顶部横幅、回到顶部控件以及导航栏。如需专用的底部操作区域,请改用 Footer。如需将内容叠加在英雄图片上,请使用 Sliding sheet。
Free 容器中的位置
Free 容器不会对其子元素进行排序,因此需要手动设置子元素的位置。不支持相对定位,子元素遵循以下规则:
忽略安全区域
安全区域是屏幕上避开刘海、状态栏和主屏指示器的区域。默认情况下,定位元素会保持在安全区域内。
勾选位置类型选择器下方的 Ignore safe area 复选框,可将元素的偏移量改为从物理屏幕边缘开始计算。元素将可延伸至刘海和主屏指示器后面。
使用以下方法实现全屏媒体效果:将图片或视频定位方式设置为 Fixed,将四个偏移量均设为 0,并勾选 Ignore safe area。这样,媒体内容将覆盖整个屏幕,延伸至每一条边缘。
该复选框仅适用于绝对定位和固定定位。对于相对定位的元素,该选项不可用;将元素切换回 Relative 后,该设置也会自动清除。
尺寸
每个元素都有 Width 和 Height 控件。点击任意一个下拉菜单即可选择尺寸模式。
| 模式 | 元素尺寸 | 适用范围 |
|---|---|---|
| Fill | 拉伸以填充父容器的可用空间,显示值自动计算 | 仅限相对元素 |
| Hug | 收缩以适应内容,显示值自动计算 | 除自由容器中的自由子元素外的所有位置 |
| Fixed | 匹配你输入的像素值,不受父容器或内容尺寸影响 | 所有位置 |
| Auto | 在两个偏移量之间拉伸内容 | 仅限绝对或固定定位元素,且需同时设置 Left 和 Right,或同时设置 Top 和 Bottom。由 Adapty 自动应用,无法手动选择 |
对父元素应用 Free 方向后,该元素的 Fill 尺寸会变为 Fixed。如果该元素本身也使用 Free 方向,其 Hug 尺寸同样会变为 Fixed。
图片有自己的比例,因此你设置的高度决定了图片是否会被裁剪。请参阅图片尺寸调整。
间距
可为元素的每一侧单独设置间距值。
| 控件 | 功能说明 | 适用范围 |
|---|---|---|
| Margin | 在元素与其相邻元素之间添加间距。较大的值不会将元素推出其父容器 | 任何使用相对定位的元素。屏幕没有外边距 |
| Padding | 在元素边界与其内容之间添加间距。设置为 Hug 的宽度或高度会随之扩展以包含内边距 | 容器、屏幕及其他含子内容的元素。例外情况:Free 容器的直接子元素,以及 Free 屏幕本身。 |
选择 Free 方向会清除容器原有的所有内边距。
层叠顺序

相对定位的元素之间不会相互重叠——每个容器会按顺序排列其子元素。只有当元素脱离正常流程,使用**绝对(Absolute)或固定(Fixed)**定位后,才会出现重叠。
**绝对(Absolute)或固定(Fixed)**定位的元素会渲染在相对定位的兄弟元素之上,无论图层顺序如何。相对定位的元素没有 Z-index 字段,因为它们不会相互重叠。
当多个绝对定位或固定定位元素占用同一空间时,它们的堆叠顺序由以下两个因素决定(按重要性排序):
- Z-index。默认值为 0。值越大的元素显示在越上层,与图层顺序无关。
- 图层顺序。如果两个元素的 z-index 相同,则在图层列表中排列靠后的元素显示在上层。