HarmonyOS 鸿蒙Next应用如何根据文本内容动态测算Text文本控件宽高行高

HarmonyOS 鸿蒙Next应用如何根据文本内容动态测算Text文本控件宽高行高

鸿蒙应用如何根据文本内容动态测算Text文本控件宽高行高

3 回复

一、结论

一般情况下，在鸿蒙里文本控件Text或者Span的宽高，我们都会设置固定宽高，或者根据内容自适应，不设置固定宽高。 但是在特殊场景下，例如，父组件的宽高需要根据子组件的内容动态设置宽高。或者是文本控件根据内容会有行数变化。都需要能动态根据文本控件的内容，测算出宽高。

使用MeasureText类的measureText接口实现该效果，根据文本内容获取到控件的宽度。函数入参，需要传入文本内容和字体大小即可。

二、代码实现和详细解释

MeasureText类的measureText接口，文本内容是string类型，字体大小可以是number或者string，前者时为fp。一般字体大小使用px2fp进行转化。后者string时传入类似 “90px”的字符串。

该工具类还有个measureTextSize接口可以动态获取宽高。

/**
 * 动态测试文本控件行数
 */
@Entry
@Component
struct TextPage {
  
  private mTextFontSize: number = px2fp(42);
  private mLineHeight: number = px2vp(72);
  private mSysWidth: number = Utils.getSysWidth(); //获取系统宽度。从ability的onCreate函数中，通过windowStage获取。

  private mTextTestContent: string = "文本测试内容123456文本测试内容123456文本测试内容123456文本测试内容123456文本测试内容123456文本测试内容123456文本测试内容123456";

  @State mTextHeight: number = this.mLineHeight;

  aboutToappear(){
    this.mTextHeight = this.getChangeLineHeight();
  }

  private getChangeLineHeight(content: string, size: number): number {
  	let textWidth: number = MeasureText.measureText({ textContent: this.mTextTestContent, fontSize: this.mTextFontSize });
  	let targetNum: number = textWidth / this.mSysWidth;
  	return targetNum;
  }

  build() {
    Stack(){
      Text(this.mTextTestContent)
        .fontSize(this.mTextFontSize)
      	.width("100%")
      	.height(this.mTextHeight)
      	.backgroudColor(Color.Blue)
    }
     .width("100%")
     .height(this.mTextHeight)
     .backgroudColor(Color.Red)
  }
}

更多关于HarmonyOS 鸿蒙Next应用如何根据文本内容动态测算Text文本控件宽高行高的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next中，Text组件可通过onAreaChange回调获取渲染后的宽高。使用TextMetrics相关API（如getTextMetrics）可获取文本的精确度量信息，包括行高。通过measureText方法结合文本内容、字体样式和约束条件，可动态测算出文本布局所需尺寸。

在HarmonyOS Next中，可以通过TextMetrics API来动态获取文本的测量信息，包括宽度、高度和行高等。

主要步骤如下：

  1. 创建TextMetrics对象：通过TextMetrics.obtain(component: Text)方法获取与指定Text组件关联的测量对象。

  2. 配置测量参数：在测量前，需要为TextMetrics对象设置与目标Text组件完全一致的文本样式属性，包括：

    • fontSize
    • fontWeight
    • fontFamily
    • lineHeight（如果使用）
    • textOverflow
    • maxLines
    • 以及布局约束（如constraintWidth或constraintHeight）

  3. 执行测量：调用measureText(content: string)方法，传入需要测量的文本内容。

  4. 获取测量结果：测量完成后，可以从返回的TextMetricsResult对象中获取以下关键数据：

    • width: 文本内容宽度
    • height: 文本内容高度
    • lineCount: 文本行数
    • baseline: 文本基线位置

示例代码：

import { TextMetrics, TextMetricsResult } from '@kit.ArkUI';

// 假设有一个Text组件引用：textRef
const textMetrics: TextMetrics = TextMetrics.obtain(textRef);

// 配置测量参数（需与Text组件样式一致）
textMetrics.fontSize = 16;
textMetrics.fontWeight = FontWeight.Normal;
textMetrics.constraintWidth = 200; // 设置测量时的约束宽度

// 执行测量
const result: TextMetricsResult = textMetrics.measureText("需要测量的文本内容");

// 获取结果
const textWidth: number = result.width;
const textHeight: number = result.height;
const lineCount: number = result.lineCount;

// 使用完成后释放资源
textMetrics.release();

注意事项：

  • 测量前必须正确设置所有文本样式属性，否则测量结果可能不准确
  • 如果文本可能换行，需要设置constraintWidth来模拟实际布局宽度
  • 使用完成后调用release()方法释放资源，避免内存泄漏
  • 测量操作相对耗时，应避免在频繁调用的函数中执行

这种方法可以准确获取文本在特定样式和布局约束下的实际渲染尺寸，适用于需要根据文本内容动态调整布局的场景。

回到顶部