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的高度为撑满,不符合预期

阅读 670
1 个回答

请参考以下示例:

@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组件设置相互垂直的主轴方向可以满足

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进