文章目录
- 前言
- Span：一段里多种样式
- 代码实现
- ImageSpan：文字里插图片
- 核心代码
- 可点击的富文本（链接/@提及）
- 完整示例
- 实战：一条带表情的评论
- 常见误区（小白必踩）
- 完整可运行示例：图文混排
- 代码解析
- 写在最后
前言
普通Text('一段文字')只能显示单一样式。但真实内容常常"一段里又有红字、又有链接、又插了个小图标"——这叫富文本 / 图文混排。
HarmonyOS 的Text通过Span、ImageSpan、EmojiSpan等子组件实现富文本。这篇文章把最常用的混排玩法讲清，让你做出"像微信那种"的富内容。
Span：一段里多种样式
Text里面可以放多个Span，每个 Span 单独设样式：
代码实现
Text(){Span('价格：').fontSize(14).fontColor('#666666')Span('¥99').fontSize(20).fontColor('#FF4500').fontWeight(FontWeight.Bold)Span(' 限时').fontSize(12).fontColor('#FFFFFF').backgroundColor('#FF4500').padding({left:4,right:4})}讲解：
Text() { Span() Span() ... }：Span 是 Text 的"内联子段"，拼成一行富文本。- 每个 Span 独立设字号、颜色、背景——于是"价格：¥99 限时"里，数字红且大、标签带底色。
- 适合做商品标题、提示语这类"一段多风格"文字。
ImageSpan：文字里插图片
想在一行文字里塞个小图标或表情？用ImageSpan：
核心代码
Text(){Span('点击')ImageSpan($r('app.media.icon_arrow')).width(16).height(16).verticalAlign(ImageSpanAlignment.CENTER)// 垂直居中于文字Span('查看详情')}ImageSpan和Span混排在Text里，实现"文字 + 图标"同行。verticalAlign控制图片相对文字的对齐，避免图标飘在上面。
可点击的富文本（链接/@提及）
给某段加点击：
完整示例
Text(){Span('@小明 ').fontColor('#4A90E2').onClick(()=>{this.openUser('小明')})Span('评论了你的动态')}Span也支持onClick，于是"@某人"可点进主页、"链接"可点跳转——这就是社交 app 评论区的做法。
实战：一条带表情的评论
Text(){ImageSpan($r('app.media.emoji_smile')).width(20).height(20).verticalAlign(ImageSpanAlignment.CENTER)Span(' 今天天气真好！').fontSize(15)Span(' #周末去哪玩').fontColor('#4A90E2').onClick(()=>this.openTopic())}一个Text里同时有表情图、普通文字、可点话题，这就是典型的富内容行。
常见误区（小白必踩）
| 误区 | 说明 |
|---|---|
用多个Text拼接代替Span | "一段多风格"文字用Text(){ Span() Span() }，别拆成多个 Text 拼行。 |
ImageSpan不对齐 | 图片插在文字里要设verticalAlign居中，否则图标飘在上面。 |
| Span 嵌套太深 | 可以嵌套但不宜过深，超长富文本注意性能。 |
下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲，改一改文末「动手改一改」里的参数，亲眼看看效果。
完整可运行示例：图文混排
用Span在一个Text里混排文字与样式。
代码解析
// Text 内用 Span 做富文本@Entry@Componentstruct RichText{build(){Column({space:16}){Text(){Span('特价 ').fontSize(16)Span('¥99').fontSize(24).fontColor('#E53935').fontWeight(FontWeight.Bold)Span(' 仅限今天').fontSize(12).fontColor('#999')}// 图文混排：Image 作为 SpanText(){ImageSpan($r('app.media.icon')).width(20).height(20)Span(' 已认证商家').fontSize(14)}}.padding(20)}}你会看到什么：一行里「特价」小字 + 红色大字「¥99」+ 灰色「仅限今天」混排；另一行图标和文字并排，像电商商品标签。
动手改一改：
- 给
Span加.decoration({ type: TextDecorationType.LineThrough })做删除线价。 - 用
ImageSpan拼出「图标+文字+图标」的标签条。 - 把整段抽成函数，按数据动态生成富文本。
写在最后
富文本就三件套：Span 管文字分段样式、ImageSpan 管插图、onClick 管交互。把它们塞进同一个Text，就能做出微信评论、商品标题、带图标签这类"一行多形态"的内容。
提醒：Span 里再嵌 Span 是允许的，但别嵌套太深；超长富文本注意性能，必要时分多个 Text。现在就把你项目里的"拼接字符串 + 多个 Text"改成 Span 混排，排版会专业很多。
