鸿蒙开发入门：以 Text 组件为例，掌握内置组件用法

这是一个使用鸿蒙技术开发的本地原生记账应用，非常适合大家用来练手。相关源码已上传至 Github，点击此处查看项目。欢迎大家交流、指正，也欢迎提交 PR。

一、引言

在鸿蒙应用开发中，内置组件是构建用户界面的基石。无论是简单的文本展示，还是复杂的交互布局，都离不开这些基础组件。本文将以最常用的Text组件为例，带你快速上手鸿蒙内置组件的使用方法，并学会如何举一反三，查阅官方文档来掌握其他组件。

二、认识鸿蒙内置组件

鸿蒙系统为开发者提供了丰富且强大的内置组件库。除了我们今天要讲的Text组件，还包括：

• 布局类：Row（行）、Column（列）、Grid（栅格）、Scroll（滚动）等。
• 显示类：Image（图片）、Progress（进度条）等。
• 交互类：Button（按钮）、TextInput（文本输入）、Slider（滑动条）等。

这些组件共同构成了鸿蒙应用的 UI 骨架，开发者可以通过组合和配置它们，快速实现各种界面效果。

三、以 Text 组件为例，快速上手

3.1 找到官方文档

学习任何组件的第一步，都是查阅 官方文档。在鸿蒙开发者文档中，你可以找到所有内置组件的详细说明。

1. 打开官方文档，找到“UI开发”这一分类。
2. 你会看到Row、Column、Grid、Scroll、Button等众多组件类型。
3. 点击“使用文本”分类，再选择文本显示 (Text/Span)组件。

在文本显示 (Text/Span)组件的文档页面上，会清晰地列出它的所有属性、事件以及实例代码，这是我们学习和使用它的最佳指南。

3.2 基础用法演示

接下来，我们通过代码来演示Text组件的一些常用属性。

首先，在项目中创建一个Text组件：

@Entry@Componentstruct TextDemo{build(){Column(){Text('你好，鸿蒙！')}.width('100%').height('100%')}}

3.3 设置组件属性

在鸿蒙开发中，组件的属性和方法都是以链式调用的方式来书写的。也就是说，在组件后边输入一个点.，IDE 就会自动列出该组件相关的属性和方法，你想设置哪个，直接选择即可。

例如，我们给上面的Text组件设置宽高和背景颜色：

@Entry@Componentstruct TextDemo{build(){Column(){Text('你好，鸿蒙！').width(200)// 设置宽度.height(100)// 设置高度.backgroundColor(Color.Orange)// 设置背景颜色.fontSize(20)// 设置字体大小.fontColor(Color.White)// 设置字体颜色.textAlign(TextAlign.Center)// 设置文本居中}.width('100%').height('100%')}}

当你写完代码后，在预览器中可以看到，Text组件的宽高、背景色、字体大小和颜色都实时刷新了。这种所见即所得的开发体验，能极大提升开发效率。

四、举一反三：如何学习其他组件

通过上面的例子，你已经掌握了Text组件的基本用法。对于其他内置组件，学习路径是完全一样的：

1. 查阅 官方文档：找到对应组件的文档页面。
2. 查看属性与事件：了解该组件支持哪些配置项和交互回调。
3. 参考实例代码：文档通常会提供完整的示例，可以直接复制运行。
4. 动手实践：在自己的项目中尝试使用，通过链式调用的方式设置各种属性。

后续用到哪个组件，我们再来说哪个组件。掌握了这个方法，你就能轻松驾驭鸿蒙开发中的所有内置组件。

五、总结

本文以Text组件为例，介绍了鸿蒙内置组件的核心使用方法。关键点总结如下：

• 鸿蒙提供了丰富的内置组件，覆盖布局、显示、交互等场景。
• 组件的属性和方法通过链式调用（组件.属性().方法()）来设置。
• 官方文档是学习组件最权威、最直接的途径。

希望这篇文章能帮助你快速入门鸿蒙组件开发，开启你的鸿蒙应用创作之旅。