子组件溢出父容器问题

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

HarmonyOS
2024-05-23 23:38:33
浏览
收藏 0
回答 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小

场景2:message大,cross小

场景3:message大,cross大

场景4:message小,cross大

适配版本信息

SDK:4.1.0.52

IDE:DevEco Studio 4.1.1.400

分享
微博
QQ
微信
回复
2024-05-24 23:26:06
相关问题
如何隐藏容器组件溢出内容
1019浏览 • 1回复 待解决
组件调用组件的方法
498浏览 • 1回复 待解决
如何设置组件组件宽度变化
746浏览 • 1回复 待解决
组件事件能否到传递组件
1049浏览 • 1回复 待解决
组件组件使用@Link双向同步
369浏览 • 1回复 待解决
组件中如何处理组件内点击事件
1334浏览 • 1回复 待解决
容器组件onVisibleAreaChange不生效
630浏览 • 1回复 待解决
弹窗组件调用组件函数传递
428浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人