如何通过RelativeContainer实现列表的统一格式布局
================================

#### 问题现象

使用RelativeContainer组件开发时，希望通过RelativeContainer实现统一格式的列表展示布局，但出现无法根据子组件大小自适应，存在撑满父组件、全屏、尺寸显示异常等问题，该如何实现？

#### 背景知识

[RelativeContainer](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-relativecontainer)为相对布局组件，用于元素对齐的布局。其支持容器内部的子组件设置相对位置关系，对多个子组件进行对齐和排列。子组件可以指定兄弟组件或父容器作为锚点，基于锚点进行相对位置布局。

#### 解决方案

RelativeContainer作为子组件不设置高度时，默认撑满父组件布局，导致全屏问题，通过给RelativeContainer设置height('auto')属性自适应子组件高度解决。使用[onAreaChange](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-component-area-change-event#onareachange)事件动态获取并设置对应组件宽高属性，然后实时渲染，达到预期布局效果。示例代码如下：

@Entry
@Component
struct AdjustComponentSizeByAreaChange17 {
  @State knowLedgeList: string\[\] = \['1', '2', '3', '4', '5', '6', '7', '8'\];
  @State heightArr: number\[\] = \[\];


  build() {
    Column() {
      List() {
        ForEach(this.knowLedgeList, (index: number) => {
          ListItem() {
            RelativeContainer() {
              Line()
                .width(0.5)
                .height(this.heightArr\[index\] + 2)
                .backgroundColor(Color.Black)
                .id(\`line${index}\`)
                .margin({ left: 20, top: 0 })
                .offset({ x: 0, y: 8 });
              Text(\`mode${index}：RelativeContainer统一格式列表展示\`)
                .fontSize(25)
                .offset({ x: 20, y: 0 })
                .margin({ right: 50 })
                .alignRules({
                  top: { anchor: \`line${index}\`, align: VerticalAlign.Top },
                  left: { anchor: \`line${index}\`, align: HorizontalAlign.End },
                })
                .onAreaChange((oldValue: Area, newValue: Area) => {
                  this.heightArr\[index\] = Number(newValue.height);
                });
              Text('')
                .offset({ x: -10, y: 8 })
                .backgroundColor(Color.Green)
                .width('20.00vp')
                .height('20.00vp')
                .borderRadius(40)
                .alignRules({
                  top: { anchor: \`line${index}\`, align: VerticalAlign.Top },
                  left: { anchor: \`line${index}\`, align: HorizontalAlign.Start },
                });
            }
            .height('auto')
            .margin({ left: 10, right: 10 });


          };
        });
      }
      .width('100%')
      .height('100%')
      .margin({ top: 10, left: 10 });
    };
  }
}

显示效果如下图所示：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/db/v3/J37349nCRry6o6u-1s8_ZQ/zh-cn_image_0000002658972599.png?HW-CC-KV=V1&HW-CC-Date=20260709T134026Z&HW-CC-Expire=86400&HW-CC-Sign=C34E1DF879B910A564DD18816DC94E163BEB794B94110C598E71DAB52021E917 "点击放大")

#### 常见FAQ

Q：RelativeContainer高度默认不是auto吗？

A：请参考[RelativeContainer](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-relativecontainer)说明中的第三点。