行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

菜单

自动布局属性

自动布局提供了丰富的自定义选项来构建布局,确保功能性与美观性兼具。这些属性包括调整大小、方向、布局对齐以及高级设置。

调整大小属性

调整大小属性用于控制子图层及其父容器如何响应内容或布局变化进行调整。可在右侧面板的下拉菜单中分别对宽度和高度单独应用这些设置。将鼠标悬停在某个调整大小选项上时,会在画布中高亮显示其效果。

固定

保持对象大小恒定,不受其内容变化影响。

自适应

在考虑内边距和间距大小的同时,调整父容器的尺寸以适配其子元素。

填充

拉伸子对象以匹配父容器的大小。

固定

保持对象大小恒定,不受其内容变化影响。

自适应

在考虑内边距和间距大小的同时,调整父容器的尺寸以适配其子元素。

填充

拉伸子对象以匹配父容器的大小。

固定

当宽度或高度设置为 固定 选项时,无论子图层如何调整大小,父框架都会保持其绝对尺寸。


{'_type': 'localeString', 'en': 'Fixed Width or Height', 'ja': 'Fixed Width or Height', 'ko': 'Fixed Width or Height', 'zh': 'Fixed Width or Height'}


{'_type': 'localeString', 'en': 'Fixed Width or Height', 'ja': 'Fixed Width or Height', 'ko': 'Fixed Width or Height', 'zh': 'Fixed Width or Height'}

包裹内容

自动布局(AL) 父级设置为 包裹 时,父框架会动态调整其尺寸,以精确适配其子图层的尺寸。


{'_type': 'localeString', 'en': 'Hug Contents', 'ja': 'Hug Contents', 'ko': 'Hug Contents', 'zh': 'Hug Contents'}


{'_type': 'localeString', 'en': 'Hug Contents', 'ja': 'Hug Contents', 'ko': 'Hug Contents', 'zh': 'Hug Contents'}

填充容器

当子级设置为 FILL 时,其尺寸会调整为填满父级尺寸内的可用空间,使其相对于父级尺寸变化。


{'_type': 'localeString', 'en': 'Fill Container', 'ja': 'Fill Container', 'ko': 'Fill Container', 'zh': 'Fill Container'}


{'_type': 'localeString', 'en': 'Fill Container', 'ja': 'Fill Container', 'ko': 'Fill Container', 'zh': 'Fill Container'}

方向属性

方向属性定义了子对象在自动布局容器中的排列方式,为各种设计场景下的布局结构提供灵活性。

垂直(默认)

将子对象按垂直方向堆叠对齐。

水平

将子对象按水平方向一行对齐。

换行

当容器空间不足时,将对象移到新的一行或一列。

垂直(默认)

将子对象按垂直方向堆叠对齐。

水平

将子对象按水平方向一行对齐。

换行

当容器空间不足时,将对象移到新的一行或一列。

布局属性

布局属性可对自动布局容器内子图层的对齐(Alignment)、内边距(Padding)和间距(Gap)进行精细控制。这些设置可确保设计更加精致且一致。

对齐

确定子对象在容器内的定位方式(例如:左上、居中、右下)。

内边距

定义容器边缘与其子对象之间的空间。

间距

设置子对象之间的间隔,可调整为固定或动态。

对齐

确定子对象在容器内的定位方式(例如:左上、居中、右下)。

内边距

定义容器边缘与其子对象之间的空间。

间距

设置子对象之间的间隔,可调整为固定或动态。

自动布局与约束

不带自动布局的容器包裹带自动布局的子容器时,会根据垂直或水平约束产生特定交互。

垂直约束

如果自动布局容器被分配了 Top & Bottom (T+B) 或 Scale,则自动布局容器的高度必须为 Fixed。将自动布局容器改回 Hug 会将垂直约束重置为 Center

水平约束

当自动布局容器被分配了 Left & Right (L+R)Scale 时,自动布局容器的宽度会被设置为 Fixed。将自动布局容器调整为 Hug 会将容器的水平约束重置为 Center

这些调整确保了自动布局容器与非自动布局容器之间的交互逻辑清晰,从而提供可预测的工作流。

高级设置

自动布局还提供了更多高级设置,以增强布局的灵活性和可定制性。这些选项允许你在设计中针对特定元素和行为进行定制。

忽略自动布局

“忽略自动布局”功能允许你为选定对象绕过自动布局规则,从而在不影响整体容器结构的情况下进行手动调整。设置为“忽略自动布局”的对象可以独立设置约束,在保持容器中其他元素自动布局属性的同时,为特殊布局场景提供灵活性。


{'_type': 'localeString', 'en': 'Ignore Auto Layout', 'ja': 'Ignore Auto Layout', 'ko': 'Ignore Auto Layout', 'zh': 'Ignore Auto Layout'}

图层顺序控制

通过多种选项可以轻松管理堆叠顺序:

  • 图层面板:直接在面板中拖动图层以重新排序。

  • 键盘快捷键:使用方向键调整堆叠顺序,以实现精确的图层控制。

  • 鼠标交互:在画布上点击并拖动对象,以交互方式重新定位它们。

实例覆盖

带有自动布局的组件实例支持选择性调整,在不修改主组件的情况下提供灵活性。

  • 调整大小:对调整大小数值的修改仅限于现有选项;无法添加新的固定值。

  • 对齐、间距和内边距:这些属性可在实例中自定义。

  • 方向:实例中不支持方向更改。