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

文章目录Span 不是为了把文字做花这个页面拆得比较清楚商品价格是最典型的场景写富文本时要克制完整代码写在最后Span这个东西很容易被低估。它不像列表、弹窗那样一眼能看出交互价值但只要页面里有价格、关键词、标签、评论摘要局部文字样式基本都会用到它。这篇用一个富文本混排页来讲Span。重点不是“怎么把文字变红”而是怎么在一段Text里把不同语义的内容拆出来让价格、优惠、关键词和评论重点各自有自己的视觉层级。Span 不是为了把文字做花我见过不少页面一段文字里塞了四五种颜色、两三种字号最后读起来很累。Span最适合做局部强调价格里的货币符号和整数部分、原价的删除线、热搜榜里的排名、评论里的关键词。也就是说它应该服务信息层级而不是单纯装饰。这个页面拆得比较清楚RichSpanArticlePage里没有复杂状态主要靠Text() { Span(...) }组合不同片段。页面分成基础混排、商品价格、文章段落、热搜词和评论卡片几个区域每个区域都对应一个常见业务场景。看代码时可以先盯住Text()的花括号写法。普通Text(xxx)是一整段同样式文本而Text() { Span(...) }可以让每个片段单独设置字号、颜色、字重、斜体、下划线或删除线。商品价格是最典型的场景价格展示里¥、主价格、.00和“元起”用的是不同字号。这样用户第一眼会看到真正重要的数字而不是被所有文字平均分散注意力。原价删除线也很典型它不是另起一个组件而是在Span(¥599.00)上加decoration。这种写法比拆成多个Text更紧凑对齐也更好控制。写富文本时要克制如果一段文案里每个词都想强调最后等于没有重点。我的习惯是一段文字只突出一个主信息最多再带一个辅助信息。价格突出金额榜单突出排名评论突出关键词。这样页面才不会变成调色盘。完整代码下面是整理后的完整代码入口组件名已经换成和当前场景匹配的名字放进自己的页面目录后可以按项目路由规则接入。// RichText 与 Span 富文本EntryComponentstruct RichSpanArticlePage{StateshowCode:booleanfalsebuild(){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)}}写在最后这个例子不复杂但很适合反复看。很多 ArkUI 页面写不顺其实不是组件不会用而是状态、结构和反馈没有放在一起设计。