HarmonyOS鸿蒙Next中RelativeContainer如何自适应高度

HarmonyOS鸿蒙Next中RelativeContainer如何自适应高度

List({ scroller: this.scroller }) { // 设置列表项间距[2](@ref)
  ForEach(this.processList, (item: AlarmProcessLog, index: number) => {
    ListItem() {
      RelativeContainer() {
        Column() {
          Divider().width(2).backgroundColor("#6CB8F9").vertical(true).height(20)
          Image($r("app.media.alarm_process")).fitOriginalSize(true).width(40).height(40)
          Divider().width(2).backgroundColor("#6CB8F9").vertical(true)
        }.id("left").margin({ left: 20, right: 20 }).alignRules({
          // 'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
          // 'bottom': { 'anchor': 'right', 'align': VerticalAlign.Bottom },
          'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },
        })

        Column() {
          Row() {
            Text(item.createTime).fontColor("#8C8C8C").fontSize(14)
            Text(item.actionName).fontColor($r("app.color.btn_color_blue")).fontSize(14).margin({ left: 8 })
          }

          Text(item.deptName + "|" + item.createUserName).fontColor(Color.Black).fontSize(15).margin({ top: 10 })
          Text(item.content.replace("<br/>", "\n"))
            .fontColor("#595959")
            .fontSize(15)
            .padding(7)
            .margin({ top: 10 })
            .backgroundColor("#F5F5F5")
            .onClick(() => {
              if (item.action == "2207" || item.action == "2209") {
                router.pushUrl({ url: RouterContent.AlarmDetailPage, params: { "alarmId": item.id } })
              }
            })
        }.id("right").alignItems(HorizontalAlign.Start).margin({ top: 25, left: 20 }).alignRules({
          // 'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
          'right': { 'anchor': '__container__', 'align': HorizontalAlign.End },
          'left': { 'anchor': "left", 'align': HorizontalAlign.End },
        }).height('auto')
      }.height('auto')
    }.height('auto')
  })
}
.scrollBar(BarState.Off) //滚动条配置
.listDirection(Axis.Vertical)
.width('auto')
.height('auto')
.layoutWeight(1)

我需要RelativeContainer能根据内容高度自适应

image.png

如上图,左边的高度要等于右边的高度，RelativeContainer要能自适应右边的高度。现在一个listitem就是一整个屏幕的高度


更多关于HarmonyOS鸿蒙Next中RelativeContainer如何自适应高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

Divider().width(2).backgroundColor("#6CB8F9").vertical(true).height(20) Image().fitOriginalSize(true).width(40).height(40) Divider().width(2).backgroundColor("#6CB8F9").vertical(true)

第二个 Divider 设定一下高度就可以了

更多关于HarmonyOS鸿蒙Next中RelativeContainer如何自适应高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，RelativeContainer组件默认不会自适应高度，需要手动设置其高度或使用布局约束来实现自适应。可以通过以下方式实现：

  1. 使用layoutWeight：为子组件设置layoutWeight，使RelativeContainer根据子组件的高度自动调整。
  2. 使用matchParent：将RelativeContainer的高度设置为matchParent，使其填充父容器。
  3. 动态计算高度：通过代码动态计算子组件的高度，并设置RelativeContainer的高度。

示例代码：

RelativeContainer() {
  Text('自适应高度')
    .layoutWeight(1) // 设置权重
}
.width('100%')
.height('matchParent') // 自适应高度
回到顶部