HarmonyOS 鸿蒙Next中关于List组件的height属性问题

【解决方案】

开发者您好，这个其实是个警告不影响的实际的使用的，如果您没有初始化高度List组件会自适应高度但是这会导致在某些情况下显示不全，您可以设置一下layoutWeight属性（需要父组件设置固定高度）这样List组件就可以和兄弟组件按权重分配父组件尺寸。

也可以参考一下下面List根据其中ListItem的高度进行高度的自适应的案例： 1、通过给ListItem添加onAreaChange事件，通过回调获取每个ListItem组件的高度，通过对比将最大值赋值给List组件的height属性，使用示例如下：

@Entry
@Component
struct listDemoFirst {
  private arr: string[] = ['这是一段文本', '这是一段文本这是一段文本',
    '这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本',
    '3', '4',
    '这是一段文本这是一段文本', '这是一段文本', '这是一段文本', '这是一段文本', '这是一段文本这是一段文本这是一段文本'];
  @State sizeValue: number = 0;

  build() {
    Row() {
      List() {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Text(item)
              .width('40%')
              .height('auto')
              .fontSize(16)
              .border({ width: 1 })
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
              .onAreaChange((oldValue: Area, newValue: Area) => {
                if (Number(newValue.height) > Number(this.sizeValue)) {
                  this.sizeValue = Number(newValue.height)
                }
              })
          }
        }, (item: string) => item)
      }
      // 排列方向
      .scrollBar(BarState.Auto)
      .backgroundColor(Color.Gray)
      .width('100%')
      .height(this.sizeValue)
    }.width('100%').padding({ top: 5 })
  }
}

2、在父容器高度受限的场景下，可通过List组件的constraintSize属性设置maxHeight参数控制最大高度，实现动态伸缩布局。示例代码如下：

@Entry
@Component
struct Index {
  @State itemHeight: number = 200;

  build() {
    Column() {
      Column() {
        Text('内容1')
        Button('改变ListItem2高度').onClick(() => {
          this.itemHeight = this.itemHeight === 200 ? 900 : 200;
        })
      }
      .width('100%').height(100).backgroundColor('#F1F3F5')

      List() {
        ListItem() {
          Text('ListItem1')
        }

        ListItem() {
          Text('ListItem2')
        }
        .height(this.itemHeight)
      }
      .divider({ strokeWidth: 1, color: '#000' })
      .constraintSize({ maxHeight: 'calc(100% - 200vp)' })

      Column() {
        Text('内容2')
      }
      .width('100%').height(100).backgroundColor('#F1F3F5')
    }
    .width('100%')
    .height('100%')
  }
}

【背景知识】

• List是用于展示动态数据集合的核心组件，支持滚动、动态更新等特性。
• onAreaChange事件在组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。可以使用该组件获取组件的高度。
• constraintSize设置约束尺寸，组件布局时，进行尺寸范围限制。