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)
  }
}
  • 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.

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

HarmonyOS
2024-12-24 16:20:00
浏览
收藏 0
回答 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)
  }
}
  • 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.

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

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

分享
微博
QQ
微信
回复
2024-12-24 18:53:58


相关问题
HarmonyOS web高度自适应内容高度
740浏览 • 1回复 待解决
HarmonyOS 如何实现自适应web高度
297浏览 • 1回复 待解决
HarmonyOS 高度自适应问题
726浏览 • 1回复 待解决
HarmonyOS grid如何自适应宽度
538浏览 • 1回复 待解决
HarmonyOS 高度自适应
743浏览 • 1回复 待解决
HarmonyOS RichText自适应高度
440浏览 • 1回复 待解决
HarmonyOS popup宽度自适应
362浏览 • 1回复 待解决
HarmonyOS RichText能否自适应高度
375浏览 • 1回复 待解决
HarmonyOS webview高度不能自适应
352浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
1267浏览 • 1回复 待解决
HarmonyOS RelativeContainer无法自适应高度
913浏览 • 1回复 待解决
HarmonyOS Image如何设置内容宽度自适应
445浏览 • 1回复 待解决
HarmonyOS List高度根据内容自适应
620浏览 • 1回复 待解决
HarmonyOS Grid高度根据内容自适应
475浏览 • 1回复 待解决