HarmonyOS应用开发实战 | ArkTS文本控件使用指南

红目香薰

发布于 2025-12-16 15:38:51

1910

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

? 坚果派·红目香薰 倾情分享 ? 用心打造每一个技术细节，为开发者创造更多价值 ? 让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.Lighter)
        .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的世界里创造更多可能！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-08-09，如有侵权请联系 cloudcommunity@tencent.com 删除

布局

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度