华为仓颉鸿蒙HarmonyOS NEXT仓颉容器组件相对布局RelativeContainer

相对布局组件，用于复杂场景中元素对齐的布局。

👇🏻👇🏻👇🏻求关注👇🏻👇🏻👇🏻

说明

RelativeContainer暂不支持混合页面场景。

规则说明

• ​ 容器内子组件区分水平方向，垂直方向：

• ​ 水平方向为left， middle， right，对应容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。
• ​ 垂直方向为top， center， bottom，对应容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。

• ​ 子组件可以将容器、guideline、barrier或者其他子组件设为锚点：
• ​ 参与相对布局的容器内组件必须设置非空且唯一的id，不设置id的组件不显示；容器id固定为__container__；guideline和barrier的id不能与组件重复，重复的话按照组件 > guideline > barrier的优先级生效。
• ​ 此子组件某一方向上的三个位置（水平方向为left、middle、right，垂直方向为top、center、bottom）可以指定容器或其他子组件同方向的三个位置（水平方向为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End，垂直方向为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom）为锚点。若同方向上设置两个以上锚点，水平方向Start和Center优先，垂直方向Top和Center优先。例如，水平方向上指定了left以容器的HorizontalAlign.Start为锚点，middle以容器的HorizontalAlign.Center为锚点，又指定right的锚点为容器的HorizontalAlign.End，当组件的width和容器的width不能同时满足3条约束规则时，优先取Start和Center的约束规则。
• ​ 当同时存在前端页面设置的子组件尺寸和相对布局规则时，子组件的绘制尺寸取决于约束规则。该规则发生变化，子组件绘制尺寸取决于前端页面设置的尺寸。
• ​ 在RelativeContainer组件中，width、height设置auto表示自适应子组件。
• ​ 当width设置auto时，如果水平方向上子组件以容器作为锚点，则auto不生效，垂直方向上同理。
• ​ 相对布局容器内的子组件的margin含义不同于通用属性的margin，其含义为到该方向上的锚点的距离。若该方向上没有锚点，则该方向的margin不生效。
• ​ guideline的位置在不声明或者声明异常值(如undefine)时，取start：0的位置；start和end两种方式声明一种即可，同时声明时仅start生效。
• ​ 当容器在某个方向的size声明为“auto”时，该方向上guideline的位置只能使用start的方式声明(不可使用百分比)。
• ​ 垂直方向的guideline和barrier只能作为组件水平方向的锚点，作为垂直方向的锚点时取0；水平方向的guideline和barrier只能作为组件垂直方向的锚点，作为水平方向的锚点时取0。
• ​ 链的形成依靠组件间的依赖关系。以一个组件A、组件B组成的最小水平链为例，需要有锚点1 <-- 组件A <---> 组件B --> 锚点2的依赖关系，即A具有left锚点，B具有right锚点，同时A的right锚点是B的HorizontalAlign.Start，B的left锚点是A的HorizontalAlign.End。
• ​ 特殊情况
• ​ 根据约束条件和子组件本身的size属性无法确定子组件大小，则子组件不绘制。
• ​ 互相依赖、环形依赖时容器内子组件全部不绘制。
• ​ 同方向上两个及以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。

子组件

支持多个子组件。

构造函数

init()

public init()

创建一个RelativeContainer组件。

init(() -> Unit)

public init(child: () -> Unit)

创建一个RelativeContainer组件。

参数名	参数类型	必填	默认值	描述
child	() -> Unit	是	-	声明容器子组件。

函数

guideLine(Array)

public func guideLine(value: Array<GuideLineStyle>): This

设置RelativeContaine容器内的辅助线。

参数名	参数类型	必填	默认值	描述
value	Array	否	-	声明RelativeContaine容器内的辅助线，Array中每个项目即为一条guideline。

barrier(Array)

public func barrier(value: Array<BarrierStyle>): This

设置RelativeContaine容器内的屏障。

参数名	参数类型	必填	默认值	描述
value	Array	否	-	声明RelativeContaine容器内的屏障，Array中每个项目即为一条barrier。

GuideLineStyle

public GuideLineStyle (id: String,direction: Axis,position: GuideLinePosition)

guideLine参数，用于定义一条guideline的id、方向和位置。

参数名	参数类型	必填	默认值	描述
id	String	是	-	guideline的id，必须是唯一的并且不可与容器内组件重名。
direction	Axis	是	-	指定guideline的方向。
position	GuideLinePosition	是	-	指定guideline的位置。

GuideLinePosition

public GuideLinePosition(start!: ?Length = None,end!: ?Length = None)

guideLine位置参数，用于定义guideline的位置。

参数名	参数类型	必填	默认值	描述
start	Length	否	-	guideline距离容器左侧或者顶部的距离。
end	Length	否	-	guideline距离容器右侧或者底部的距离。

BarrierStyle(String, BarrierDirection, Array)

public BarrierStyle(id: String,direction: BarrierDirection,referencedId: Array<String>)

barrier参数，用于定义一条barrier的id、方向和生成时所依赖的组件。

参数名	参数类型	必填	默认值	描述
id	String	是	-	barrier的id，必须是唯一的并且不可与容器内组件重名。
direction	BarrierDirection	是	-	barrier的方向。
referencedId	Array	是	-	生成barrier所依赖的组件。

示例

容器和容器内组件作为锚点进行布局的用法

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    import std.collection.*
    
    @Entry
    @Component
    class MyView {
        func build() {
            Row() {
                RelativeContainer() {
                    Row().width(100).height(100)
                    .backgroundColor(0xff3333)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("__container__", VerticalAlign.Top),
                            left: HorizontalAnchor("__container__", HorizontalAlign.Start)
                        )
                    ).id("row1")
                    Row().width(100).height(100)
                    .backgroundColor(0xFFCC00)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("__container__", VerticalAlign.Top),
                            right: HorizontalAnchor("__container__", HorizontalAlign.End)
                        )
                    ).id("row2")
                    Row().height(100)
                    .backgroundColor(0xFF6633)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("row1", VerticalAlign.Bottom),
                            left: HorizontalAnchor("row1", HorizontalAlign.End),
                            right: HorizontalAnchor("row2", HorizontalAlign.Start)
                        )
                    ).id("row3")
                    Row()
                    .backgroundColor(0xFF9966)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("row3", VerticalAlign.Bottom),
                            bottom: VerticalAnchor("__container__", VerticalAlign.Bottom),
                            left: HorizontalAnchor("__container__", HorizontalAlign.Start),
                            right: HorizontalAnchor("row1",  HorizontalAlign.End)
                        )
                    ).id("row4")
                    Row()
                    .backgroundColor(0xff3333)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("row3", VerticalAlign.Bottom),
                            bottom: VerticalAnchor("__container__", VerticalAlign.Bottom),
                            left: HorizontalAnchor("row2", HorizontalAlign.Start),
                            right: HorizontalAnchor("__container__",  HorizontalAlign.End)
                        )
                    ).id("row5")
                }
                .width(300).height(300)
                .margin(left: 50.vp)
                .border(width: 2.vp, color: Color(0x6699ff))
            }.height(100.percent)
        }
    }

容器内子组件设置margin的用法

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    import std.collection.*
    
    @Entry
    @Component
    class MyView {
        func build() {
            Row() {
                RelativeContainer() {
                    Row().width(100).height(100)
                    .backgroundColor(0xff3333)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("__container__", VerticalAlign.Top),
                            left: HorizontalAnchor("__container__", HorizontalAlign.Start)
                        )
                    ).id("row1")
                    .margin(10)
                    Row().width(100).height(100)
                    .backgroundColor(0xFFCC00)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("row1", VerticalAlign.Top),
                            left: HorizontalAnchor("row1", HorizontalAlign.End)
                        )
                    ).id("row2")
                    Row().height(100).width(100)
                    .backgroundColor(0xFF6633)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("row1", VerticalAlign.Bottom),
                            left: HorizontalAnchor("row1", HorizontalAlign.Start)
                        )
                    ).id("row3")
                    Row().width(100).height(100)
                    .backgroundColor(0xFF9966)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("row2", VerticalAlign.Bottom),
                            left: HorizontalAnchor("row3", HorizontalAlign.End),
                        )
                    ).id("row4")
                    .margin(10)
                }
                .width(300).height(300)
                .margin(left: 50.vp)
                .border(width: 2.vp, color: Color(0x6699ff))
            }.height(100.percent)
        }
    }

bias的用法

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    import std.collection.*
    
    @Entry
    @Component
    class MyView {
        func build() {
            Row() {
                RelativeContainer() {
                    Row().width(100).height(100).backgroundColor(0xff3333).alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("__container__", VerticalAlign.Top),
                            bottom: VerticalAnchor("__container__", VerticalAlign.Bottom),
                            left: HorizontalAnchor("__container__", HorizontalAlign.Start),
                            right: HorizontalAnchor("__container__", HorizontalAlign.End),
                            bias: Bias(vertical: 0.3)
                        )
                    ).id("row1")
                }
                .width(300).height(300)
                .margin(left: 50.vp)
                .border(width: 2.vp, color: Color(0x6699ff))
            }.height(100.percent)
        }
    }

guideline的声明和以guideline为锚点的用法

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    import std.collection.*
    
    @Entry
    @Component
    class MyView {
        func build() {
            Row() {
                RelativeContainer() {
                    Row().width(100).height(100).backgroundColor(0xff3333).alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("guideline2", VerticalAlign.Top),
                            left: HorizontalAnchor("guideline1", HorizontalAlign.End),
                        )
                    ).id("row1")
                }.width(300).height(300).margin(left: 50.vp).border(width: 2.vp, color: Color(0x6699ff))
                .guideLine(
                    [GuideLineStyle("guideline1", Axis.Vertical, GuideLinePosition(start: 50.vp)),
                    GuideLineStyle("guideline2", Axis.Horizontal, GuideLinePosition(start: 50.vp))])
            }.height(100.percent)
        }
    }

barrier的声明和以barrier为锚点的用法

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    import std.collection.*
    
    @Entry
    @Component
    class MyView {
        func build() {
            Row() {
                RelativeContainer() {
                    Row().width(100).height(100)
                    .backgroundColor(0xff3333)
                    .id("row1")
    
                    Row().width(100).height(100)
                    .backgroundColor(0xFFCC00)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("row1", VerticalAlign.Bottom),
                            middle: HorizontalAnchor("row1", HorizontalAlign.End)
                        )
                    ).id("row2")
    
                    Row().height(100).width(100)
                    .backgroundColor(0xFF6633)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("row1", VerticalAlign.Top),
                            left: HorizontalAnchor("barrier1", HorizontalAlign.End)
                        )
                    ).id("row3")
    
                    Row().width(50).height(50)
                    .backgroundColor(0xFF9966)
                    .alignRules(
                        AlignRuleOption(
                            top: VerticalAnchor("barrier2", VerticalAlign.Bottom),
                            left: HorizontalAnchor("row1", HorizontalAlign.Start),
                        )
                    ).id("row4")
                }.width(300).height(300)
                .margin(left: 50.vp)
                .border(width: 2.vp, color: Color(0x6699ff))
                .barrier(
                    [BarrierStyle("barrier1", BarrierDirection.RIGHT, ["row1", "row2"]),
                    BarrierStyle("barrier2", BarrierDirection.BOTTOM, ["row1", "row2"])])
            }.height(100.percent)
        }
    }

如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！

技术交流群可加wx“LB-9191”备注cangjie