【HarmonyOS】对动态文本中的字体颜色调整

一、需求说明

对整体段落中的部分文字的颜色进行调整,如下图:

二、需求分析

该段文字展示时为一个整体段落,可以使用Text组件嵌套Span组件进行实现。

Span 只能作为 TextRichEditor 组件的子组件显示文本内容。可以在一个Text内添加多个Span来显示一段信息,例如产品说明书、承诺书等。

Span组件需要写到Text组件内,单独写Span组件不会显示信息,Text与Span同时配置文本内容时,Span内容覆盖Text内容。

三、解决办法

html 复制代码
Column() {
  Text() {
    Span(`您已经成功完成报名。请在 `)
      .fontSize(14)
      .fontColor('#616366')
    Span(`开始时间 - 结束时间(具体时间由各市根据实际情况安排)`)
      .fontSize(14)
      .fontColor('#fd7e2b')
    Span(`前往现场审查,否则视为放弃考试报名。`)
      .fontSize(14)
      .fontColor('#616366')
  }
  .lineHeight(20)
}
.width('100%')
.padding(12)
.backgroundColor('#FFF')

四、参考链接

参考1:

【HarmonyOS NEXT】一段动态文本,动态长度,如何改变这段文本中某几个字的颜色_鸿蒙next 文字匹配变色-CSDN博客

参考2:

文本显示 (Text/Span)-添加常用组件-添加组件-UI开发 (ArkTS声明式开发范式)-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者 (huawei.com)

相关推荐
安卓开发者2 小时前
鸿蒙NEXT自定义能力详解:从基础使用到高级技巧
华为·harmonyos
特立独行的猫a3 小时前
HarmonyOS 鸿蒙系统自带的 SymbolGlyph 图标组件详解
华为·harmonyos·图标·symbolglyph
2501_919749033 小时前
鸿蒙:使用EventHub实现多模块之间的通信
华为·harmonyos
2501_919749039 小时前
鸿蒙:使用Emitter进行线程间通信
华为·harmonyos
SuperHeroWu711 小时前
【HarmonyOS 6】仿AI唤起屏幕边缘流光特效
华为·harmonyos·特效·鸿蒙6.0·流光·ai唤起·屏幕边缘
gcios13 小时前
鸿蒙-flutter 混合开发
harmonyos
特立独行的猫a13 小时前
HarmonyOS应用开发之界面列表不刷新问题Bug排查记:从现象到解决完整记录
华为·bug·harmonyos·ui刷新
安卓开发者14 小时前
鸿蒙Next的UI国际化与无障碍适老化实践:构建全球包容的数字世界
ui·华为·harmonyos
爱笑的眼睛111 天前
深入剖析 HarmonyOS ArkUI 声明式开发:状态管理艺术与最佳实践
华为·harmonyos
安卓开发者1 天前
鸿蒙NEXT交互机制解析:从输入设备到手势响应的全面指南
microsoft·交互·harmonyos