HarmonyOS 自适应父组件高度问题

UI设计中一个列表的列表项有个结构是列表项为左右结构，列表项的高度由右侧高度决定(右侧高度由右侧子组件高度决定)，左侧显示一条垂直的虚线(高度与右侧高度相同)，碰到的问题是如果给给左侧设置.height(‘100%’)会导致父组件高度超出右侧高度，如果左侧不设height，则虚线没高度显示。请教，HarmonyOS的布局如何实现，高度由右侧决定，左侧高度依据右侧自适应，左侧要显示一根宽度1，高度填满的虚线

咨询场景描述：样例代码如下：

@Component 
export struct K24PageListItemComponent { 
 
  build() { 
    Row() { 
      Column() { 
        Line() 
          .stroke('#CCCCCC') 
          .strokeWidth(1) 
          .strokeDashArray([10, 3]) 
          .strokeLineCap(LineCapStyle.Round) 
          .backgroundColor(Color.Transparent) 
          .width(30) 
          .height(Const.FULL_PERCENT) 
      } 
      .backgroundColor(Color.Brown) 
      .width(30) 
 
      Column() { 
        Text('右侧组件区域').fontSize(20) 
      } 
      .height(100) 
      .layoutWeight(1) 
      .backgroundColor(Color.Gray) 
    } 
    .width(Const.FULL_PERCENT) 
  } 
}

HarmonyOS

put_get

2024-08-08 18:10:34

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

可以使用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%') 
  } 
}

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-component-area-change-event-0000001820880805#ZH-CN_TOPIC_0000001820880805__onareachange

2024-08-08 20:58:13

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 自适应父组件高度问题

订阅鸿蒙技术特刊，精选内容抢先看