如何判断文本组件text是否超出maxLines设置的高度

如何判断文本组件text是否超出maxLines设置的高度

HarmonyOS
2024-07-24 10:58:00
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
xcbaby
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%')
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
分享
微博
QQ
微信
回复
2024-07-24 19:55:39
相关问题
文本组件是否支持分段设置字体样式
2855浏览 • 1回复 待解决
Text设置maxLines时使用Infinity报错
2317浏览 • 1回复 待解决
HarmonyOS 富文本组件问题
1313浏览 • 1回复 待解决
Text怎么设置文本渐变?
1237浏览 • 0回复 待解决
获取文本Text组件宽度
1250浏览 • 1回复 待解决
HarmonyOS Text怎么设置最大高度
640浏览 • 1回复 待解决