<pc-layout-group>
<pc-layout-group> 添加布局组，将子实体元素排为行、列或网格，并可拉伸或收缩以适应空间。
用法
- 必须直接位于同时具有
<pc-element>的<pc-entity>、<pc-model>或<pc-node>下。 - 按文档顺序排列启用且带已启用 Element 的直接子项，覆盖其锚点为
"0 0 0 0"并设置位置，详见子项放置规则。 - 为子项添加
<pc-layout-child>，可控制尺寸或排除布局。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
alignment | Vector2 | "0 1" | 未填满组时的整体对齐，从左下 0 0 到右上 1 1，默认左上 |
enabled | Boolean（布尔） | "true" | 组件启用状态 |
height-fitting | Enum（枚举） | "none" | 高度适配："none" | "stretch" | "shrink" | "both"，详见下文 |
orientation | Enum（枚举） | "horizontal" | "horizontal" 排成行，"vertical" 排成列 |
padding | Vector4 | "0 0 0 0" | 组内部边距，顺序为左、下、右、上 |
reverse-x | Boolean（布尔） | "false" | 是否从右向左排列 |
reverse-y | Boolean（布尔） | "true" | 是否从上到下排列。Y 轴向上，因此默认反转使列和网格行从顶部开始，设为 false 可改为从底部向上 |
spacing | Vector2 | "0 0" | X 为同行子项间距，Y 为同列子项或网格行间距 |
width-fitting | Enum（枚举） | "none" | 宽度适配："none" | "stretch" | "shrink" | "both"，详见下文 |
wrap | Boolean（布尔） | "false" | 超出时换行形成网格，垂直布局则换列 |
适配
none 保持尺寸；stretch 拉伸填满但不超过上限；shrink 收缩但不低于下限；both 按需选择。沿布局方向按 <pc-layout-child> 比例分摊，横向于布局方向则各自适配。启用 wrap 后先换行再适配，因此 both 表现为 stretch。详见适配。
示例
垂直列表自动排列，首行在上方。可增大 spacing、设 reverse-y="false" 从下向上堆叠，或添加新行。orientation="horizontal" 会横向排列并可能溢出，设置 width-fitting="both" 可让它们缩小均分宽度：
<pc-app>
<pc-scene>
<pc-entity name="camera">
<pc-camera clear-color="#1d1f2b"></pc-camera>
</pc-entity>
<pc-entity name="ui">
<pc-screen screen-space="true" scale-mode="blend" reference-resolution="640 320"></pc-screen>
<pc-entity name="list">
<pc-element type="group" anchor="0.5 0.5 0.5 0.5" pivot="0.5 0.5" width="260" height="220"></pc-element>
<pc-layout-group orientation="vertical" alignment="0 1" spacing="0 8"
padding="10 10 10 10" width-fitting="stretch"></pc-layout-group>
<pc-entity name="row-1">
<pc-element type="image" width="240" height="50" color="#ff8a3c"></pc-element>
</pc-entity>
<pc-entity name="row-2">
<pc-element type="image" width="240" height="50" color="#7ab8ff"></pc-element>
</pc-entity>
<pc-entity name="row-3">
<pc-element type="image" width="240" height="50" color="#8ce99a"></pc-element>
</pc-entity>
</pc-entity>
</pc-entity>
</pc-scene>
</pc-app>
JavaScript 接口
可以通过 LayoutGroupComponentElement API创建和操作元素。
component 是底层 LayoutGroupComponent，就绪前为 null，其余功能可通过它访问。
另请参阅
<pc-layout-child>：逐子项尺寸规则。<pc-element>：被排列的元素。<pc-screen>：所属屏幕。- 布局组：放置、适配和换行规则。