Text组件设置maxLines后如何确定文本是否被隐藏

Text组件设置maxLines后如何确定文本是否被隐藏

HarmonyOS
2024-01-21 12:57:36
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
荣光因缘来

可以通过MeasureText.measureTextSize来判断Text文本的高度是否超出maxLines设置的高度进行判断。具体使用可参考以下代码示例及参考链接。

代码示例

import { MeasureText } from '@kit.ArkUI' 
 
@Entry 
@Component 
struct TextInputExample { 
  @State text: string = ''; 
  @State truncatedHint: string = "文本未截断"; 
  controller: TextInputController = new TextInputController(); 
 
  build() { 
    Column() { 
      TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller }) 
        .placeholderColor(Color.Grey) 
        .placeholderFont({ size: 14, weight: 400 }) 
        .caretColor(Color.Blue) 
        .width(400) 
        .height(40) 
        .margin(20) 
        .fontSize(14) 
        .fontColor(Color.Black) 
        .onChange((value: string) => { 
          this.text = value; 
          let textSizeShow1: SizeOptions = MeasureText.measureTextSize({ 
            textContent: this.text, 
            constraintWidth: 100, 
            fontSize: 14, 
            overflow: TextOverflow.Ellipsis, 
            maxLines: 2 
          }) 
          let textSizeShow2: SizeOptions = MeasureText.measureTextSize({ 
            textContent: this.text + " ", 
            constraintWidth: 100, 
            fontSize: 14, 
            overflow: TextOverflow.Ellipsis, 
            maxLines: 2000000 
          }) 
          console.log("textSizeShow1.height=" + textSizeShow1.height); 
          console.log("textSizeShow2.height=" + textSizeShow2.height); 
 
          if (textSizeShow2 && textSizeShow1 && textSizeShow2?.height && textSizeShow1?.height && (textSizeShow2?.height > textSizeShow1?.height)) { 
            console.log("文本截断"); 
            this.truncatedHint = "文本截断"; 
          } else { 
            console.log("文本未截断"); 
            this.truncatedHint = "文本未截断"; 
          } 
        }) 
      Text(this.text) 
        .maxLines(2) 
        .width(100) 
        .textOverflow({ overflow: TextOverflow.Ellipsis }) 
        .border({ width: 1 }) 
        .minFontSize(14) 
        .maxFontSize(24) 
      Text(this.truncatedHint) 
 
    }.width('100%') 
  } 
}

已于2024-1-30 18:35:51修改
分享
微博
QQ
微信
回复
2024-01-22 15:21:27
相关问题
Text设置maxLines时使用Infinity报错
193浏览 • 1回复 待解决
如何计算文本是否溢出省略
191浏览 • 1回复 待解决
Input组件是否支持设置文本居中对齐
179浏览 • 1回复 待解决
文本组件是否支持分段设置字体样式
332浏览 • 1回复 待解决
Text组件是否支持多行显示
237浏览 • 1回复 待解决
确定文件名是否确定,再试一次
16807浏览 • 1回复 待解决
Text 组件如何加载Unicode字符
134浏览 • 1回复 待解决
Text组件是否支持小图片和表情包
216浏览 • 1回复 待解决
Text怎么显示带html标签的文本
2473浏览 • 1回复 待解决
ets开发如何设置隐藏状态栏?
1389浏览 • 1回复 待解决
Java Text控件,如何设置字间距?
4957浏览 • 1回复 待解决
如何隐藏容器组件的溢出内容
388浏览 • 1回复 待解决
如何获取UI组件的显示或隐藏状态
155浏览 • 1回复 待解决
弹窗库XPopup组件,不显示字体确定
4742浏览 • 4回复 已解决
应用如何设置隐藏顶部的状态栏
294浏览 • 1回复 待解决
动态设置文本导致致命错误
5422浏览 • 1回复 待解决
如何获取Text组件中文字的宽度
182浏览 • 1回复 待解决