13、鸿蒙学习——文本计算

参考:文档中心

@ohos.measure (文本计算)

本模块提供文本宽度、高度等相关计算

从API version 12开始,可以通过UIContext中的getMeasureUtils方法获取当前UI上下文关联的MeasureUtils实例

如需更多测算文本参数,建议使用图形对应测算接口Paragraph接口。

导入模块

复制代码
import { MeasureText } from '@kit.ArkUI'

MeasureText.measureText

measureText(options: MeasureOptions): number

计算指定文本的宽度。

示例:

复制代码
import { MeasureText } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State textWidth: number = MeasureText.measureText({
    textContent: "Hello word",
    fontSize: '50px'
  })

  build() {
    Row() {
      Column() {
        Text(`The width of 'Hello World': ${this.textWidth}`)
      }
      .width('100%')
    }
    .height('100%')
  }
}

MeasureText.measureTextSize

measureTextSize(options: MeasureOptions): SizeOptions

计算指定文本的宽度和高度。

复制代码
import { MeasureText } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  textSize : SizeOptions = MeasureText.measureTextSize({
    textContent: "Hello word",
    fontSize: '50px'
  })
  build() {
    Row() {
      Column() {
        Text(`The width of 'Hello World': ${this.textSize.width}`)
        Text(`The height of 'Hello World': ${this.textSize.height}`)
      }
      .width('100%')
    }
    .height('100%')
  }
}
相关推荐
前端不太难5 小时前
HarmonyOS App 工程深水区:从能跑到可控
华为·状态模式·harmonyos
万少5 小时前
端云一体 一天开发的元服务-奇趣故事匣经验分享
前端·ai编程·harmonyos
一只大侠的侠5 小时前
Flutter开源鸿蒙跨平台训练营 Day 15React Native Formik 表单实战
flutter·开源·harmonyos
空白诗5 小时前
React Native 鸿蒙跨平台开发:react-native-svg 矢量图形 - 自定义图标与动画
react native·react.js·harmonyos
听麟6 小时前
HarmonyOS 6.0+ PC端虚拟仿真训练系统开发实战:3D引擎集成与交互联动落地
笔记·深度学习·3d·华为·交互·harmonyos
一只大侠的侠6 小时前
Flutter开源鸿蒙跨平台训练营 Day17Calendar 日历组件开发全解
flutter·开源·harmonyos
前端世界6 小时前
从一个 entry 写到十几个模块:鸿蒙模块化开发的真实落地方案(含可运行 Demo)
华为·harmonyos
一只大侠的侠7 小时前
Flutter开源鸿蒙跨平台训练营 Day14React Native表单开发
flutter·开源·harmonyos
听麟7 小时前
HarmonyOS 6.0+ APP AR文旅导览系统开发实战:空间定位与文物交互落地
人工智能·深度学习·华为·ar·wpf·harmonyos
空白诗7 小时前
高级进阶React Native 鸿蒙跨平台开发:slider 滑块组件 - 音量调节器完整实现
react native·react.js·harmonyos