HarmonyOS 鸿蒙Next：如何实现父元素高度不固定，子元素自适应

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：如何实现父元素高度不固定，子元素自适应

具体为不设置父元素高度，但设置最大高度80%和最小高度50%，其中三个子元素，中间的元素自适应，如果父元素高度超出80%，则超出部分中间元素区滚动展示

但是现在当中间区域内容过多时，父元素高度还是保持50%

具体代码：

@Entry
@Component
export struct Second {
  private arr: number[] = [0, 1, 2, 3, 4, 5，6]
  build() {
    Column() {
      Row() {
        Text(‘top’)
      }.width(‘100%’).backgroundColor(‘red’)
      Row() {
        Row() {
          Scroll() {
            Column() {
              ForEach(this.arr, (item: number) => {
                Row() {
                  Text(’’ + item)
                    .width(‘100%’).height(100).fontSize(16)
                    .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
                }
              }, (item: string) => item)
            }
          }.padding({
            left: ‘24’,
            right: ‘24’
          })
        }
      }.layoutWeight(1)
      Row() {
        Text(‘bottom’)
      }.width(‘100%’).backgroundColor(‘blue’)
    }
    .width(‘100%’)
    .backgroundColor(‘yellow’)
    .constraintSize({ minHeight: ‘50%’, maxHeight: ‘88%’ })
  }
}

Harmonyos Next教程
6 回复
首先，将最外层的Column设置高度为100%，其次，Row去掉layoutWeight(1)属性，然后测试效果。

当Scroll()里面的元素过多时，没有问题，父元素显示最高88%，但是当子元素过少时，父元素高度还是88%，此时父元素想要的效果高度为50%

不好意思，之前没太在意，不过在上下两个Row高度确定、外层Column不设置高度的情况下，可以使用计算特性来做，如设置上下两个Row的高度均为100vp： Column() { Row().height(100) Row().constraintSize({ minHeight: ‘calc(50% - 200vp)’, maxHeight: ‘calc(88% - 200vp)’ }) Row().height(100) }.constraintSize({ minHeight: ‘50%’, maxHeight: ‘88%’ })

上下两个Row高度是不确定的，我这里为了写个例子才固定了高度

DevEco 3.1.1 Release, API 9环境下测试预览器和真机中显示父容器占用88%，如尺寸约束最大值，中间组件有.layoutWeight(1)应当是充满父容器剩余空间使之实际高度为约束最大值，且中间列表项较多时可滑动无异常。

另外中间组件有多层不必要Row嵌套(除非另有布局安排)，可简化如下(添加了背景色以方便分辨各子组件)：

    Scroll() {
      Column() {
        ForEach(this.arr, (item: number, index: number) => {
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .backgroundColor(index % 2 == 0 ? Color.Yellow : Color.Pink)
              .textAlign(TextAlign.Center).borderRadius(10)
        }, (item: string) => item)
      }
    }.padding({
      left: '24',
      right: '24'
    })
    .width('100%').layoutWeight(1)
    .backgroundColor(Color.Brown)

NEXT没有测试环境，不确定是否尺寸约束有bug。

在HarmonyOS鸿蒙Next开发中，若要实现父元素高度不固定且子元素自适应，可以通过以下几种方式实现：

  1. Flexbox布局：使用Flexbox布局模型，父容器设置为flex容器（flex-direction、justify-content、align-items等属性控制布局），子元素则默认会自适应父容器的高度。确保父容器的height属性不设置固定值，或使用height: auto。

  2. Grid布局：Grid布局同样可以实现高度自适应。父容器使用display: grid，并定义网格模板（grid-template-rows、grid-template-columns等），子元素会自动填充网格单元，根据父容器的高度变化而自适应。

  3. 绝对定位与百分比高度：在某些情况下，可以结合绝对定位与百分比高度来实现。父容器不设置固定高度，子元素使用百分比高度（height: xx%），同时确保父容器的height属性不是0或auto之外的无效值。

  4. CSS变量与JavaScript动态调整：对于更复杂的需求，可以使用CSS变量结合JavaScript动态调整父容器和子元素的高度，实现更灵活的自适应效果。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部