HarmonyOS row中的子控件超出了row的范围

怎么才能让它们不超出row的范围?

Row({space:5}) {  
          Image($r('app.media.login_device_phone'))  
            .width(20)  
            .height(20)  
          Text('ewewewewewewewewsasdasasasasasasasasas')  
            .fontColor('#333333')  
            .fontSize(15)  
            .maxLines(1)  
            .textOverflow({ overflow: TextOverflow.Ellipsis })  
          Text('本机')  
            .fontColor('#999999')  
            .fontSize(13)  
            .width(34)  
            .height(20)  
            .borderWidth(0.5)  
            .textAlign(TextAlign.Center)  
            .borderColor('#E2E2E2')  
            .borderRadius(2)  
        }  
        .margin({  
          top:13  
        })  
        .layoutWeight(1)
HarmonyOS
2024-09-29 12:41:13
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以参考下面的demo:

import measure from '@ohos.measure';  
@Entry  
@Component  
struct Text1 {  
  @State message1: string = '';  
  @State message2: string = '';  
  @State message1_Width: number = 0  
  @State imageWidth: number = 20  
  normalSize: SizeOptions = measure.measureTextSize({  
    textContent: "x",  
    fontSize: 18,  
    constraintWidth: 200  
  })  
  @State lines: number = 1  
  @State maxWidth: number = 500  
  @State message2_Width: number = 0;  
  aboutToAppear() {  
    this.setMessage()  
  }  
  setMessage() {  
    this.message1 = "第一个文本第一个文本第一个文本第一个文本第一个文本第一个文本第一个文本"  
    this.message2 = "第二个文本"  
  }  
  build() {  
    Column() {  
      Row() {  
        Row() {  
          Image($r('app.media.ic_ok'))  
            .width(this.imageWidth)  
            .height(this.imageWidth)  
          Text(this.message1)  
            .fontColor('#212121')  
            .fontSize(18)  
            .textAlign(TextAlign.Start)  
            .fontWeight(500)  
            .maxLines(1)  
            .textOverflow({ overflow: TextOverflow.Ellipsis })  
            .onAreaChange((oldArea: Area, newArea: Area) => {  
              if (typeof newArea.width == 'number') {  
                this.message1_Width = newArea.width  
                let size: SizeOptions = measure.measureTextSize({  
                  textContent: this.message1,  
                  fontSize: 18,  
                  constraintWidth: this.message1_Width  
                })  
              }  
            })  
            .constraintSize({  
              maxWidth: this.maxWidth  
            })  
            .backgroundColor(Color.Orange)  
        }  
        .layoutWeight(this.lines - 1)  
        Text(this.message2)  
          .fontColor('#00bcd4')  
          .fontSize(18)  
          .textOverflow({ overflow: TextOverflow.Ellipsis })  
          .onAreaChange((oldArea: Area, newArea: Area) => {  
            if (typeof newArea.width == 'number') {  
              this.message2_Width = newArea.width  
            }  
          })  
      }  
      .onAreaChange((oldArea: Area, newArea: Area) => {  
        if (typeof newArea.width == 'number') {  
          this.maxWidth = newArea.width - this.message2_Width - this.imageWidth  
        }  
      })  
    }  
    .margin({ top: 120, bottom: 0})  
  }  
}
分享
微博
QQ
微信
回复
2024-09-29 17:36:22
相关问题
spark Dataset<Row>如何按行获取数据?
2132浏览 • 1回复 待解决
设置组件宽度不超出父组件
448浏览 • 1回复 待解决
HarmonyOS RelativeContainer控件显示问题
230浏览 • 1回复 待解决
HarmonyOS list控件组件复用
221浏览 • 1回复 待解决