HarmonyOS 鸿蒙Next text怎么更改部分文字颜色

发布于 1周前 作者 yibo5220 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next text怎么更改部分文字颜色

项目要求实现一大段文字中出现不同字体和颜色，鸿蒙现在不支持html，请问如何实现？

Harmonyos Next教程
7 回复

用富文本框Java的话，js就改改

更多关于HarmonyOS 鸿蒙Next text怎么更改部分文字颜色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


欢迎开发小伙伴们进来帮帮楼主
Java开发可以使用富文本框，JS开发可以使用多个text组合达到同样效果
string分割用forearch在Text中加Span在这里做特殊处理

if (this.item.keyword) { Text(${this.item.title}) { Span(${this.item.title?.substring(0, this.getTextIndex())}).fontSize(16) Span(${this.item.title?.substring(this.getTextIndex(), this.getTextIndex() + this.item.keyword?.length)}) .fontColor($r(‘app.color.zs_palette_c_e92b2b’)) .fontSize(16) Span(${this.item.title?.substring(this.getTextIndex() + this.item.keyword?.length, this.item.title.length)}) .fontSize(16) } .maxLines(2) .textAlign(TextAlign.Start) .textOverflow({ overflow: TextOverflow.Ellipsis }) }

getTextIndex():number{ let index = -1 if (this.item.title && this.item.keyword) { index = this.item.title?.search(this.item.keyword) } console.info(">>>>>>>getTextIndex="+index+",title.length="+this.item.title?.length) return index }

RichText用起来不好用

针对HarmonyOS 鸿蒙Next系统中如何更改部分文字颜色的问题，以下是专业解答：

在HarmonyOS 鸿蒙Next中，若要对Text组件中的部分文字更改颜色，可以使用Span组件进行嵌套实现。由于鸿蒙系统对富文本的支持目前有限，无法直接通过RichText等组件实现动态文本中部分文字的颜色更改，但Span组件提供了灵活的文本样式设置。

具体实现方法如下：

  1. 将需要更改颜色的文字部分用Span组件包裹。
  2. 通过Span组件的fontColor属性设置该部分文字的颜色。

例如，若要将“Hello”显示为红色，而“World”显示为蓝色，可以如下设置：

Text() {
    Span("Hello").fontColor(Color.Red) +
    Span(" ").fontColor(Color.Black) +  // 可选，添加空格并设置颜色
    Span("World").fontColor(Color.Blue)
}

这样即可实现部分文字颜色的更改。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部