HarmonyOS 如何让row的高度或者column的宽度自适应

@Entry
@Component
struct demo1 {
  @State arr: Array<number> = [0,1,2,3,4,5]

  build() {
    Column() {
      Row(){
        Column() {
          List({scroller: new Scroller()}) {
            ForEach(this.arr, (item:number) => {
              ListItem() {
                Text(item.toString())
                  .padding(12)
                  .margin(2)
                  .backgroundColor(Color.Gray)
              }
            })
          }.backgroundColor(Color.Green)
          .listDirection(Axis.Horizontal)
        }
        .alignItems(HorizontalAlign.Start)
        .height('auto')
        .layoutWeight(1)
        .backgroundColor(Color.Yellow)

        Text("end").padding(12).backgroundColor(Color.Blue)
      }.width('100%').backgroundColor(Color.Pink)
    }
    .width('100%')
    .height(100)
  }
}

上述代码，在column中嵌入横向List之后，整个Row的宽度会显示为父容器的高度，期望是为内容的高度运行效果中，每个list item的高度为灰色，符合预期，但是List的高度为撑满，不符合预期

HarmonyOS

zbw_apple

2天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

shlp

请参考以下示例：

@Entry
@Component
struct demo1 {
  @State arr: Array<number> = [0,1,2,3,4,5]

  build() {
    Column() {
      Row(){
        Scroll() {
          List({scroller: new Scroller()}) {
            ForEach(this.arr, (item:number) => {
              ListItem() {
                Text(item.toString())
                  .padding(12)
                  .margin(2)
                  .backgroundColor(Color.Gray)
              }
            })
          }.backgroundColor(Color.Green)
          .listDirection(Axis.Horizontal)
        }
        .backgroundColor(Color.Yellow)

        Text("end").padding(12).backgroundColor(Color.Blue)
      }.width('100%').backgroundColor(Color.Pink)
    }
    .width('100%')
    .height(100)
  }
}

确认规格, list交叉轴方向上的宽度继承关系, 当父组件无穷大的时候, 继承子组件的宽度, 否则继承父组件的宽度

当前问题, list组件外部用scroll组件设置相互垂直的主轴方向可以满足