HarmonyOS鸿蒙Next已经api21了，容器的自适应大小什么时候能上

HarmonyOS鸿蒙Next已经api21了，容器的自适应大小什么时候能上 前边的帖子里，还是 onAreaChange，自己拿高度区赋值给上层容器

那如果要封装一下，组件复用一下，多嵌套几层就会非常麻烦

有没有更合适的方案。

RelativeContainer，子组件都设置好了上下约束，自动撑开RelativeContainer的高度
15 回复

开发者您好，针对您的问题 Column中有Text(‘标题’)和Text(‘测试文本’)，需要为Text(‘测试文本’)添加 .width(‘33%’)，不然会将蓝色部分挤压。当前Column宽度是由其内容自动撑开，测试文本过长确实会挤压蓝色区域，您为text添加宽度是一种做法，也可以使用flex弹性布局，或者为Column添加固定宽度，或者约束text的文本行数，都可以不再挤压蓝色区域。针对结构包裹在list的item中，使用List容器组件是一样的效果，以下代码替换为list效果一致。

//弹性布局

@Entry

@Component

struct TextTimerExample {

  build() {

    Scroll() {

      Row() {

        Image('')

          .width(20)

          .height(20)

          .backgroundColor(Color.Red)

        

        // 关键：Column使用layoutWeight占据剩余空间

        Column() {

          Text('标题')

            .backgroundColor(Color.Green)

          

          Text('测试文本sdgdfsfddfdgfdgdfhdfsdfsdcsdcdscsacsdgfdgdsgdfhbfgsndfbgfdhfdb')

            .width('100%') // 占据Column的全部宽度

            .backgroundColor(Color.Orange)

        }

        .layoutWeight(1) // Column占据Row中剩余的空间

        .margin({ left: 8, right: 8 })

        

        Text('cccc')

          .width(80)

          .height(80)

          .backgroundColor(Color.Blue)

      }

      .backgroundColor(Color.Pink)

      .justifyContent(FlexAlign.Center)

      .padding(12) // 添加内边距让布局更好看

    }

    .backgroundColor(Color.Blue)

  }

}

更多关于HarmonyOS鸿蒙Next已经api21了，容器的自适应大小什么时候能上的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


👍

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

还是要指定宽度，不加宽度 ，就会把后边的覆盖

cke_122.png

cke_301.png

cke_556.png

cke_854.png

开发者你好，看你的代码，你没用RelativeContainer容器承载组件吗？，

你好，如果这个结构包裹在List的Item中，需要让List自动计算高度，需要怎么处理呢，

开发者你好，你是想要List自适应高度么？RelativeContainer不能满足你的需求么。能麻烦您具体描述下你的问题吗？（当前问题是什么，具体想要实现什么样的效果，涉及哪些组件），

开发者你好，请问你具体想实现什么效果？麻烦具体描述下你的场景。当前容器使用onAreachange是可以自适应text1、text2的效果的，参考代码：

@Entry
@Component
struct Page_1229 {
  @State message: string = 'Hello  Hello World1Hello World1Hello World1Hello World1Hello World1Hello World1Hello World1';
  @State message1: string = 'Hello World1';

  build() {
    Column(){

      RelativeContainer() {
        Text(this.message)
          .id('text1')
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Bold)
          .alignRules({
            top:{anchor:"__contain__",align:VerticalAlign.Top},
            bottom:{anchor:"__contain__",align:VerticalAlign.Center}
          })
          .margin({
            top:16,
            bottom:16
          })
        Text(this.message1)
          .id('text2')
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Bold)
          .alignRules({
            top:{anchor:"text1",align:VerticalAlign.Bottom},
            bottom:{anchor:"__contain__",align:VerticalAlign.Bottom}
          })
          .margin({
            top:16,
            bottom:16
          })
      }
      .height('auto')
      .width('auto')
      .background(Color.Pink)
    }
  }
}

https://developer.huawei.com/consumer/cn/forum/topic/0202194107210738370?fid=0109140870620153026

当前还是这种方案，设置了auto，会占满屏

需求：

RelativeContainer

不设置最外层容器的宽高，里边有两个text1,text2（文本会根据不同语言，动态增长） text1() .alirule({ top:{anchor:contain,aligin:top}, bottom:{anchor:contain,aligin:top} }) .margin({ top:16, bottom:16 })

text2()

.alirule({

top:{anchor:text1,aligin:bottom},

bottom:{anchor:contain,aligin:bottom}

})

.margin({

top:16,

bottom:16

})

然后外层的RelativeContainer,会根据text1的自动换行的文本高度+162 + text2的文本高度+162 自动撑开大小

现况： 需要两个text，onAreaChange，计算高度赋值给RelativeContainer，刷新

各位大佬有看明白描述吗，有点像iOS的约束，撑开外围组件大小的意思

楼主想要主轴和交叉轴方都是自适应的吗，有没有要实现的场景之类的，在单个方向自适应不给高度或这个宽度容器内部会跟随内部的元素大小来自动缩放

xy 双轴都撑开，

容器的自适应大小有具体的案例或者示例 Demo 吗？有点没 Get 到。

当前 Row() 和 Column() 这一类的线性布局组件不就是不设置框高的时候就是根据 子组件 去自适应撑开的。

xy 双轴都撑开，

鸿蒙Next API 21中，容器的自适应能力主要通过自适应布局类实现，例如自适应盒子（AdaptiveBox）、栅格容器（GridContainer）和媒体查询（MediaQuery）。这些组件支持根据设备屏幕尺寸和方向动态调整UI布局。具体功能实现需查阅对应API版本的ArkUI开发文档。

目前HarmonyOS Next的API 21版本中，容器（如RelativeContainer）确实还不支持根据子组件约束自动撑开自身尺寸。你遇到的通过onAreaChange手动计算并赋值的方式，是目前实现类似效果的主要方案。

对于组件多层嵌套导致的复用复杂问题，可以考虑以下优化方向：

  1. 封装自定义组件：将需要自适应尺寸的RelativeContainer及其子组件封装成一个自定义组件。在组件内部使用onAreaChange监听内容区域变化，并通过@Prop或@Link装饰器将计算出的高度暴露给父组件。这样在复用时就只需关注传入的数据，而无需重复处理测量逻辑。

  2. 使用布局约束与比例：在RelativeContainer内，尽量为子组件设置明确的相对约束（如alignTop、alignBottom）和宽高比例，减少动态计算的需求。对于已知的固定高度部分，直接设置具体值或百分比。

  3. 关注官方更新：自动尺寸调整属于高级布局特性，通常会在基础布局系统稳定后，在后续API版本中作为增强功能提供。建议持续关注HarmonyOS的官方版本更新日志和开发者文档。

当前阶段，通过自定义组件封装测量逻辑，是平衡复用性和动态布局的有效实践。

回到顶部