鸿蒙界面开发（五）：相对布局

相对布局RelativeContainer

相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。子元素支持指定兄弟或父元素作为锚点，基于锚点做相对位置布局。
锚点：通过锚点设置当前元素基于哪个元素确定位置。
对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。

设置依赖关系——alignRules属性

锚点设置——anchor参数

在水平方向上，可以设置left、middle、right（左中右）的锚点。
在竖直方向上，可以设置top、center、bottom（上中下）的锚点。
为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“container”，其余子元素的ID通过id属性设置。
不设置id的组件能显示，但是不能被其他子组件作为锚点，相对布局容器会为其拼接id，此id的规律无法被应用感知。
互相依赖，环形依赖时容器内子组件全部不绘制。
同方向上两个以上位置设置锚点，但锚点位置逆序时此子组件大小为0，即不绘制。？？？

RelativeContainer父组件为锚点，__container__代表父容器的ID。
//定义子元素依赖关系
let AlignRus:Record<string,Record<string,string|VerticalAlign|HorizontalAlign>> = {
  'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
  'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
}
//组件属性的另一种写法
let Mleft:Record<string,number> = { 'left': 20 }
let BWC:Record<string,number|string> = { 'width': 2, 'color': '#6699FF' }
RelativeContainer() {
  Row(){Text('row1')}.justifyContent(FlexAlign.Center).width(100).height(100)
    .backgroundColor("#FF3333")
    .alignRules(AlignRus)//应用依赖关系
     // .alignRules({
      //top: {anchor: "__container__", align: VerticalAlign.Top},
      //left: {anchor: "__container__", align: HorizontalAlign.Start}
    //})
    .id("row1")//id
    }.width(300).height(300)
.margin(Mleft)
.border(BWC)

以兄弟元素为锚点。

//定义依赖规则，相对于兄弟节点的位置
let RelConB:Record<string,Record<string,string|VerticalAlign|HorizontalAlign>> = {
  'top': { 'anchor': 'row1', 'align': VerticalAlign.Bottom },
  'left' : { 'anchor': 'row1', 'align': HorizontalAlign.Start }
}

子组件锚点可以任意选择，但需注意不要相互依赖。

设置相对于锚点的对齐位置——align参数

在水平方向上，对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。
在竖直方向上，对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。

子组件位置偏移——offset属性

子组件经过相对位置对齐后，位置可能还不是目标位置，开发者可根据需要进行额外偏移设置offset。

Row(){Text('row4')}.justifyContent(FlexAlign.Center)
   .backgroundColor("#FF9966")
   .alignRules({
     top: {anchor: "row3", align: VerticalAlign.Bottom},
     bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
     left: {anchor: "__container__", align: HorizontalAlign.Start},
     right: {anchor: "row1", align: HorizontalAlign.End}
   })
   .offset({
     x:-10,
     y:-30
   })
   .id("row4")

多种组件的对齐布局

Row、Column、Flex、Stack等多种布局组件，可按照RelativeContainer组件规则进行对其排布。

组件尺寸

子组件尺寸大小不会受到相对布局规则的影响。
若子组件某个方向上设置两个或以上alignRules时最好不设置此方向尺寸大小，否则对齐规则确定的组件尺寸与开发者设置的尺寸可能产生冲突。