本篇将详细介绍鸿蒙应用开发中的 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组件中直接设置按钮文本：
