HarmonyOS 如何实现左右两个Row的高度一致？

Question

如何实现左右两个Row的高度一致，左边Row高度随着右边Row的高度变化

Answer 1

可以使用onAreaChange获取右边Row的高度，设置左侧的高度，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5\#onareachange

可以参考demo：

@Component
@Entry
struct Index{
  @State lineHeight:Length=20;
  build(){
    Row(){
      Column(){
        Line()
          .stroke('#CCCCCC')
          .startPoint([0,0])
          .endPoint([0,this.lineHeight])
          .stroke(Color.Red)
          .strokeWidth(5)
          .strokeDashArray([10,3])
          .height(this.lineHeight)
          .width(5)
      }
      Column(){
        Text('右侧组件区域').fontSize(20)
      }
      .onAreaChange((oldValue:Area,newValue:Area)=>{
        this.lineHeight=newValue.height
      })
      .height(100)
      .layoutWeight(1)
      .backgroundColor(Color.Gray)
    }
    .width('100%')
  }
}