HarmonyOS鸿蒙Next中有类似Android SpannableStringBuilder的API吗?
HarmonyOS鸿蒙Next中有类似Android SpannableStringBuilder的API吗?
【背景知识】
属性字符串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
您好,可参考文档属性字符串,看能否满足您的诉求:
注意CustomSpan如需存储自定义信息,需要重写onMeasure、onDraw方法
HarmonyOS Next中提供了Text
组件来支持富文本显示,类似于Android的SpannableStringBuilder
。通过Text
组件,开发者可以设置不同的样式、颜色、字体等属性,实现复杂的文本显示效果。具体可参考Text
组件的相关文档和API。
在HarmonyOS Next中,确实提供了类似Android SpannableStringBuilder的功能,主要通过TextSpan
和RichText
组件实现。
核心API包括:
-
TextSpan:用于构建富文本片段,支持设置字体样式(颜色、大小、字体等)、点击事件等。
-
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更新。