HarmonyOS Text怎么根据行数调整字体大小?

HarmonyOS
2025-01-09 16:07:34
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
aquaa

可以通过onAreaChange计算Text组件当前文本的行数

@Entry
@Component
struct Page49 {
  // 预设的默认行高,初始未定义
  private INITIAL_LINE_HEIGHT: number = -1;
  // 状态管理:存储用户输入的文本内容
  @State private textContent: string = '';
  // 状态管理:根据计算显示的行数
  @State private displayedLines: number = 0;

  build() {
    Column() {
      // 按钮以添加字符到文本
      Button('添加文字').onClick(() => {
        this.textContent += '哈'; // 添加一个汉字“哈”至文本内容
      })

      // 按钮以删除最后一个字符
      Button('删除文字').onClick(() => {
        if (this.textContent.length > 0) { // 确保文本非空才执行删除
          this.textContent = this.textContent.slice(0, -1); // 删除最后一个字符
        }
      })

      // 显示当前文本行数的提示信息
      Text(`当前行数: ${this.displayedLines}`)

      // 可变高度的文本显示区域,响应式更新行数
      Text(this.textContent)
        .width('50%')// 设置文本宽度为50%
        .onAreaChange((previousArea: Area, currentArea: Area) => {
          // 初始化行高,仅在首次获取到有效高度时设置
          if (this.INITIAL_LINE_HEIGHT == -1 && this.INITIAL_LINE_HEIGHT === this.INITIAL_LINE_HEIGHT && currentArea.height > 0) {
            this.INITIAL_LINE_HEIGHT = currentArea.height as number;
          }

          // 计算并更新显示的行数
          console.log('Previous Height:', previousArea.height);
          console.log('Current Height:', currentArea.height);
          console.log('this.INITIAL_LINE_HEIGHT:', this.INITIAL_LINE_HEIGHT);
          this.displayedLines = Math.ceil(currentArea.height as number / this.INITIAL_LINE_HEIGHT);
        })
    }
    .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.

目前有这个类似的方法,麻烦看一下是否满足

设置文本自适应高度的方式。

默认值:TextHeightAdaptivePolicy.MAX_LINES_FIRST。

说明:

当设置为TextHeightAdaptivePolicy.MAX_LINES_FIRST时,优先使用maxLines属性来调整文本高度。如果使用maxLines属性的布局大小超过了布局约束,则尝试在minFontSize和maxFontSize的范围内缩小字体以显示更多文本。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-text-V5

参考此文档的示例3

分享
微博
QQ
微信
回复
2025-01-09 18:01:11
相关问题
应用内字体大小设置调整
967浏览 • 1回复 待解决
HarmonyOS web_webview怎么调整字体
507浏览 • 1回复 待解决
HarmonyOS 应用内调整全局字体大小
1378浏览 • 1回复 待解决
HarmonyOS 怎么获取系统字体大小
1432浏览 • 1回复 待解决
HarmonyOS 应用内字体大小怎么设置?
1108浏览 • 1回复 待解决
HarmonyOS webview字体大小设置
726浏览 • 1回复 待解决
HarmonyOS 字体大小如何设置?
2107浏览 • 1回复 待解决
HarmonyOS RichText无法指定字体大小
724浏览 • 1回复 待解决
HarmonyOS 字体大小适配方案
2767浏览 • 1回复 待解决
鸿蒙IndexBar如何设置字体大小
7568浏览 • 1回复 待解决
HarmonyOS RichText组件无法设置字体大小
745浏览 • 1回复 待解决
HarmonyOS 应用内字体大小调节
1713浏览 • 1回复 待解决
全局设置字体大小方案咨询
1063浏览 • 1回复 待解决
HarmonyOS 如何获取设置中系统字体大小
1234浏览 • 1回复 待解决
HarmonyOS List中字体大小的全局修改
839浏览 • 1回复 待解决