HarmonyOS 子组件超出父组件宽度？

Question

组件id title，rightText都在同一个row布局内，现在效果是title，长度超长时，组件rightText会被挤出row父组件。

现在的需求时 rightText跟随在 title组件，如果title文字超长，则rightText显示在父组件右边。

请问一下，需要怎么设置

@Component
export  struct ApplicationCenterListItem {
  @Prop cubeModel:CubeModule
  build() {
    RelativeContainer(){
      //图形验证码
      ImageKnifeComponent({
        imageKnifeOption: {
          placeholderSrc:$r('app.media.defaultImage'),
          loadSrc: this.cubeModel.icon,
          objectFit: ImageFit.Fill,
          border:{radius:'25vp'}
        }
      }).width('50vp') .aspectRatio(1)
        .margin({ left: '12vp',top:'20vp',bottom:'20vp'})
        .id('img')

      Column(){
        Row(){
          Text(this.cubeModel.name+'65465465456465456456465').id('title')
            .maxLines(1).fontSize(16)
            .foregroundColor($r('app.color.title_color'))
            .textOverflow({overflow:TextOverflow.Ellipsis})

          if(!this.cubeModel.hidden) {
            Text('无使用权限').fontSize(11).id('rightText')
              .foregroundColor(0xF99D47).margin({top:5,bottom:10,left:10,right:10})
              .backgroundColor(0xFFF3E7).padding('8vp')
              .maxLines(1)
          }
        }.backgroundColor(Color.Pink)



        if(this.cubeModel.briefInfo){
          Text(this.cubeModel.briefInfo).maxLines(2).fontSize(13)
            .foregroundColor($r('app.color.text_color'))
            .margin({top:10,bottom:10})
        }

      }
      .alignItems(HorizontalAlign.Start)
      .alignRules({
        left: { anchor: 'img', align: HorizontalAlign.End },
        right: { anchor: '__container__', align: HorizontalAlign.End }
      })
      .margin(10).backgroundColor(Color.Blue)
    }.height('auto')

  }
}

Answer 1

可以通过onAreaChange获取到title和row的宽度，再使用constraintSize属性设置title的最大宽度，具体内容可参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-size-V5

参考demo如下：

Row() {
  Text(this.cubeModel.name + '112312321323132111111111111111111')
    .id('title')
    .maxLines(1)
    .fontSize(16)
    .foregroundColor(Color.Red)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .constraintSize({maxWidth:Number(this.rowTextW) - Number(this.rightTextW)-20})
  if (!this.cubeModel.hidden) {
    Text('无使用权限')
      .fontSize(11)
      .id('rightText')
      .foregroundColor(0xF99D47)
      .margin({
        top: 5,
        bottom: 10,
        left: 10,
        right: 10
      })
      .onAreaChange((oldValue: Area, newValue: Area)=>{
        this.rightTextW = newValue.width;
      })
      .backgroundColor(0xFFF3E7)
      .padding('8vp')
      .maxLines(1)
  }
}.backgroundColor(Color.Pink)
.onAreaChange((oldValue: Area, newValue: Area)=>{
  this.rowTextW = newValue.width
})