文章目录前言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 做富文本EntryComponentstruct 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 混排排版会专业很多。
HarmonyOS7 富文本与图文混排：Text 进阶用法
文章目录前言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 做富文本EntryComponentstruct 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 混排排版会专业很多。
