【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)

相关推荐
爱笑的眼睛1116 小时前
HarmonyOS 应用开发深度解析:基于声明式UI的现代化状态管理实践
华为·harmonyos
前端世界16 小时前
HarmonyOS 实战:如何用数据压缩和解压让应用更快更省
华为·harmonyos
安卓开发者17 小时前
鸿蒙Next Web组件详解:属性设置与事件处理实战
前端·华为·harmonyos
安卓开发者17 小时前
鸿蒙NEXT Web组件与JavaScript交互:打通原生与前端的桥梁
前端·javascript·harmonyos
森之鸟17 小时前
鸿蒙审核问题——折叠屏展开态切换时,输入框内容丢失
华为·harmonyos
不爱吃糖的程序媛17 小时前
表格底部增加一行合计功能的实现
华为·harmonyos
猫林老师21 小时前
HarmonyOS 5分布式数据管理初探:实现跨设备数据同步
分布式·harmonyos
爱笑的眼睛111 天前
HarmonyOS 应用开发深度解析:ArkUI 声明式 UI 与现代化状态管理最佳实践
华为·harmonyos
被开发耽误的大厨1 天前
鸿蒙项目篇-22-项目功能结构说明-写子页面和导航页面
android·华为·harmonyos·鸿蒙
祥睿夫子2 天前
鸿蒙 ArkTS 类继承与多态实战:从语法到员工工资计算全指南
harmonyos