《古诗文解析模板》二、Text指南

发布时间：2026/7/18 5:29:46

《古诗文解析模板》二、Text指南 HarmonyOS NEXT 开发实战ArkUI Text 文本组件完全指南效果一、前言Text是 ArkUI 框架中最基础也最常用的组件之一用于在界面上显示文字内容。无论是简单的标签文案还是复杂的富文本排版Text组件都能胜任。本文将从基础用法出发逐步深入讲解Text组件的核心属性、样式控制、文本装饰、事件交互等知识点并通过多个实战示例帮助你全面掌握 Text 组件的使用技巧。二、基本用法2.1 创建文本Text组件接受三种类型的参数// 方式一直接传入字符串Text(Hello HarmonyOS)// 方式二传入资源引用支持多语言Text($r(app.string.hello))// 方式三无参创建通过子组件 Span 组合内容Text(){Span(Hello )Span(HarmonyOS).fontColor(#FF6B35)}2.2 基础属性速查Text(示例文本).fontSize(16)// 字体大小单位fp默认值 16fp.fontWeight(FontWeight.Normal)// 字体粗细.fontColor(#333333)// 字体颜色.fontFamily(sans-serif)// 字体族.fontStyle(FontStyle.Normal)// 字体风格正常/斜体.letterSpacing(2)// 字符间距.lineHeight(24)// 行高.textAlign(TextAlign.Start)// 文本对齐方式.maxLines(3)// 最大显示行数.textOverflow({overflow:TextOverflow.Ellipsis})// 文本溢出处理三、核心属性详解3.1 字体大小fontSizeText(标题文本).fontSize(28)// 数字类型单位 fpText(正文文本).fontSize(14fp)// 字符串类型Text(说明文本).fontSize($r(app.float.text_size))// 资源引用提示fpfont point是字体专用单位当用户调整系统字体大小时fp单位的字体会随之缩放vp单位则不会。推荐在文本场景使用fp。3.2 字体粗细fontWeightText(正常).fontWeight(FontWeight.Normal)// 400Text(加粗).fontWeight(FontWeight.Bold)// 700Text(中等).fontWeight(FontWeight.Medium)// 500Text(细体).fontWeight(FontWeight.Lighter)// 300Text(自定义).fontWeight(600)// 数字 100-900常用 FontWeight 枚举值枚举值对应数值适用场景FontWeight.Lighter300次要信息、辅助说明FontWeight.Normal400正文内容FontWeight.Medium500副标题、列表标题FontWeight.Bold700大标题、重点强调3.3 字体颜色fontColorText(十六进制颜色).fontColor(#FF6B35)Text(命名颜色).fontColor(Color.Blue)Text(RGBA颜色).fontColor(rgba(255, 107, 53, 0.8))Text(资源引用).fontColor($r(app.color.primary_text))3.4 文本对齐textAlignText(左对齐文本).textAlign(TextAlign.Start)// 左对齐默认.width(100%)Text(居中文本).textAlign(TextAlign.Center)// 居中对齐Text(右对齐文本).textAlign(TextAlign.End)// 右对齐注意textAlign生效需要父容器或自身有足够的宽度否则文本宽度等于内容宽度时对齐方式看不出效果。3.5 字符间距letterSpacingText(标准间距).letterSpacing(0)Text(宽松间距).letterSpacing(4)// 古诗词排版常用Text(紧凑间距).letterSpacing(-0.5)// 英文排版优化3.6 行高lineHeightText(标准行高).fontSize(16).lineHeight(24)// 1.5倍行高阅读体验最佳Text(宽松行高).fontSize(14).lineHeight(26)// 长文本阅读推荐经验值中文正文推荐行高 字号 × 1.5~1.8 倍英文正文推荐行高 字号 × 1.4~1.6 倍。3.7 文本溢出处理当文本内容超出显示区域时可以通过textOverflow和maxLines控制溢出行为Text(这是一段非常长的文本内容超出了显示区域需要截断处理...).maxLines(2)// 最多显示2行.textOverflow({overflow:TextOverflow.Ellipsis})// 超出部分显示省略号.width(300)TextOverflow 枚举值效果说明TextOverflow.None正常换行不截断可能溢出容器TextOverflow.Clip直接截断超出部分被裁切TextOverflow.Ellipsis省略号截断超出部分显示 “…”四、文本装饰4.1 文本装饰线decorationText(下划线文本).decoration({type:TextDecorationType.Underline,color:#FF6B35})Text(删除线文本).decoration({type:TextDecorationType.LineThrough,color:#999999})Text(上划线文本).decoration({type:TextDecorationType.Overline,color:#666666})4.2 文本阴影textShadowText(带阴影的文本).fontSize(24).fontWeight(FontWeight.Bold).textShadow({radius:8,color:rgba(0,0,0,0.3),offsetX:2,offsetY:2})4.3 文本渐变填充gradient通过foregroundLinearGradient实现渐变文字效果Text(渐变文字).fontSize(32).fontWeight(FontWeight.Bold).foregroundLinearGradient({direction:GradientDirection.Right,colors:[[#FF6B35,0.0],[#FF1744,0.5],[#D500F9,1.0]]})五、富文本组合SpanText组件可以包含Span子组件实现同一行内不同文字不同样式的富文本效果Text(){Span(作者).fontSize(14).fontColor(#999999)Span(李白).fontSize(16).fontColor(#333333).fontWeight(FontWeight.Medium)Span(唐代).fontSize(13).fontColor(#AAAAAA)}Span 支持的样式属性属性说明fontSize字体大小fontColor字体颜色fontWeight字体粗细fontFamily字体族fontStyle字体风格decoration文本装饰线letterSpacing字符间距backgroundColor文字背景色六、完整实战示例6.1 示例诗词卡片排版EntryComponentV2struct TextDemo{build(){Column(){// 标题 Text(静夜思).fontSize(30).fontWeight(FontWeight.Bold).fontColor(#1a1a2e).letterSpacing(10).margin({top:40})// 作者信息Span 组合Text(){Span([).fontColor(#999999)Span(唐代).fontColor(#666666).fontWeight(FontWeight.Medium)Span(] ).fontColor(#999999)Span(李白).fontColor(#1a1a2e).fontSize(18).fontWeight(FontWeight.Medium)}.fontSize(16).margin({top:12})// 诗句正文 Column({space:16}){Text(床前明月光).fontSize(20).fontColor(#333333).letterSpacing(4).lineHeight(32)Text(疑是地上霜。).fontSize(20).fontColor(#333333).letterSpacing(4).lineHeight(32)Text(举头望明月).fontSize(20).fontColor(#333333).letterSpacing(4).lineHeight(32)Text(低头思故乡。).fontSize(20).fontColor(#333333).letterSpacing(4).lineHeight(32)}.margin({top:30}).alignItems(HorizontalAlign.Center).width(100%)// 分隔线 Divider().color(#EEEEEE).strokeWidth(1).margin({top:30,bottom:30}).width(60%)// 诗意赏析 Column(){Text(诗意赏析).fontSize(15).fontWeight(FontWeight.Medium).fontColor(#FF6B35).margin({bottom:8})Text(这首诗写的是在寂静的月夜思念家乡的感受。诗人通过描写月光照射在床前的景象联想到秋天的白霜进而抬头望月低头思念远方的故乡。全诗语言朴素自然意境深远是李白的代表作之一。).fontSize(14).fontColor(#666666).lineHeight(24).textAlign(TextAlign.Start)}.width(85%).padding(20).borderRadius(16).backgroundColor(#F8F8F8).alignItems(HorizontalAlign.Start)Blank()}.width(100%).height(100%).backgroundColor(#FFFFFF).alignItems(HorizontalAlign.Center)}}七、Text 组件与交互事件7.1 点击事件Text(点击查看详情).fontSize(16).fontColor(#1976D2).onClick((){// 处理点击事件console.info(文本被点击)})7.2 长按事件Text(长按复制).fontSize(16).gesture(LongPressGesture().onAction((){console.info(触发长按)}))7.3 可复制文本Text(可以长按复制的文本).fontSize(16).copyOption(CopyOptions.LocalDevice)// 允许复制到本地剪贴板八、常用排版场景速查表场景推荐配置页面大标题fontSize(28),fontWeight(Bold),fontColor(#1a1a2e)列表标题fontSize(16),fontWeight(Medium),maxLines(1)Ellipsis正文段落fontSize(14),lineHeight(22),fontColor(#333333)辅助说明fontSize(12),fontColor(#999999)古诗词fontSize(20),letterSpacing(4~8),textAlign(Center)价格数字fontSize(24),fontWeight(Bold),fontColor(#FF4444)链接文本fontColor(#1976D2),decoration(Underline)九、常见问题与最佳实践9.1 fp 与 vp 的区别fpfont point字体专用单位跟随系统字体大小设置缩放vpvirtual pixel虚拟像素单位不跟随系统字体设置推荐文本内容使用fp单位默认即为 fp确保应用支持系统级字体大小调整提升无障碍体验。9.2 多行文本居中Text(第一行\n第二行\n第三行).textAlign(TextAlign.Center)// 行内居中对齐.multilineTextAlignment(TextAlign.Center)// 多行文本整体居中API 79.3 文本自适应缩放当文本可能超出容器宽度时可以使用autoSize让文本自动缩小字号以适应容器Text(这段文本可能很长需要自适应缩放显示).fontSize(20).autoSize({minSize:12,maxSize:20}).width(200)十、总结Text组件是 ArkUI 中最基础且使用频率最高的组件。掌握以下核心要点即可应对大多数文本排版需求知识点关键要点基本创建字符串 / 资源引用 / Span 子组件字体控制fontSize、fontWeight、fontColor、fontFamily排版控制textAlign、letterSpacing、lineHeight溢出处理maxLinestextOverflow装饰效果decoration、textShadow、foregroundLinearGradient富文本Span子组件实现混合样式交互能力onClick、copyOption、gesture参考文档Text - 华为开发者文档

相关新闻

相关新闻

《古诗文解析模板》一、Popup控制指南

《古诗文解析模板》一、Popup控制指南

HarmonyOS NEXT 开发实战：ArkUI Popup 气泡控制完全指南 效果 一、前言 在 HarmonyOS 应用开发中，气泡弹窗（Popup）是一种轻量级的信息展示方式。它可以在不离开当前页面的情况下，为用户展示额外的说明文字、操作提示…

2026/7/18 5:29:46
LLM安全评估框架Garak：从原理到实战的自动化漏洞探测指南

LLM安全评估框架Garak：从原理到实战的自动化漏洞探测指南

1. 项目概述：为什么我们需要一个LLM安全评估框架？最近在搞大语言模型应用落地的朋友，估计都遇到过类似的头疼事：模型在测试集上跑得挺好，一到真实场景，要么被用户几句“花言巧语”套出不该说的话&#xff0…

2026/7/18 5:29:46
AR智能眼镜技术解析与未来发展趋势

AR智能眼镜技术解析与未来发展趋势

1. AR智能眼镜的现状与核心体验当前主流AR眼镜如Rokid AR Lite已经实现了三大突破性体验：首先是显示技术的革新，采用索尼Micro OLED屏幕，入眼亮度600nits、120Hz刷新率的配置，相当于在6米外观看300英寸巨幕。这种显示方案解决了早…

2026/7/18 5:29:46

最新新闻

从零理解CPU架构：冯·诺依曼模型、指令集与缓存设计全解析

从零理解CPU架构：冯·诺依曼模型、指令集与缓存设计全解析

1. 项目概述：从“黑盒子”到“指挥中心”“CPU Architecture Explained”这个标题，听起来像是一本厚重的教科书第一章，但别被它吓到。我们每天接触的手机、电脑、甚至智能手表，其“大脑”的核心就是CPU。它不是一个神秘的黑盒子&a…

2026/7/18 7:39:53
Jetpack Compose BOM：Android依赖管理新方案

Jetpack Compose BOM：Android依赖管理新方案

1. Jetpack Compose BOM 初探作为一个在Android开发领域摸爬滚打多年的老手，第一次看到"BOM"这个缩写时也愣了一下。这可不是制造业里的"物料清单"，而是Google为Jetpack Compose量身打造的一个依赖管理神器。简单来说，Co…

2026/7/18 7:39:53
Android WebView视频播放音频焦点管理方案

Android WebView视频播放音频焦点管理方案

1. 项目背景与核心问题在Android应用开发中，WebView组件内播放视频时经常遇到一个典型场景：当用户切换到其他音乐类App时，WebView中的视频播放会被系统强制中断。这个现象源于Android系统的音频焦点（Audio Focus）机制&…

2026/7/18 7:39:53
SI4735库扩展开发终极指南：自定义功能与第三方库集成

SI4735库扩展开发终极指南：自定义功能与第三方库集成

SI4735库扩展开发终极指南：自定义功能与第三方库集成 【免费下载链接】SI4735 SI473X Library for Arduino 项目地址: https://gitcode.com/gh_mirrors/si/SI4735 SI4735库是Arduino平台上最强大的广播接收器控制库之一，专为Silicon Labs SI473X系…

2026/7/18 7:39:53
如何在VS Code中高效使用Overleaf-Workshop：专业LaTeX编辑的完整指南

如何在VS Code中高效使用Overleaf-Workshop：专业LaTeX编辑的完整指南

如何在VS Code中高效使用Overleaf-Workshop：专业LaTeX编辑的完整指南 【免费下载链接】Overleaf-Workshop Open Overleaf/ShareLaTex projects in vscode, with full collaboration support. 项目地址: https://gitcode.com/gh_mirrors/ov/Overleaf-Workshop …

2026/7/18 7:39:53
DDR内存技术解析与嵌入式系统应用

DDR内存技术解析与嵌入式系统应用

1. DDR内存技术概述DDR（Double Data Rate）内存作为现代计算机系统的核心组件，其发展历程可追溯至上世纪90年代末。与传统SDR（Single Data Rate）内存相比，DDR技术通过在时钟信号的上升沿和下降沿都进行数据传…

2026/7/18 7:34:53

日新闻

鸿蒙 ArkTS 实战：Conference Interpretation Glossary 从业务记录到移动工作台完整解析

鸿蒙 ArkTS 实战：Conference Interpretation Glossary 从业务记录到移动工作台完整解析

鸿蒙 ArkTS 实战：Conference Interpretation Glossary 从业务记录到移动工作台完整解析 前言 Conference Interpretation Glossary 是一个面向 会议口译术语库 的鸿蒙 ArkTS 单页应用。它的实现并不追求复杂后台，而是把一线业务里最常见的记录、数量统…

2026/7/18 0:04:27
LLM 核心参数完整详解：Token、上下文窗口、temperature、top_p、max_tokens、流式输出 SSE

LLM 核心参数完整详解：Token、上下文窗口、temperature、top_p、max_tokens、流式输出 SSE

目录 一、Token（令牌 / 词元） 1. 什么是 Token 2. Token 换算规则（通用参考） 3. 两类 Token 4. 举例 二、Context Window 上下文窗口（上下文长度） 1. 定义 2. 工作逻辑 3. 常见模型窗口规格 4. 实…

2026/7/18 0:04:27
微信小程序二维码生成深度解析：weapp-qrcode架构设计与最佳实践

微信小程序二维码生成深度解析：weapp-qrcode架构设计与最佳实践

微信小程序二维码生成深度解析：weapp-qrcode架构设计与最佳实践 【免费下载链接】weapp-qrcode weapp.qrcode.js 在 微信小程序 中，快速生成二维码 项目地址: https://gitcode.com/gh_mirrors/we/weapp-qrcode 在微信小程序开发中，二维…

2026/7/18 0:04:27

周新闻

VSCode TypeScript 环境配置对比：全局安装 vs 项目本地安装的4个关键差异

VSCode TypeScript 环境配置对比：全局安装 vs 项目本地安装的4个关键差异

VSCode TypeScript 环境配置对比：全局安装 vs 项目本地安装的4个关键差异当你在VSCode中启动一个新的TypeScript项目时，第一个技术决策往往从安装方式开始。这个看似简单的选择——全局安装还是项目本地安装——实际上会深刻影响你的开发流程、团队协作和…

2026/7/16 8:27:49
智慧树刷课插件：5分钟实现自动化学习的智能助手

智慧树刷课插件：5分钟实现自动化学习的智能助手

智慧树刷课插件：5分钟实现自动化学习的智能助手 【免费下载链接】zhihuishu 智慧树刷课插件，自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 智慧树刷课插件是一款专为智慧树在线教育平台设计的Chrome浏…

2026/7/18 7:22:53
Steam创意工坊下载器WorkshopDL：跨平台游戏模组获取的终极解决方案

Steam创意工坊下载器WorkshopDL：跨平台游戏模组获取的终极解决方案

Steam创意工坊下载器WorkshopDL：跨平台游戏模组获取的终极解决方案 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 你是否在GOG或Epic Games Store购买了心仪的游戏…

2026/7/17 21:04:56

月新闻