一、需求说明
对整体段落中的部分文字的颜色进行调整,如下图:
二、需求分析
该段文字展示时为一个整体段落,可以使用Text组件嵌套Span组件进行实现。
Span 只能作为 Text 和 RichEditor 组件的子组件显示文本内容。可以在一个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)