HarmonyOS RelativeContainer、List组件怎么实现自适应内容高度

@Entry
@Component
struct MainPage {
    @State private items: string[] = ["Item 1", "Item 2", "Item 3"];

    build() {
        Column({ space: 20 }) {
            // RelativeContainer 自适应高度
            Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Stretch }) {
                RelativeContainer() {
                    Text("This is a RelativeContainer")
                        .fontSize(16)
                        .layoutConfig(RelativeLayoutConfig.TIGHT)
                    
                    // 添加更多内容，以演示高度自适应
                    for (let i = 0; i < 10; i++) {
                        Text(`Content ${i + 1}`)
                            .fontSize(14)
                            .margin({ top: 16 })
                            .layoutConfig(RelativeLayoutConfig.CENTER_IN_PARENT)
                    }
                }
                .backgroundColor(Color.Grey)
            }

            // List 自适应高度
            Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Stretch }) {
                List({ space: 10 }) {
                    for (let item of this.items) {
                        ListItem() {
                            Text(item)
                                .fontSize(16)
                        }
                    }
                }
                .height('auto') // 关键是设置为 'auto'，使其高度自适应内容
                .backgroundColor(Color.LightGrey)
            }
        }
        .padding(20)
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

@Entry  
@Component  
struct page240426095248022 {  
  build() {  
    Column() {  
      // 外层套Scroll组件可以使横向滚动的list高度自适应，scroll高度无穷大，list组件不能继承scroll的高度无穷大，所以会根据子组件高度自适应  
      // Scroll() {  
      // List() {  
      // ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (index: number) => {  
      // ListItem() {  
      // Text(`tab_${index}`)  
      // .padding({ left: 10, top: 8, right: 10, bottom: 8 })  
      // }  
      // })  
      // }  
      // .listDirection(Axis.Horizontal)  
      // .backgroundColor('#ff0000')  
      // .margin({ top: 60 })  
      // }  
  
      // 使用layoutWeight,需要父组件设置高度  
      List() {  
        ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (index: number) => {  
          ListItem() {  
            Text(`tab_${index}`)  
              .padding({ left: 10, top: 8, right: 10, bottom: 8 })  
          }  
        })  
      }  
      .listDirection(Axis.Horizontal)  
      .backgroundColor('#ff0000')  
      .margin({ top: 60 })  
      .layoutWeight(1)  
  
      Stack() {  
        Text('内容')  
      }  
      .width('100%')  
  
    }.width('100%')  
    // .height('100%')  
  
    .backgroundColor('#FF15B3B3')  
  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.