RelativeContainer布局的应用

以容器和组件作为锚点布局、设置 margin、容器大小适应内容、bias 的用法、guideline 和 barrier 的声明及用法、不同链模式（SPREAD、SPREAD_INSIDE、PACKED 等）的实现等多个示例。

我就举两个例子锚点布局、bias 的用法

锚点布局

      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor("#FF3333")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            left: {anchor: "__container__", align: HorizontalAlign.Start}
          })
          .id("row1")

        Row().width(100).height(100)
          .backgroundColor("#FFCC00")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            right: {anchor: "__container__", align: HorizontalAlign.End}
          })
          .id("row2")

        Row().height(100)
          .backgroundColor("#FF6633")
          .alignRules({
            top: {anchor: "row1", align: VerticalAlign.Bottom},
            left: {anchor: "row1", align: HorizontalAlign.End},
            right: {anchor: "row2", align: HorizontalAlign.Start}
          })
          .id("row3")

        Row()
          .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}
          })
          .id("row4")

        Row()
          .backgroundColor("#FF66FF")
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
            left: {anchor: "row2", align: HorizontalAlign.Start},
            right: {anchor: "__container__", align: HorizontalAlign.End}
          })
          .id("row5")
      }

1. RelativeContainer(): 定义了一个相对布局容器，允许子组件相对于彼此或容器本身定位。

2. Row(): 定义了一个行组件，可以包含在RelativeContainer中。每个Row组件代表一个水平布局的条目。

3. .width() 和 .height(): 设置组件的宽度和高度。

4. .backgroundColor(): 设置组件的背景颜色。

5. .alignRules(): 定义组件的对齐规则，包括相对于哪个锚点（anchor）以及对齐方式（如顶部对齐Top、底部对齐Bottom、开始对齐Start、结束对齐End、中心对齐Center）。

6. .id(): 为组件设置一个唯一的标识符。

bias 的用法

 Row() {
      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor("#FF3333")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            bottom : {anchor : "__container__", align : VerticalAlign.Bottom},
            left: {anchor: "__container__", align: HorizontalAlign.Start},
            right : {anchor : "__container__", align: HorizontalAlign.End},
            bias : {vertical : 0.3}
          })
          .id("row1")
      }
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
    }