# 🌟 HarmonyOS应用开发实战 | ArkTS文本控件使用指南
·
💫 坚果派·红目香薰 倾情分享
🎯 用心打造每一个技术细节，为开发者创造更多价值
📱 让HarmonyOS开发变得更简单、更有趣
✨ 写在前面的话
嗨，亲爱的技术朋友们！👋
我是来自坚果派的红目香薰，一个热爱技术、专注HarmonyOS开发的程序媛。在这个数字化飞速发展的时代，HarmonyOS作为华为自主研发的操作系统，正在改变着我们的数字生活体验。
🌈 为什么要写这个系列？
- 💡 让复杂的技术变得简单易懂
- 🚀 帮助更多开发者快速上手HarmonyOS
- 💝 分享实战经验，避免踩坑
- 🌟 用代码创造美好，用技术传递温暖
每一个Demo都是我精心设计和反复测试的结果，希望能够为你的HarmonyOS开发之路点亮一盏明灯。✨
今天我们来深入学习HarmonyOS中最基础也是最重要的组件之一——文本控件（Text）。从基础使用到高级样式，让我们一起探索文本控件的无限可能！
📋 Demo功能说明
🎯 核心功能
本Demo展示了HarmonyOS中Text组件的全面使用方法，包括：
- 📝 基础文本显示
- 🎨 丰富的文本样式设置
- 🌈 渐变色文本效果
- ✂️ 文本截断与省略号
- 🔤 不同字体和字重的应用
- 📐 文本对齐方式
- 🎭 文本装饰效果
✨ 特色亮点
- 🎨 视觉丰富：展示多种文本样式和颜色效果
- 📱 响应式设计：适配不同屏幕尺寸
- 🎯 实用性强：涵盖日常开发中常用的文本处理场景
- 💡 代码清晰：每个功能都有详细的代码注释
🎨 界面展示
界面采用卡片式布局，每个卡片展示不同的文本效果：
- 标题区域：大字号、粗体、渐变色
- 内容区域：多种字体大小和颜色的文本
- 特效区域：阴影、描边、装饰线等效果
- 交互区域：可点击的文本链接效果
📱 适用场景
- 📰 新闻资讯类应用的文章展示
- 🛍️ 电商应用的商品描述
- 📚 教育应用的课程内容展示
- 💬 社交应用的动态文本
- 📊 数据展示应用的标签和说明
🔧 核心代码说明
📁 项目结构
TextDemo/
├── src/
│ ├── main/
│ │ ├── ets/
│ │ │ ├── pages/
│ │ │ │ └── Index.ets // 主页面
│ │ │ └── entryability/
│ │ └── resources/
│ │ ├── base/
│ │ │ ├── element/
│ │ │ └── media/
│ │ └── rawfile/
│ └── module.json5
🎯 关键技术点
1. Text组件基础属性
Text('Hello HarmonyOS')
.fontSize(16) // 字体大小
.fontColor(Color.Black) // 字体颜色
.fontWeight(FontWeight.Normal) // 字体粗细
2. 文本样式设置
- fontSize: 设置字体大小，支持number类型和Resource类型
- fontColor: 设置字体颜色，支持Color枚举和十六进制颜色值
- fontWeight: 设置字体粗细，从100到900
- fontFamily: 设置字体族，支持系统字体和自定义字体
3. 文本布局控制
- textAlign: 文本对齐方式（左对齐、居中、右对齐）
- maxLines: 最大显示行数
- textOverflow: 文本溢出处理方式
- lineHeight: 行高设置
4. 高级文本效果
- decoration: 文本装饰（下划线、删除线等）
- textShadow: 文本阴影效果
- fontStyle: 字体样式（正常、斜体）
💡 技术要点解析
渐变色文本实现：
通过linearGradient属性可以为文本添加渐变色效果，创建更加吸引人的视觉效果。
文本截断处理：
使用maxLines和textOverflow属性可以优雅地处理长文本的显示问题，避免界面布局被破坏。
响应式字体大小：
结合设备信息和屏幕密度，可以实现自适应的字体大小设置。
📝 完整Demo代码
🏠 主页面代码
// src/main/ets/pages/Index.ets
@Entry
@Component
struct Index {
@State message: string = 'HarmonyOS文本控件示例'
build() {
Scroll() {
Column({ space: 20 }) {
// 标题区域
this.buildTitleSection()
// 基础文本样式
this.buildBasicTextSection()
// 高级文本效果
this.buildAdvancedTextSection()
// 文本对齐和截断
this.buildAlignmentSection()
// 装饰效果
this.buildDecorationSection()
// 交互文本
this.buildInteractiveSection()
}
.width('100%')
.padding(20)
}
.backgroundColor('#F5F5F5')
.height('100%')
}
// 标题区域
@Builder
buildTitleSection() {
Column({ space: 10 }) {
Text('🌟 HarmonyOS文本控件')
.fontSize(28)
.fontWeight(FontWeight.Bold)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
.width('100%')
.padding(20)
.borderRadius(15)
.linearGradient({
angle: 45,
colors: [['#FF6B6B', 0.0], ['#4ECDC4', 1.0]]
})
.shadow({
radius: 10,
color: '#40000000',
offsetX: 0,
offsetY: 5
})
Text('探索文本组件的无限可能')
.fontSize(16)
.fontColor('#666666')
.textAlign(TextAlign.Center)
.fontStyle(FontStyle.Italic)
}
.width('100%')
.backgroundColor(Color.White)
.padding(20)
.borderRadius(12)
.shadow({
radius: 8,
color: '#20000000',
offsetX: 0,
offsetY: 2
})
}
// 基础文本样式
@Builder
buildBasicTextSection() {
Column({ space: 15 }) {
Text('📝 基础文本样式')
.fontSize(20)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
.margin({ bottom: 10 })
// 不同字体大小
Text('超大标题 - 24px')
.fontSize(24)
.fontWeight(FontWeight.Bold)
.fontColor('#2C3E50')
Text('大标题 - 20px')
.fontSize(20)
.fontWeight(FontWeight.Medium)
.fontColor('#34495E')
Text('正文 - 16px')
.fontSize(16)
.fontWeight(FontWeight.Normal)
.fontColor('#5D6D7E')
Text('小字 - 14px')
.fontSize(14)
.fontWeight(FontWeight.Light)
.fontColor('#85929E')
Text('极小字 - 12px')
.fontSize(12)
.fontColor('#BDC3C7')
}
.width('100%')
.backgroundColor(Color.White)
.padding(20)
.borderRadius(12)
.alignItems(HorizontalAlign.Start)
.shadow({
radius: 8,
color: '#20000000',
offsetX: 0,
offsetY: 2
})
}
// 高级文本效果
@Builder
buildAdvancedTextSection() {
Column({ space: 15 }) {
Text('🎨 高级文本效果')
.fontSize(20)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
.margin({ bottom: 10 })
// 渐变色文本
Text('渐变色文本效果')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.linearGradient({
angle: 90,
colors: [['#FF9A9E', 0.0], ['#FECFEF', 0.5], ['#FECFEF', 1.0]]
})
// 阴影文本
Text('带阴影的文本')
.fontSize(18)
.fontWeight(FontWeight.Medium)
.fontColor('#E74C3C')
.textShadow({
radius: 5,
color: '#40E74C3C',
offsetX: 2,
offsetY: 2
})
// 描边文本效果（通过多层Text模拟）
Stack() {
Text('描边文本效果')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#3498DB')
.textShadow({
radius: 1,
color: '#FFFFFF',
offsetX: 1,
offsetY: 1
})
}
}
.width('100%')
.backgroundColor(Color.White)
.padding(20)
.borderRadius(12)
.alignItems(HorizontalAlign.Start)
.shadow({
radius: 8,
color: '#20000000',
offsetX: 0,
offsetY: 2
})
}
// 文本对齐和截断
@Builder
buildAlignmentSection() {
Column({ space: 15 }) {
Text('📐 文本对齐与截断')
.fontSize(20)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
.margin({ bottom: 10 })
// 左对齐
Text('左对齐文本 - 这是一段比较长的文本内容，用来演示文本的对齐效果')
.fontSize(14)
.fontColor('#2C3E50')
.textAlign(TextAlign.Start)
.width('100%')
.backgroundColor('#ECF0F1')
.padding(10)
.borderRadius(8)
// 居中对齐
Text('居中对齐文本')
.fontSize(14)
.fontColor('#8E44AD')
.textAlign(TextAlign.Center)
.width('100%')
.backgroundColor('#F4ECF7')
.padding(10)
.borderRadius(8)
// 右对齐
Text('右对齐文本')
.fontSize(14)
.fontColor('#E67E22')
.textAlign(TextAlign.End)
.width('100%')
.backgroundColor('#FDF2E9')
.padding(10)
.borderRadius(8)
// 文本截断
Text('这是一段很长很长的文本内容，用来演示文本截断效果，当文本超过指定行数时会显示省略号...')
.fontSize(14)
.fontColor('#27AE60')
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.width('100%')
.backgroundColor('#E8F8F5')
.padding(10)
.borderRadius(8)
}
.width('100%')
.backgroundColor(Color.White)
.padding(20)
.borderRadius(12)
.alignItems(HorizontalAlign.Start)
.shadow({
radius: 8,
color: '#20000000',
offsetX: 0,
offsetY: 2
})
}
// 装饰效果
@Builder
buildDecorationSection() {
Column({ space: 15 }) {
Text('🎭 文本装饰效果')
.fontSize(20)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
.margin({ bottom: 10 })
// 下划线
Text('带下划线的文本')
.fontSize(16)
.fontColor('#3498DB')
.decoration({
type: TextDecorationType.Underline,
color: '#3498DB'
})
// 删除线
Text('带删除线的文本')
.fontSize(16)
.fontColor('#E74C3C')
.decoration({
type: TextDecorationType.LineThrough,
color: '#E74C3C'
})
// 上划线
Text('带上划线的文本')
.fontSize(16)
.fontColor('#9B59B6')
.decoration({
type: TextDecorationType.Overline,
color: '#9B59B6'
})
// 斜体文本
Text('斜体文本效果')
.fontSize(16)
.fontColor('#F39C12')
.fontStyle(FontStyle.Italic)
}
.width('100%')
.backgroundColor(Color.White)
.padding(20)
.borderRadius(12)
.alignItems(HorizontalAlign.Start)
.shadow({
radius: 8,
color: '#20000000',
offsetX: 0,
offsetY: 2
})
}
// 交互文本
@Builder
buildInteractiveSection() {
Column({ space: 15 }) {
Text('💬 交互式文本')
.fontSize(20)
.fontWeight(FontWeight.Medium)
.fontColor('#333333')
.margin({ bottom: 10 })
// 可点击文本
Text('点击我试试看！')
.fontSize(16)
.fontColor('#3498DB')
.decoration({
type: TextDecorationType.Underline,
color: '#3498DB'
})
.onClick(() => {
console.log('文本被点击了！')
// 这里可以添加点击事件处理逻辑
})
// 状态变化文本
Text(this.message)
.fontSize(16)
.fontColor('#27AE60')
.fontWeight(FontWeight.Medium)
.onClick(() => {
this.message = this.message === 'HarmonyOS文本控件示例' ?
'文本内容已更新！' : 'HarmonyOS文本控件示例'
})
Text('💡 提示：点击上方文本可以切换内容')
.fontSize(12)
.fontColor('#95A5A6')
.fontStyle(FontStyle.Italic)
}
.width('100%')
.backgroundColor(Color.White)
.padding(20)
.borderRadius(12)
.alignItems(HorizontalAlign.Start)
.shadow({
radius: 8,
color: '#20000000',
offsetX: 0,
offsetY: 2
})
}
}
⚙️ 配置文件
// module.json5 配置
{
"module": {
"name": "entry",
"type": "entry",
"description": "$string:module_desc",
"mainElement": "EntryAbility",
"deviceTypes": [
"phone",
"tablet"
],
"deliveryWithInstall": true,
"installationFree": false,
"pages": "$profile:main_pages",
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ts",
"description": "$string:EntryAbility_desc",
"icon": "$media:icon",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:icon",
"startWindowBackground": "$color:start_window_background"
}
]
}
}
🚀 运行效果
📱 界面展示
运行后的界面将展示：
- 🌟 顶部渐变色标题，带有阴影效果
- 📝 多种字体大小的文本示例
- 🎨 渐变色和阴影文本效果
- 📐 不同对齐方式的文本布局
- 🎭 各种装饰效果（下划线、删除线等）
- 💬 可交互的文本组件
✅ 功能验证
- 样式效果：检查各种文本样式是否正确显示
- 交互功能：点击交互文本，观察状态变化
- 布局适配：在不同设备上测试界面适配效果
- 性能表现：滚动页面，检查渲染性能
💡 开发小贴士
🎯 最佳实践
- 💫 字体大小：遵循设计规范，建议使用12、14、16、18、20、24等常用尺寸
- 🎨 颜色搭配：注意文本与背景的对比度，确保可读性
- ⚡ 性能优化：避免过度使用阴影和渐变效果，影响渲染性能
- 🔧 响应式设计：根据设备屏幕密度调整字体大小
🚨 常见问题
- 文本截断不生效：确保设置了width属性和maxLines属性
- 渐变色显示异常：检查colors数组的格式和角度设置
- 字体显示不一致：不同设备的系统字体可能不同，建议使用自定义字体
📚 扩展学习
- Rich Text组件：支持富文本显示，可以混合不同样式
- Span组件：用于Text组件内部的文本片段样式设置
- 自定义字体：如何在应用中使用自定义字体文件
🎉 总结与展望
通过这个Demo，我们学习了：
- ✨ Text组件的基础属性和高级特性
- 🎯 各种文本样式的设置方法
- 💡 文本布局和截断的处理技巧
- 🎨 创建美观文本效果的实用技巧
Text组件作为HarmonyOS应用开发中最基础的组件之一，掌握其各种用法对于创建优秀的用户界面至关重要。希望这个示例能够帮助到正在学习HarmonyOS开发的你！
下一期我们将探索更多有趣的组件，敬请期待！如果你有任何问题或建议，欢迎在评论区留言交流。
🔗 相关资源
- 📚 HarmonyOS官方文档
- 🛠️ DevEco Studio下载
- 💬 坚果派技术社区
- 🎨 HarmonyOS设计规范
🌟 如果这篇文章对你有帮助，请点赞支持！🌟
让我们一起在HarmonyOS的世界里创造更多可能！
© 2024 坚果派·红目香薰 | 用心分享，用技术创造价值
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
0
0- 0
已为社区贡献162条内容
所有评论(0)