HarmonyOS 鸿蒙Next RelativeContainer作为父容器时怎么实现高度自适应，类似android布局中的wrap_content要怎样实现

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

HarmonyOS 鸿蒙Next RelativeContainer作为父容器时怎么实现高度自适应，类似android布局中的wrap_content要怎样实现

RelativeContainer() { Image($r(‘app.media.input_bg’)) .id(‘bg’) .width(‘100%’).height(‘100%’) .alignRules({ top:{anchor:‘container’, align:VerticalAlign.Top}, left:{anchor:‘container’, align:HorizontalAlign.Start}, bottom:{anchor:‘container’, align:VerticalAlign.Bottom}, right:{anchor:‘container’, align:HorizontalAlign.End}, })

Text(‘手机号打卡机撒大声地’) .fontColor(’#f5f5f5’) .fontSize(14) .alignRules({ left: { anchor: ‘container’, align: HorizontalAlign.Start }, top: { anchor: ‘container’, align: VerticalAlign.Top }, }) .id(‘title’) .margin({ left: 10, right: 10, top: 14 }) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) .height(22)

Text(‘阿萨德hi哦啊好说的哦啊好哦受打击奥is的好哦阿手打哦啊哈哦对哦啊和山地哦啊哦is对哦i奥斯对哦i阿手打哦i啊花洒奥士达哦爱说的哦啊还是对哦i啊很大哦啊哈是对哦哈搜点好哦阿手打哦啊是’) .id(‘content’) .fontColor(’#f5f5f5’) .fontSize(12) .alignRules({ top: { anchor: ‘title’, align: VerticalAlign.Bottom }, left: { anchor: ‘container’, align: HorizontalAlign.Start }, right: { anchor: ‘container’, align: HorizontalAlign.End }, }) .margin({ left: 10, top: 10, right: 10, bottom: 10 }) }.width(‘100%’)

上面这段代码, 如果我不给父容器RelativeContainer设置一个高度, 是显示不出来的, 但是我的第二个Text(id为:content)内容是不固定, 可能是1行, 也可能是n行, 所以高度不确定, 无法直接给RelativeContainer设置高度, 现在不知道应该怎样实现父容器的高度自适应

有没有类似android布局中的wrap_content属性呢


更多关于HarmonyOS 鸿蒙Next RelativeContainer作为父容器时怎么实现高度自适应，类似android布局中的wrap_content要怎样实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
10 回复

很简单啊，实现的这个效果：

手机号打卡机撒大声地

代码：

Stack() {
  Column() {
    Text('手机号打卡机撒大声地')
      .fontColor('#f5f5f5')
      .fontSize(14)
      .id('title')
      .margin({ left: 10, right: 10, top: 14 })
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .height(22)

    Text('阿萨德hi哦啊好说的哦啊好哦受打击奥is的好哦阿手打哦啊哈哦对哦啊和山地哦啊哦is对哦i奥斯对哦i阿手打哦i啊花洒奥士达哦爱说的哦啊还是对哦i啊很大哦啊哈是对哦哈搜点好哦阿手打哦啊是')
      .id('content')
      .fontColor('#f5f5f5')
      .fontSize(12)
      .margin({ left: 10, top: 10, right: 10, bottom: 10 })
  }
  .width('100%')
  .backgroundImage($r('app.media.app_icon'))
  .backgroundImageSize({
    width: '100%',
    height:'100%'
  })

Stack这个主要是设置背景的，可以看看这个的文档。堆栈布局，类似与安卓里面的RelativeLayout。背景不需要用Image来设置，可以直接设置背景就好了。如果图片不能覆盖整个，需要通过backgroundImageSize来扩大。

更多关于HarmonyOS 鸿蒙Next RelativeContainer作为父容器时怎么实现高度自适应，类似android布局中的wrap_content要怎样实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我没有app.media.input_bg你这个图片，只能用系统代替了，你可以换成app.media.input_bg这个看看。

确实实现了, 非常感谢，

你可以不用RelativeContainer这个布局，很多局限性，需要写很多代码，RelativeContainer这个玩意实现的，其他控件都可以实现，代码越少质量越高。把握这个原则。

可以做高度自适应

给相对布局设置.height(‘auto’)，同时切记，纵向上不能引用__container__父布局id，若引用则height(‘auto’)失效。

注意：目前鸿蒙api效果如此，因为api更新较快，后续效果待定。

加背景有2种方式，效果一样。效果如下图：

方式1：用相对布局内子控件

RelativeContainer(){
  Image($r('app.media.input_bg'))
    .id('bg')
    .width('100%')
    .alignRules({
      top:{anchor:'__container__',align:VerticalAlign.Top},
      left:{anchor:'__container__',align:HorizontalAlign.Start},
      bottom:{anchor:'__container__',align:VerticalAlign.Bottom},
      right:{anchor:'__container__',align:HorizontalAlign.End},
    })

  Text('手机号打卡机撒大声地')
    .fontColor('#f5f5f5')
    .fontSize(14)
    .alignRules({
      left: { anchor: '__container__', align: HorizontalAlign.Start },
      // top: { anchor: '__container__', align: VerticalAlign.Top },
    })
    .id('title')
    .margin({ left: 10, right: 10, top: 14 })
    .maxLines(1)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .height(22)

  Text('阿萨德hi哦啊好说的哦啊好哦受打击奥is的好哦阿手打哦啊哈哦对哦啊和山地哦啊哦is对哦i奥斯对哦i阿手打哦i啊花洒奥士达哦爱说的哦啊还是对哦i啊很大哦啊哈是对哦哈搜点好哦阿手打哦啊是')
    .id('content')
    .fontColor('#f5f5f5')
    .fontSize(12)
    .alignRules({
      top: { anchor: 'title', align: VerticalAlign.Bottom },
      left: { anchor: '__container__', align: HorizontalAlign.Start },
      right: { anchor: '__container__', align: HorizontalAlign.End },
    })
    .margin({ left: 10, top: 10, right: 10, bottom: 10 })

}
.width('100%')
.height('auto')
// .backgroundImage($r('app.media.input_bg'))
// .backgroundImageSize({width:'100%',height:'100%'})

方式2：直接给相对布局设置背景

.backgroundImage($r('app.media.input_bg'))
.backgroundImageSize({width:'100%',height:'100%'})

RelativeContainer(){
  // Image($r('app.media.input_bg'))
  //   .id('bg')
  //   .width('100%')
  //   // .height('100%')
  //   // .alignRules({
  //   //   top:{anchor:'__container__',align:VerticalAlign.Top},
  //   //   left:{anchor:'__container__',align:HorizontalAlign.Start},
  //   //   bottom:{anchor:'__container__',align:VerticalAlign.Bottom},
  //   //   right:{anchor:'__container__',align:HorizontalAlign.End},
  //   // })

  Text('手机号打卡机撒大声地')
    .fontColor('#f5f5f5')
    .fontSize(14)
    .alignRules({
      left: { anchor: '__container__', align: HorizontalAlign.Start },
      // top: { anchor: '__container__', align: VerticalAlign.Top },
    })
    .id('title')
    .margin({ left: 10, right: 10, top: 14 })
    .maxLines(1)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .height(22)

  Text('阿萨德hi哦啊好说的哦啊好哦受打击奥is的好哦阿手打哦啊哈哦对哦啊和山地哦啊哦is对哦i奥斯对哦i阿手打哦i啊花洒奥士达哦爱说的哦啊还是对哦i啊很大哦啊哈是对哦哈搜点好哦阿手打哦啊是')
    .id('content')
    .fontColor('#f5f5f5')
    .fontSize(12)
    .alignRules({
      top: { anchor: 'title', align: VerticalAlign.Bottom },
      left: { anchor: '__container__', align: HorizontalAlign.Start },
      right: { anchor: '__container__', align: HorizontalAlign.End },
    })
    .margin({ left: 10, top: 10, right: 10, bottom: 10 })

}
.width('100%')
.height('auto')
.backgroundImage($r('app.media.input_bg'))
.backgroundImageSize({width:'100%',height:'100%'})

给相对布局设置 .height('auto')，同时切记，纵向上不能引用 __container__ 父布局 id，若引用则 height('auto') 失效。这是从哪儿看到的？

https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-318-V5

请问最后使用RelativeContainer 实现了自适应吗 ？

没有, 我换成了2楼说的那种写法, 可以实现我的需求，

在HarmonyOS中，当使用RelativeContainer作为父容器时，要实现高度自适应（类似于Android中的wrap_content），可以通过以下方式实现：

  1. 不设置固定高度：确保RelativeContainer的高度属性没有被设置为固定值（如height="xxvp"）。不设置高度或者设置为match_parent（如果父容器允许）可以让RelativeContainer根据子元素的大小自动调整高度。

  2. 子元素高度控制：确保RelativeContainer内的子元素根据其内容正确设置了高度。如果子元素有固定高度，那么RelativeContainer的高度将至少为这些子元素高度的总和。如果子元素高度也是自适应的，那么RelativeContainer将根据这些子元素的实际内容高度来调整自身高度。

  3. 布局约束：利用RelativeContainer的布局约束（如align_parent_top、align_parent_bottom、below、above等）来确保子元素正确布局，从而间接控制RelativeContainer的高度。

  4. 检查内边距和边距：内边距（padding）和外边距（margin）也会影响RelativeContainer的最终高度，确保这些值没有导致不期望的高度增加。

通过上述方法，RelativeContainer应该能够根据子元素的内容自动调整其高度，实现类似wrap_content的效果。如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部