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
2024-08-08 18:10:34
浏览
收藏 0
回答 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

分享
微博
QQ
微信
回复
2024-08-08 20:58:13
相关问题
HarmonyOS web组件自适应高度问题
1023浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
764浏览 • 1回复 待解决
HarmonyOS 高度自适应问题
340浏览 • 1回复 待解决
HarmonyOS GridItem自适应高度问题
416浏览 • 1回复 待解决
HarmonyOS Grid自适应高度和拖拽问题
536浏览 • 1回复 待解决
HarmonyOS 高度自适应
251浏览 • 1回复 待解决
HarmonyOS RelativeContainer无法自适应高度
359浏览 • 1回复 待解决
Grid组件如何实现高度自适应
3261浏览 • 1回复 待解决
Web组件如何实现高度自适应
1055浏览 • 1回复 待解决
HarmonyOS web的高度自适应内容的高度
76浏览 • 1回复 待解决
HarmonyOS Grid高度根据内容自适应
55浏览 • 1回复 待解决
HarmonyOS RelativeContainer宽高自适应问题
634浏览 • 1回复 待解决