组件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')
}
}
可以通过onAreaChange获取到title和row的宽度,再使用constraintSize属性设置title的最大宽度,具体内容可参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-size-V5
参考demo如下: