!12915 修改relativeContainer示例代码

Merge pull request !12915 from xiexiyun/relative_container

zh-cn/application-dev/reference/arkui-ts/ts-container-relativecontainer.md

@@ -16,7 +16,7 @@
  * 子组件可以将容器或者其他子组件设为锚点：  
    * 参与相对布局的容器内组件必须设置id，不设置id的组件不显示，容器id固定为__container__。
    * 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个。
-   * 前端页面设置的子组件尺寸大小不会受到相对布局规则的影响。
+   * 前端页面设置的子组件尺寸大小不会受到相对布局规则的影响。子组件某个方向上设置两个或以上alignRules时不建议设置此方向尺寸大小。
    * 对齐后需要额外偏移可设置offset。
  * 特殊情况
    * 互相依赖，环形依赖时容器内子组件全部不绘制。
@@ -38,62 +38,65 @@ RelativeContainer()
 @Component
 struct Index {
   build() {
-    Row() {
-      Button("Extra button").width(100).height(50)
-
-      RelativeContainer() {
-        Button("Button 1")
-          .width(120)
-          .height(30)
-          .alignRules({
-            middle: { anchor: "__container__", align: HorizontalAlign.Center },
-          })
-          .id("bt1")
-          .borderWidth(1)
-          .borderColor(Color.Black)
-
-        Text("This is text 2")
-          .fontSize(20)
-          .padding(10)
-          .alignRules({
-            bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
-            top: { anchor: "bt1", align: VerticalAlign.Bottom },
-            right: { anchor: "bt1", align: HorizontalAlign.Center }
-          })
-          .id("tx2")
-          .borderWidth(1)
-          .borderColor(Color.Black)
-          .height(30)
-
-        Button("Button 3")
-          .width(100)
-          .height(100)
-          .alignRules({
-            left: { anchor: "bt1", align: HorizontalAlign.End },
-            top: { anchor: "tx2", align: VerticalAlign.Center },
-            bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
-          })
-          .id("bt3")
-          .borderWidth(1)
-          .borderColor(Color.Black)
-
-        Text("This is text 4")
-          .fontSize(20)
-          .padding(10)
-          .alignRules({
-            left: { anchor: "tx2", align: HorizontalAlign.End },
-            right: { anchor: "__container__", align: HorizontalAlign.End },
-            top: { anchor: "__container__", align: VerticalAlign.Top },
-            bottom: { anchor: "bt3", align: VerticalAlign.Top }
-          })
-          .id("tx4")
-          .borderWidth(1)
-          .borderColor(Color.Black)
+    @Entry
+    @Component
+    struct Index {
+      build() {
+        Row() {
+
+          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")
+          }
+          .width(300).height(300)
+          .margin({left: 100})
+          .border({width:2, color: "#6699FF"})
+        }
+        .height('100%')
       }
-      .width(200).height(200)
-      .backgroundColor(Color.Orange)
     }
-    .height('100%')
   }
 }
 ```