鸿蒙Next开发中arkts两个容器都是自适应高度，如何以其中一个的高度为准呢

在鸿蒙Next开发中，使用ArkTS布局时遇到一个问题：两个容器都设置了自适应高度（height(‘100%’)或类似属性），但实际运行时它们的高度会根据各自内容动态变化。现在需要让其中一个容器的高度固定为另一个容器的高度（比如以左侧容器高度为准，右侧容器同步匹配），该怎样实现？尝试过绑定高度属性但会出现循环引用的问题，有没有更优雅的解决方案？

2 回复

简单！用 onAreaChange 监听其中一个容器的高度变化，然后动态设置另一个容器的高度为相同值。就像让两个兄弟穿同款裤子，一个量好尺寸，另一个照着买就行！

更多关于鸿蒙Next开发中arkts两个容器都是自适应高度，如何以其中一个的高度为准呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next的ArkTS开发中，如果两个容器都是自适应高度，可以通过以下方式以其中一个的高度为准：

方法一：使用 Flex 布局（推荐）

@Component
struct MyComponent {
  build() {
    Column() {
      // 第一个容器（作为高度基准）
      Column() {
        Text('基准容器')
          .fontSize(20)
      }
      .width('100%')
      .backgroundColor(Color.Pink)
      .alignItems(HorizontalAlign.Start)

      // 第二个容器（跟随第一个容器高度）
      Column() {
        Text('跟随容器')
          .fontSize(16)
      }
      .width('100%')
      .backgroundColor(Color.Gray)
      .flexGrow(1)  // 关键：填充剩余空间
    }
    .height('100%')
    .justifyContent(FlexAlign.Start)
  }
}

方法二：使用 Stack 布局

@Component
struct MyComponent {
  @State baseHeight: number = 0

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      // 基准容器
      Column() {
        Text('基准容器内容')
      }
      .width('100%')
      .onAreaChange((oldArea, newArea) => {
        this.baseHeight = newArea.height
      })

      // 跟随容器
      Column() {
        Text('跟随容器内容')
      }
      .width('100%')
      .height(this.baseHeight)  // 动态设置相同高度
      .margin({ top: this.baseHeight })  // 位置偏移
    }
    .width('100%')
    .height('100%')
  }
}

关键点说明：

  1. Flex 布局：通过 flexGrow(1) 让第二个容器填充剩余空间，实际高度会与第一个容器保持一致
  2. Stack 布局：通过 onAreaChange 监听第一个容器高度变化，动态设置第二个容器高度
  3. 建议优先使用 Flex 布局，性能更好且代码更简洁

根据具体场景选择合适的方法即可实现高度统一。

回到顶部