文章目录字重不是越粗越醒目截断和展开要一起设计动态调参适合做设计验证页面结构怎么看完整代码写在最后Text是 ArkUI 里最常见的组件也最容易被忽略。很多页面看着“不高级”不是布局有多差而是字体大小、字重、行高、截断这些基础排版没处理好。这个 HarmonyOS7 案例把 Text 的常用属性集中放到一个页面里适合当排版速查也适合拿来调团队里的文字规范。字重不是越粗越醒目页面第一块演示FontWeight。标题可以粗一点正文保持正常辅助信息降低颜色和字重这样层级才清楚。如果所有文字都加粗用户反而抓不到重点。这类页面最重要的不是把属性列全而是让你看到属性之间的差异。Lighter、Normal、Medium、Bold放在一起对比会很直观。截断和展开要一起设计长文本区域用到了maxLines和展开状态。很多内容卡片都会遇到这个问题简介太长会撑爆页面但直接截断又可能影响理解。这里用isExpanded控制展开收起用maxLines控制默认显示行数。这个思路可以直接用在商品简介、评论内容、文章摘要里。动态调参适合做设计验证fontSize、letterSpacing、lineHeight这些状态让页面可以实时调节文字效果。它们看似是样式参数实际影响阅读体验很大。行高太小会挤字间距太大又散。尤其是中文正文行高通常要比字号大一截读起来才不累。页面结构怎么看TextTypographyPage分成字重、样式和装饰线、对齐方式、截断展开、动态调节。读代码时可以先看longText和几个状态字段再看每个 Text 属性如何影响最终效果。如果你在做一个真实 App我建议把这篇里的参数整理成设计规范比如标题 20、正文 14、辅助信息 12再用统一样式复用页面会稳定很多。完整代码下面是完整代码。入口组件名是TextTypographyPage可以作为 HarmonyOS7 Text 排版属性的练习页和速查页。// 文本组件 Text 全属性interfaceTextSample{id:numbertitle:stringcontent:stringfontSize:numberfontColor:stringfontWeight:FontWeight fontStyle:FontStyle decoration:TextDecorationType textAlign:TextAlign maxLines:numberlineHeight:numberletterSpacing:number}EntryComponentstruct TextTypographyPage{StatefontSize:number16StateletterSpacing:number0StatelineHeight:number22StatemaxLines:number3StateisExpanded:booleanfalseStateselectedAlign:TextAlignTextAlign.StartprivatelongText:string这是一段用于展示文本截断效果的长文本。ArkUI 提供了丰富的文本组件属性包括字体大小、颜色、行高、字间距、对齐方式、最大行数、溢出处理等可以满足各种复杂的文本展示需求。点击展开可查看完整内容。build(){Scroll(){Column({space:0}){// 标题Text(Text 文本组件全属性).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#111827).width(100%).padding({left:20,right:20,top:20,bottom:4})Text(字体、颜色、间距、对齐、截断等).fontSize(13).fontColor(#6B7280).width(100%).padding({left:20,right:20,bottom:16})// 一、字体粗细Column({space:10}){Text(一、FontWeight 字体粗细).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Column({space:6}){Text(Lighter200).fontSize(16).fontWeight(FontWeight.Lighter).fontColor(#1F2937)Text(Normal400).fontSize(16).fontWeight(FontWeight.Normal).fontColor(#1F2937)Text(Regular400).fontSize(16).fontWeight(FontWeight.Regular).fontColor(#1F2937)Text(Medium500).fontSize(16).fontWeight(FontWeight.Medium).fontColor(#1F2937)Text(Bold700).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#1F2937)Text(Bolder900).fontSize(16).fontWeight(FontWeight.Bolder).fontColor(#1F2937)}.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(二、FontStyle 与装饰线).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Column({space:8}){Text(普通文本 Normal).fontSize(15).fontStyle(FontStyle.Normal).fontColor(#1F2937)Text(斜体文本 Italic).fontSize(15).fontStyle(FontStyle.Italic).fontColor(#2563EB)Text(下划线文本).fontSize(15).fontColor(#059669).decoration({type:TextDecorationType.Underline,color:#059669})Text(删除线文本).fontSize(15).fontColor(#EF4444).decoration({type:TextDecorationType.LineThrough,color:#EF4444})Text(上划线文本).fontSize(15).fontColor(#7C3AED).decoration({type:TextDecorationType.Overline,color:#7C3AED})}.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(三、TextAlign 对齐方式).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Row({space:8}){ForEach([TextAlign.Start,TextAlign.Center,TextAlign.End],(align:TextAlign){Button(alignTextAlign.Start?左对齐:alignTextAlign.Center?居中:右对齐).fontSize(12).fontColor(this.selectedAlignalign?#FFFFFF:#374151).backgroundColor(this.selectedAlignalign?#2563EB:#F3F4F6).borderRadius(16).padding({left:12,right:12,top:6,bottom:6}).onClick(():void{this.selectedAlignalign})},(align:TextAlign)align.toString())}Text(床前明月光疑是地上霜。举头望明月低头思故乡。).fontSize(15).fontColor(#1F2937).textAlign(this.selectedAlign).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(四、maxLines 截断与展开).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Column({space:8}){Text(this.longText).fontSize(14).fontColor(#374151).lineHeight(22).maxLines(this.isExpanded?100:3).textOverflow({overflow:TextOverflow.Ellipsis}).width(100%)Text(this.isExpanded?收起 ↑:展开 ↓).fontSize(13).fontColor(#2563EB).onClick(():void{this.isExpanded!this.isExpanded})}.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%)Text(ArkUI 文字效果实时预览拖动滑块查看效果).fontSize(this.fontSize).fontColor(#2563EB).letterSpacing(this.letterSpacing).lineHeight(this.lineHeight).width(100%).padding(12).backgroundColor(#EFF6FF).borderRadius(10)// 字体大小Row({space:10}){Text(字号).fontSize(12).fontColor(#6B7280).width(40)Slider({value:this.fontSize,min:10,max:28,step:1,style:SliderStyle.OutSet}).layoutWeight(1).selectedColor(#2563EB).trackColor(#E5E7EB).onChange((v:number):void{this.fontSizev})Text(this.fontSize.toString()).fontSize(12).fontColor(#2563EB).width(28)}.width(100%).alignItems(VerticalAlign.Center)// 字间距Row({space:10}){Text(字距).fontSize(12).fontColor(#6B7280).width(40)Slider({value:this.letterSpacing,min:0,max:10,step:0.5,style:SliderStyle.OutSet}).layoutWeight(1).selectedColor(#7C3AED).trackColor(#E5E7EB).onChange((v:number):void{this.letterSpacingv})Text(this.letterSpacing.toFixed(1)).fontSize(12).fontColor(#7C3AED).width(28)}.width(100%).alignItems(VerticalAlign.Center)// 行高Row({space:10}){Text(行高).fontSize(12).fontColor(#6B7280).width(40)Slider({value:this.lineHeight,min:14,max:40,step:1,style:SliderStyle.OutSet}).layoutWeight(1).selectedColor(#059669).trackColor(#E5E7EB).onChange((v:number):void{this.lineHeightv})Text(this.lineHeight.toString()).fontSize(12).fontColor(#059669).width(28)}.width(100%).alignItems(VerticalAlign.Center)}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:24})}}.width(100%).height(100%).backgroundColor(#FFFFFF)}}写在最后如果你正在整理 HarmonyOS7 组件案例可以把这篇当成Text的实践模板。先跑通页面再逐步替换数据和样式效率会高不少。