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

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

一、引言

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

二、认识鸿蒙内置组件

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

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

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

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

3.1 找到官方文档

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

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

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

3.2 基础用法演示

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

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

typescript 复制代码

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

3.3 设置组件属性

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

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

typescript 复制代码

@Entry
@Component
struct 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 组件的基本用法。对于其他内置组件，学习路径是完全一样的：

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

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

五、总结

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

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

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