跳到主要内容

<pc-layout-child>

<pc-layout-child> 添加布局子项组件，改变父实体 <pc-layout-group> 如何调整本实体元素尺寸，或将其排除在布局外。

用法

属性​

属性类型默认值说明
enabledBoolean（布尔）"true"组件启用状态
exclude-from-layoutBoolean（布尔）"false"是否排除布局，不占空间并保留自己的锚点和位置
fit-height-proportionNumber（数字）"0"垂直布局中，height-fitting 增减高度时的分配比例，详见下文
fit-width-proportionNumber（数字）"0"水平布局中，width-fitting 增减宽度时的分配比例，详见下文
max-heightNumber（数字）-最大布局高度，省略表示无限制
max-widthNumber（数字）-最大布局宽度，省略表示无限制
min-heightNumber（数字）"0"最小布局高度
min-widthNumber（数字）"0"最小布局宽度
比例

沿布局方向拉伸时按比例分配额外空间：2 获得 1 的两倍，0 不分配；若全部为 0，则均分。收缩时反向加权，比例越大缩得越少，例如两个 100 单位、比例 2 和 1 的子项收缩到总计 140，结果为 80 和 60。垂直于布局方向则各自适配，详见布局子项。

示例​

三个子项的水平组使用 width-fitting="stretch"。中间项 fit-width-proportion="1"，独自获得剩余宽度。将第一项也设为 1，两者均分；设为 2，则第一项获得两倍。删除中间项比例后，三者均分：

实时示例
<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="toolbar">
                <pc-element type="group" anchor="0.5 0.5 0.5 0.5" pivot="0.5 0.5" width="480" height="70"></pc-element>
                <pc-layout-group orientation="horizontal" alignment="0 0.5" spacing="8 0"
                                 padding="10 10 10 10" width-fitting="stretch"></pc-layout-group>

                <pc-entity name="item-1">
                    <pc-element type="image" width="80" height="50" color="#7ab8ff"></pc-element>
                    <pc-layout-child></pc-layout-child>
                </pc-entity>
                <pc-entity name="item-2">
                    <pc-element type="image" width="80" height="50" color="#ff8a3c"></pc-element>
                    <pc-layout-child fit-width-proportion="1"></pc-layout-child>
                </pc-entity>
                <pc-entity name="item-3">
                    <pc-element type="image" width="80" height="50" color="#7ab8ff"></pc-element>
                    <pc-layout-child></pc-layout-child>
                </pc-entity>
            </pc-entity>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScript 接口​

可以通过 LayoutChildComponentElement API创建和操作元素。

component 是底层 LayoutChildComponent，就绪前为 null，其余功能可通过它访问。

另请参阅​

示例：界面布局和滚动视图。