HarmonyOS鸿蒙Next中StyledString如何计算尺寸？

HarmonyOS鸿蒙Next中StyledString如何计算尺寸？ MeasureText不可用

3 回复

【背景知识】

  • 属性字符串：可用于在字符或段落级别上设置文本样式。将StyledString应用到文本组件上，可以采用多种方式修改文本，包括调整字号、添加字体颜色、使文本具备可点击性，以及通过自定义方式绘制文本等。
  • LayoutManager：布局管理器对象（文本内容变更后，需等待布局完成才可获取到最新的布局信息）。

【解决方案】

开发者可通过LayoutManager组件获取文件的尺寸，示例代码如下：

import image from "@ohos.multimedia.image";
import { LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
export struct Page {
  @State num: number = 0
  @State lineNum: number = 0
  private controller = new TextController();
  @State pixelMap?: image.PixelMap = undefined;
  textStyleAttrs: TextStyle =
    new TextStyle({
      fontWeight: FontWeight.Bolder,
      fontSize: LengthMetrics.vp(24),
      fontStyle: FontStyle.Italic,
    });
  mutableStyledString: MutableStyledString = new MutableStyledString("运动45分钟 目标达成", [
    {
      start: 2,
      length: 2,
      styledKey: StyledStringKey.FONT,
      styledValue: this.textStyleAttrs
    },
    {
      start: 7,
      length: 4,
      styledKey: StyledStringKey.FONT,
      styledValue: new TextStyle({
        fontColor: Color.Orange, fontSize: LengthMetrics.vp(12),
      })
    }
  ]);

  async onPageShow() {
    this.controller.setStyledString(this.mutableStyledString);
  }

  build() {
    Column({ space: 20 }) {
      if (this.num) {
        Text(`第${this.lineNum}行的高度为：${this.num}`)
      }

      Button('获取图片')
        .onClick(() => {
          this.getUIContext().getHostContext()?.resourceManager.getMediaContent($r('app.media.startIcon'))
            .then(res => {
              let imageSource = image.createImageSource(res.buffer);
              return imageSource.createPixelMapUsingAllocator();
            })
            .then(pixelMap => {
              this.pixelMap = pixelMap;
              let info = pixelMap.getImageInfoSync();
              this.mutableStyledString.appendStyledString(new MutableStyledString(new ImageAttachment({
                value: pixelMap,
                size: { width: info.size.width, height: info.size.height }
              })));
              this.controller.setStyledString(this.mutableStyledString);
            })
        })
      Button('测算宽高')
        .onClick(() => {
          let layoutManager = this.controller.getLayoutManager();
          for (let i = 0; i < layoutManager.getLineCount(); i++) {
            this.lineNum = i + 1
            this.num = layoutManager.getLineMetrics(i).height
            console.info(`第${i + 1}行的高度是: ${layoutManager.getLineMetrics(i).height}`)
          }
        })
      Text(undefined, { controller: this.controller })
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中StyledString如何计算尺寸？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，StyledString的尺寸计算主要依赖TextLayout类。通过TextLayout的measureText方法，传入StyledString对象和可选的布局约束（如最大宽度），即可获取其文本的测量尺寸（宽度和高度）。该测量结果考虑了文本样式（如字体、字号）对布局的影响。

在HarmonyOS Next中，StyledString的尺寸计算推荐使用TextLayout或TextMeasurer。

由于MeasureText已废弃，主要替代方案如下：

1. 使用TextLayout（推荐） TextLayout是布局文本的核心类，可获取精确的文本尺寸。

import { TextLayout, StyledString } from '@kit.ArkUI';

// 创建StyledString
let styledString = new StyledString();
styledString.addStyle({ fontSize: 16 });
styledString.addText('Hello HarmonyOS');

// 创建TextLayout并计算尺寸
let textLayout = new TextLayout();
textLayout.setStyledString(styledString);

// 获取文本边界尺寸
let textMetrics = textLayout.getTextMetrics();
let width = textMetrics.width;
let height = textMetrics.height;

2. 使用TextMeasurer 适用于需要频繁测量不同文本配置的场景。

import { TextMeasurer, StyledString, MeasurementType } from '@kit.ArkUI';

let styledString = new StyledString();
styledString.addStyle({ fontSize: 16, fontWeight: 500 });
styledString.addText('测量文本');

let measurer = new TextMeasurer();
let measurement = measurer.measureStyledString(
  styledString,
  {
    maxWidth: 200, // 可选最大宽度
    measurementType: MeasurementType.EXACT // 测量类型
  }
);

// 获取测量结果
let measuredWidth = measurement.width;
let measuredHeight = measurement.height;

关键点说明：

  • TextLayout更适合与文本渲染配合使用，可直接用于UI布局
  • TextMeasurer是纯测量工具，不涉及渲染管线
  • 两种方式都支持富文本样式测量
  • 可通过maxWidth参数实现自动换行文本的测量

测量类型（MeasurementType）选项：

  • EXACT: 精确测量，性能要求较高
  • APPROXIMATE: 近似测量，性能更优
  • DYNAMIC: 动态测量，平衡精度与性能

根据实际场景选择合适的测量方式，通常TextLayout在大多数UI布局场景中已足够使用。

回到顶部