当前位置：首页 > news >正文

HarmonyOS7 富文本混排页实战：RichText 与 Span 不只是会用，还要用得顺手

news 2026/7/17 20:17:36

文章目录

- - Span 不是为了把文字做花
  - 这个页面拆得比较清楚
  - 商品价格是最典型的场景
  - 写富文本时要克制
  - 完整代码
  - 写在最后

Span这个东西很容易被低估。它不像列表、弹窗那样一眼能看出交互价值，但只要页面里有价格、关键词、标签、评论摘要，局部文字样式基本都会用到它。

这篇用一个富文本混排页来讲Span。重点不是“怎么把文字变红”，而是怎么在一段Text里把不同语义的内容拆出来，让价格、优惠、关键词和评论重点各自有自己的视觉层级。

Span 不是为了把文字做花

我见过不少页面，一段文字里塞了四五种颜色、两三种字号，最后读起来很累。Span最适合做局部强调：价格里的货币符号和整数部分、原价的删除线、热搜榜里的排名、评论里的关键词。

也就是说，它应该服务信息层级，而不是单纯装饰。

这个页面拆得比较清楚

RichSpanArticlePage里没有复杂状态，主要靠Text() { Span(...) }组合不同片段。页面分成基础混排、商品价格、文章段落、热搜词和评论卡片几个区域，每个区域都对应一个常见业务场景。

看代码时可以先盯住Text()的花括号写法。普通Text('xxx')是一整段同样式文本；而Text() { Span(...) }可以让每个片段单独设置字号、颜色、字重、斜体、下划线或删除线。

商品价格是最典型的场景

价格展示里，¥、主价格、.00和“元起”用的是不同字号。这样用户第一眼会看到真正重要的数字，而不是被所有文字平均分散注意力。

原价删除线也很典型：它不是另起一个组件，而是在Span('¥599.00')上加decoration。这种写法比拆成多个Text更紧凑，对齐也更好控制。

写富文本时要克制

如果一段文案里每个词都想强调，最后等于没有重点。我的习惯是：一段文字只突出一个主信息，最多再带一个辅助信息。价格突出金额，榜单突出排名，评论突出关键词。这样页面才不会变成调色盘。

完整代码

下面是整理后的完整代码，入口组件名已经换成和当前场景匹配的名字，放进自己的页面目录后可以按项目路由规则接入。

// RichText 与 Span 富文本@Entry@Componentstruct RichSpanArticlePage{@StateshowCode:boolean=falsebuild(){Scroll(){Column({space:0}){// 标题Text('Span 富文本混排').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#111827').width('100%').padding({left:20,right:20,top:20,bottom:4})Text('Text 嵌套 Span 实现混合样式文本').fontSize(13).fontColor('#6B7280').width('100%').padding({left:20,right:20,bottom:16})// 一、基础 Span 混排Column({space:10}){Text('一、Span 基础用法').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#374151').width('100%')Text(){Span('普通文本 + ').fontSize(15).fontColor('#374151')Span('蓝色加粗 ').fontSize(15).fontColor('#2563EB').fontWeight(FontWeight.Bold)Span('红色斜体 ').fontSize(15).fontColor('#EF4444').fontStyle(FontStyle.Italic)Span('绿色下划线').fontSize(15).fontColor('#059669').decoration({type:TextDecorationType.Underline,color:'#059669'})}.width('100%').padding(12).backgroundColor('#F9FAFB').borderRadius(10)}.width('100%').padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// 二、文章正文混排（大小标注）Column({space:10}){Text('二、商品价格标注').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#374151').width('100%')Column({space:12}){// 价格展示Text(){Span('¥').fontSize(16).fontColor('#EF4444').fontWeight(FontWeight.Bold)Span('299').fontSize(32).fontColor('#EF4444').fontWeight(FontWeight.Bold)Span('.00').fontSize(18).fontColor('#EF4444')Span(' 元起').fontSize(13).fontColor('#9CA3AF')}Text(){Span('原价：').fontSize(13).fontColor('#9CA3AF')Span('¥599.00').fontSize(13).fontColor('#9CA3AF').decoration({type:TextDecorationType.LineThrough,color:'#9CA3AF'})Span(' 省了：').fontSize(13).fontColor('#9CA3AF')Span('¥300').fontSize(13).fontColor('#EF4444').fontWeight(FontWeight.Bold)}Text(){Span('📦 ')Span('包邮').fontSize(12).fontColor('#059669').fontWeight(FontWeight.Bold)Span(' | ').fontSize(12).fontColor('#D1D5DB')Span('🔄 ').fontSize(12)Span('7天退换').fontSize(12).fontColor('#2563EB')Span(' | ').fontSize(12).fontColor('#D1D5DB')Span('✅ ').fontSize(12)Span('正品保障').fontSize(12).fontColor('#D97706')}}.width('100%').padding(16).backgroundColor('#FFF7ED').borderRadius(10)}.width('100%').padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// 三、文章段落Column({space:10}){Text('三、文章段落排版').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#374151').width('100%')Column({space:8}){Text(){Span('ArkUI ').fontSize(15).fontColor('#2563EB').fontWeight(FontWeight.Bold)Span('是 HarmonyOS 应用开发的核心 UI 框架，提供了').fontSize(15).fontColor('#374151')Span('声明式').fontSize(15).fontColor('#7C3AED').fontWeight(FontWeight.Bold).decoration({type:TextDecorationType.Underline,color:'#7C3AED'})Span('的 UI 开发范式。开发者可以使用 ').fontSize(15).fontColor('#374151')Span('ArkTS').fontSize(15).fontColor('#EF4444').fontWeight(FontWeight.Bold)Span(' 语言直接描述 UI 的外观和行为，极大提升开发效率。').fontSize(15).fontColor('#374151')}.lineHeight(24)Text(){Span(' 核心优势：').fontSize(15).fontColor('#374151').fontWeight(FontWeight.Bold)Span('① ').fontSize(15).fontColor('#2563EB').fontWeight(FontWeight.Bold)Span('极简代码 ').fontSize(15).fontColor('#374151')Span('② ').fontSize(15).fontColor('#059669').fontWeight(FontWeight.Bold)Span('高性能渲染 ').fontSize(15).fontColor('#374151')Span('③ ').fontSize(15).fontColor('#D97706').fontWeight(FontWeight.Bold)Span('丰富组件').fontSize(15).fontColor('#374151')}.lineHeight(24)}.width('100%').padding(14).backgroundColor('#F0F9FF').borderRadius(10)}.width('100%').padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// 四、热搜标签Column({space:10}){Text('四、热搜词高亮').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#374151').width('100%')Column({space:8}){Text(){Span('1. ').fontSize(14).fontColor('#EF4444').fontWeight(FontWeight.Bold)Span('鸿蒙 OS 5.0 发布').fontSize(14).fontColor('#111827').fontWeight(FontWeight.Bold)Span(' 🔥').fontSize(14)Span(' 热').fontSize(11).fontColor('#EF4444').fontWeight(FontWeight.Bold)}Text(){Span('2. ').fontSize(14).fontColor('#F97316').fontWeight(FontWeight.Bold)Span('ArkUI 组件最佳实践').fontSize(14).fontColor('#111827')Span(' 📱').fontSize(14)Span(' 新').fontSize(11).fontColor('#2563EB').fontWeight(FontWeight.Bold)}Text(){Span('3. ').fontSize(14).fontColor('#D97706').fontWeight(FontWeight.Bold)Span('HarmonyOS 开发者大会').fontSize(14).fontColor('#111827')Span(' 🎉').fontSize(14)}Text(){Span('4. ').fontSize(14).fontColor('#6B7280').fontWeight(FontWeight.Bold)Span('移动端 AI 应用开发').fontSize(14).fontColor('#111827')Span(' 🤖').fontSize(14)Span(' 荐').fontSize(11).fontColor('#059669').fontWeight(FontWeight.Bold)}}.width('100%').padding(14).backgroundColor('#FAFAFA').borderRadius(10)}.width('100%').padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// 五、用户评论Column({space:10}){Text('五、用户评论卡片').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#374151').width('100%')Column({space:12}){Row({space:10}){Text('Z').fontSize(18).fontWeight(FontWeight.Bold).width(44).height(44).textAlign(TextAlign.Center).fontColor(Color.White).backgroundColor('#2563EB').borderRadius(22)Column({space:3}){Text(){Span('张三').fontWeight(FontWeight.Bold).fontColor('#111827').fontSize(14)Span(' 等级 Lv.6').fontSize(11).fontColor('#9CA3AF')}Text(){Span('⭐⭐⭐⭐⭐ ').fontSize(13)Span('非常好用！').fontSize(13).fontColor('#374151').fontWeight(FontWeight.Medium)}}.alignItems(HorizontalAlign.Start).layoutWeight(1)Text('2天前').fontSize(11).fontColor('#9CA3AF')}.width('100%').alignItems(VerticalAlign.Center)Text(){Span('这款').fontSize(14).fontColor('#374151')Span('ArkUI 框架').fontSize(14).fontColor('#2563EB').fontWeight(FontWeight.Bold)Span('真的很棒，开发效率提升了 ').fontSize(14).fontColor('#374151')Span('50%').fontSize(14).fontColor('#EF4444').fontWeight(FontWeight.Bold)Span(' 以上，强烈推荐给每一位').fontSize(14).fontColor('#374151')Span('鸿蒙开发者').fontSize(14).fontColor('#7C3AED').fontWeight(FontWeight.Bold)Span('！').fontSize(14).fontColor('#374151')}.lineHeight(22)}.width('100%').padding(14).backgroundColor('#FAFAFA').borderRadius(12)}.width('100%').padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:24})}}.width('100%').height('100%').backgroundColor('#FFFFFF')}}