子组件溢出父容器问题

解决子组件溢出父容器的场景，目前子组件允许超出父组件，但希望子组件不要溢出父组件。

HarmonyOS

Nicrosoft

2024-05-23 23:38:33

浏览

回答 1

待解决

回答 1

按赞同

按时间

kaixinsanmao

使用的核心API

measure

measure.measureTextSize：计算指定文本单行布局下的宽度和高度。

onAreaChange组件区域变化事件，组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。

核心代码解释

import measure from '@ohos.measure'; 
  
@Entry 
@Component 
struct Text1 { 
  @State message: string = ''; 
  @State contentHeight: number = 50 
  @State textWidth: number = 0 
  normalSize: SizeOptions = measure.measureTextSize({ 
    textContent: "x", 
    fontSize: 12, 
    constraintWidth: 200 
  }) 
  @State lines: number = 1 
  @State maxWidth: number = 500 
  @State crossContent: string = "" 
  @State crossWidth: number = 0; 
  aboutToAppear() { 
    this.setMessage() 
  } 
  setMessage() { 
    //场景1，message小，cross小 
    this.message = "1" 
    this.crossContent = "1" 
    //场景2，message大，cross小 
    this.message = "11111111111111111111111111111111111111111111111111111111111111111111111111111111111111" 
    this.crossContent = "1" 
  
    //场景3，message大，cross大 
    this.message = "sdfsdfsdfdsffddsfds11111111111111111111111" 
    this.crossContent = "11111111111111111111111111111111111111111111111111" 
  
    //场景4，message小，cross大 
    this.message = "1" 
    this.crossContent = "11111111111111111111111111111111111111111111111111" 
  } 
  build() { 
    Column() { 
      Row() { 
        Row() { 
          Text(this.message) 
            .fontColor('#212121') 
            .fontSize(12) 
            .textAlign(TextAlign.Start) 
            .fontWeight(500) 
            .maxLines(2) 
            .textOverflow({ overflow: TextOverflow.Ellipsis }) 
            .onAreaChange((oldArea: Area, newArea: Area) => { 
              if (typeof newArea.width == 'number') { 
                this.textWidth = newArea.width 
                let size: SizeOptions = measure.measureTextSize({ 
                  textContent: this.message, 
                  fontSize: 12, 
                  constraintWidth: this.textWidth 
                }) 
                if(size.height !=undefined && this.normalSize.height !=undefined){ 
                  if (size.height > this.normalSize.height) { 
                    this.lines = 2 
                  } else { 
                    this.lines = 1 
                  } 
                } 
              } 
            }) 
            .constraintSize({ 
              maxWidth: this.maxWidth 
            }) 
        }.clip(true) 
        .layoutWeight(this.lines - 1) 
        .onAreaChange((oldArea: Area, newArea: Area) => { 
          if (typeof newArea.height == 'number') { 
            this.contentHeight = newArea.height 
          } 
        }) 
  
        Column() { 
          Text(this.crossContent) 
            .fontColor('#00bcd4') 
            .fontSize(10) 
            .margin({ left: 2 }) 
            .textOverflow({ overflow: TextOverflow.Ellipsis }) 
            .onAreaChange((oldArea: Area, newArea: Area) => { 
              if (typeof newArea.width == 'number') { 
                this.crossWidth = newArea.width 
              } 
            }) 
        }.height(this.contentHeight) 
      }.backgroundColor(Color.Orange) 
      .onAreaChange((oldArea: Area, newArea: Area) => { 
        if (typeof newArea.width == 'number') { 
          this.maxWidth = newArea.width - this.crossWidth 
        } 
      }) 
    } 
    .margin({ top: 12, bottom: 0, left: 12, right: 12 }) 
    .padding(4) 
  } 
}

实现效果

场景1：message小，cross小