Relative Container :相对容器.
RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局
它的布局很灵活，可以很方便的控制各个子UI 组件的相对位置,类似android 的约束布局ConstraintLayout
相对布局分为垂直方向和水平方向,在这两个方向的基础上又分为上下左右四个属性,所以我们布局的时候设置垂直和水平然后再根据上下左右布局即可.
在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。
注意:
-
middle 水平居中 HorizontalAlign.Center
-
center 垂直居中 VerticalAlign.Center
解释
-
锚点：通过锚点设置当前元素基于哪个元素确定位置。
__container__代表父容器的ID -
对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。
alignRules:设置对齐方式( AlignRuleOption )
AlignRuleOption 对齐规则选项
// 定义对齐规则选项的接口
declare interface AlignRuleOption {
// 左对齐的参数，可选属性
left?: {
// 锚点标识，用于指定对齐的参考元素
anchor: string;
// 水平对齐方式，具体类型由 HorizontalAlign 定义
align: HorizontalAlign;
};
// 右对齐的参数，可选属性
right?: {
// 锚点标识，用于指定对齐的参考元素
anchor: string;
// 水平对齐方式，具体类型由 HorizontalAlign 定义
align: HorizontalAlign;
};
// 顶部对齐的参数，可选属性
top?: {
// 锚点标识，用于指定对齐的参考元素
anchor: string;
// 垂直对齐方式，具体类型由 VerticalAlign 定义
align: VerticalAlign;
};
// 底部对齐的参数，可选属性
bottom?: {
// 锚点标识，用于指定对齐的参考元素
anchor: string;
// 垂直对齐方式，具体类型由 VerticalAlign 定义
align: VerticalAlign;
};
// 居中对齐的参数，可选属性
center?: {
// 锚点标识，用于指定对齐的参考元素
anchor: string;
// 垂直对齐方式，具体类型由 VerticalAlign 定义
align: VerticalAlign;
};
// 中间对齐的参数，可选属性
middle?: {
// 锚点标识，用于指定对齐的参考元素
anchor: string;
// 水平对齐方式，具体类型由 HorizontalAlign 定义
align: HorizontalAlign;
};
// 定义水平和垂直方向的偏移比例，可选属性
bias?: Bias;
}
示例
@Entry
@Component
struct Index {
build() {
RelativeContainer() {
Text('text1').width(100).height(100)
.backgroundColor('#a3cf62')
//设置子控件的对齐方式
.alignRules({
// top 顶部对齐方式 anchor:锚点位置(__container__表示父容器) align: VerticalAlign.Top 对齐方式
top: {anchor: "__container__", align: VerticalAlign.Top},
left: {anchor: "__container__", align: HorizontalAlign.Start}
})
.id("text1")
Text('text2').justifyContent(FlexAlign.Center).width(100)
.backgroundColor('#00ae9d')
.alignRules({
top: {anchor: "__container__", align: VerticalAlign.Top},
right: {anchor: "__container__", align: HorizontalAlign.End},
bottom: {anchor: "text1", align: VerticalAlign.Center},
})
.id("text2")
Row(){Text('row3')}.justifyContent(FlexAlign.Center).height(100)
.backgroundColor('#0a59f7')
.alignRules({
top: {anchor: "text1", align: VerticalAlign.Bottom},
left: {anchor: "text1", align: HorizontalAlign.Start},
right: {anchor: "text2", align: HorizontalAlign.Start}
})
.id("row3")
}
.width(300).height(300)
.margin({left: 50})
.border({width:2, color: "#6699FF"})
}
}
总结
RelativeContainer 相对布局,子控件能控制自己在布局中的相对位置.
-
anchor:表示锚点 container 表示对于父控件(id表示相对其他子控件)
-
align:表示对齐方式
