arkts-Text

api 12 及以上，不定期更新

1.基本使用

Text('需要显示的文本')   // 混合变量时使用 `文本：${变量}`
  .fontSize(14)   //文本大小
  .fontColor($r("app.color.text1"))   //文本颜色
  .fontWeight(FontWeight.Medium)    //字重 （中文也可以正常修改字重）
  .maxLines(1)     //最大行数，如果需要结尾省略号一定要设置行数和宽度
  .ellipsisMode(EllipsisMode.END)   // 文本超出时处理的地方，这里是尾部
  .textOverflow({ overflow: TextOverflow.Ellipsis })  // 文本超出时显示的方式

2.测量文本宽度和行数

使用 MeasureText 来测量文本实际显示的宽度

import { MeasureText } from '@kit.ArkUI'

//测量 宽度
let textWidth = MeasureText.measureText({
  textContent: "123456",
  fontSize: 15,
  fontWeight: FontWeight.Medium,
  lineHeight: this.lineHeight
})

//测量 宽度 + 行数
let textSize = MeasureText.measureTextSize({
  textContent: allContent,
  fontSize: this.fontSize,
  fontWeight: this.fontWeight,
  lineHeight: this.lineHeight,
  //constraintWidth: 48      //可单独限定计算宽度，不写就是布局的最大宽度
})
//宽度
let textWidth = textSize.width

// 行数
// 如果写了 lineHeight 以 lineHeight 大小计算一行高度，否则使用 fontSize 来计算高度
// 比如计算是否超过两行：
if (textSize.height != undefined && textSize.height.valueOf()! > this.lineHeight * 2) {
  //超过了两行
} else {
  //没有超过两行
}

测量结果的单位是 px，如需 直接或计算后间接设置到文本的宽度上时，计算完毕后通过 vp2px() 来转换单位

span 的实现

Text 允许 textspan 来实现文本中穿插图片，表情，变色等。如：

Text() {
      ImageSpan("图片资源")
        .width(16)
        .height(16)
        .objectFit(ImageFit.Fill)
    
      Span(文本资源)
        .fontColor($r("app.color.text6"))
    
      Span("链接")  // 文本变色
        .fontColor($r("app.color.text6"))
    } else {
      Span(item)
    }
  })
}
.fontSize(15)  //内部span单独设置了，则使用内部，否则统一使用外部设置

也允许 for 循环渲染 span 如：

//使用V2时，state 替换为 Local
@State contentArr: Array<String> = new Array()

Text() {
  ForEach(this.arr, (item: string) => {
    if (xxx) {
      ImageSpan(EmjUtils.getEmjByName(item))
        .width(16)
        .height(16)
        .objectFit(ImageFit.Fill)
    } else if (xxx) {
      Span(item)
        .fontColor($r("app.color.text6"))
    } else if (xxx) {  // 替换文本 www.xxx.com 为 图标+链接
      ImageSpan("链接图标")
        .width(16)
        .height(16)
      Span("链接")
        .fontColor($r("app.color.text6"))
        .onClick(()=>{})   //点击事件
    } else {
      Span(item)
    }
  })

相比较于安卓而言，这部分是有缺陷的，你需要在文本拿到手的时候就使用正则或其他的方式把文本提前替换好而不能在判断完毕之后直接生成span。

如有一段文本，需要分割为 纯文本，链接，固定活动链接，表情。

安卓最开始把文本转成span，然后逐步判断逐步修改span，最终把整个span设置到 textView 中。

但arkui只允许for 意味着只能转成数组，这意味着当你通过多条正则或其他方式匹配内容时，为了保证顺序不出现错乱会多出非常多的步骤。

显示自定义字体

1.添加字体文件到项目目录-entry-src-main-resource-rawfile 中 2.在 EntryAbility 的 onWindowStageCreate 方法，windowStage.loadContent 成功回调中注册字体 3.Text().fontFamily("xxx") ，使用字体

windowStage.loadContent('pages/Splash', (err) => {
  font.registerFont({
    familyName: "xxx", 自定义名字
    familySrc: $rawfile("xxx") 路径
  })
});


Text()
  .fontSize(16)
  .fontColor("#0f0")
  .fontFamily("xxx") 和上边自定义名字一样