「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解

本篇将详细介绍鸿蒙应用开发中的 Text 和 Button 组件。通过本篇内容，你将学习如何使用 Text 组件显示文本、格式化文本样式，以及如何使用 Button 组件处理点击事件并自定义样式。掌握这些基本组件的用法将为后续的 UI 开发奠定基础。

关键词

• Text 组件
• Button 组件
• 样式设置
• 事件响应
• 状态管理

---

一、Text 组件基础

Text 组件用于显示文本，支持字体大小、颜色、对齐等样式设置，方便开发者根据需求展示不同的文本信息。

1.1 基本用法

• 直接在 Text 组件中插入字符串或变量来显示文本：

  // 创建一个 Text 组件，显示简单的文本内容
  Text('Hello, HarmonyOS!')
  

1.2 设置文本样式

• 通过链式调用设置字体大小、粗细和颜色等样式：

  // 设置字体大小、粗细和颜色
  Text('Hello, HarmonyOS!').fontSize(24) // 字体大小为 24.fontWeight(FontWeight.Bold) // 加粗显示.fontColor(Color.Blue) // 文本颜色为蓝色
  

1.3 文本对齐方式

• 使用 alignSelf 设置 Text 的对齐方式，例如居中对齐：

  // 设置文本在容器中居中对齐
  Text('Welcome to HarmonyOS').alignSelf(ItemAlign.Center).fontSize(20) // 字体大小为 20
  

1.4 多行显示

• 使用 maxLines 属性限制最大行数，或通过 textOverflow 设置溢出显示方式：

  // 设置最多显示 2 行，溢出时显示省略号
  Text('这是一个非常长的文本，超过一定行数会显示省略号。').maxLines(2) // 最多显示 2 行.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出显示省略号
  

运行效果图

---

二、Button 组件基础

Button 组件用于创建按钮，通常用于捕获用户点击事件。支持自定义样式、圆角和事件响应。

2.1 基本用法

• 在 Button 组件中直接设置按钮文本：