HarmonyOS鸿蒙Next中有类似Android SpannableStringBuilder的API吗?

HarmonyOS鸿蒙Next中有类似Android SpannableStringBuilder的API吗?

4 回复

【背景知识】

属性字符串StyledString/MutableStyledString(其中MutableStyledString继承自StyledString,下文统称为StyledString),可用于在字符或段落级别上设置文本样式。将StyledString应用到文本组件上,可以采用多种方式修改文本,包括调整字号、添加字体颜色、使文本具备可点击性,以及通过自定义方式绘制文本等。具体使用方法请参考属性字符串的文档。

【解决方案】

MutableStyledString属性字符串支持图文混排,对文本编辑能力也更加丰富,包括装饰线、段落、行为触发回调等样式,适合复杂的图文编辑场景。

使用属性字符串MutableStyledString给字符串添加高亮样式,然后通过Text组件的setStyledString方法设置其展示。以下是样例代码:

@Component
struct Page {
  @State value: string = '';
  @State dataArr: string[] = [
    '南窗枕书卧,醉眼看山横',
    '海棠花下思朦胧,醉春风',
    '醉里挑灯看剑,梦回吹角连营',
    '醉后不知天在水,满船清梦压星河',
    '指洞庭为酒,渴时浩饮,君山作枕,醉后高眠'
  ]
  @State showArr: Tmp[] = []
  Style1: TextStyle = new TextStyle({ fontColor: Color.Red });
  Style2: TextStyle = new TextStyle({ fontColor: Color.Blue });
  build() {
    Row() {
      Column() {
        Search({ value: $$this.value, placeholder: 'Type to search...' })
          .onChange(() => {
            this.showArr = []
            this.dataArr.filter((item: string) => {
              let index = item.indexOf($$this.value)
              // 匹配关键词,并设置对应Style样式
              if ($$this.value && index != -1) {
                let mutableStyledString = new MutableStyledString(item, [
                  {
                    start: index, length: $$this.value.length, styledKey: StyledStringKey.FONT, styledValue: this.Style1
                  },
                  {
                    start: item.length - 1, length: 1, styledKey: StyledStringKey.FONT, styledValue: this.Style2
                  }])
                this.showArr.push(new Tmp(mutableStyledString, new TextController()))
              }
            })
          })
        ForEach(this.showArr, (item: Tmp) => {
          Row() {
            Text(undefined, { controller: item.controller })
              .onAppear(() => {
                // 通过setStyledString方法,添加对应文本样式
                item.controller.setStyledString(item.style)
              })
          }.width('100%').height(40).justifyContent(FlexAlign.Center)
        })
      }
    }
  }
}

class Tmp {
  style: MutableStyledString
  controller: TextController

  constructor(style: MutableStyledString, controller: TextController) {
    this.style = style
    this.controller = controller
  }
}

更多关于HarmonyOS鸿蒙Next中有类似Android SpannableStringBuilder的API吗?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


您好,可参考文档属性字符串,看能否满足您的诉求:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-styled-string-V5#%E7%A4%BA%E4%BE%8B6

注意CustomSpan如需存储自定义信息,需要重写onMeasure、onDraw方法

HarmonyOS Next中提供了Text组件来支持富文本显示,类似于Android的SpannableStringBuilder。通过Text组件,开发者可以设置不同的样式、颜色、字体等属性,实现复杂的文本显示效果。具体可参考Text组件的相关文档和API。

在HarmonyOS Next中,确实提供了类似Android SpannableStringBuilder的功能,主要通过TextSpanRichText组件实现。

核心API包括:

  1. TextSpan:用于构建富文本片段,支持设置字体样式(颜色、大小、字体等)、点击事件等。

  2. RichText:组合多个TextSpan显示复杂富文本,类似Android的SpannableString渲染。

示例代码:

import { TextSpan, RichText } from '@ohos.text';

// 构建富文本
let span1 = new TextSpan({ content: "红色文本", style: { color: Color.Red } });
let span2 = new TextSpan({ content: "加粗文本", style: { fontWeight: FontWeight.Bold } });

// 组合显示
RichText.create([span1, span2]);

与Android的区别:

  • 鸿蒙通过声明式UI(ArkUI)实现,而非Android的SpannableStringBuilder命令式操作。

  • 功能覆盖基础样式(颜色、字体、背景等),但需注意API命名和参数差异。

需要动态修改文本时,可通过状态变量驱动UI更新。

回到顶部