ArkTS组件创建指南：从0到1掌握声明式编程-优快云博客

在鸿蒙开发里，组件的创建堪称基础中的基础，核心中的核心，就如同万丈高楼的基石。有参数组件就像定制化的精密仪器，可依据不同的输入参数展现出多样化的功能与外观，满足各种复杂场景下的需求；无参数组件则如同通用的标准零件，简洁高效，在构建基础界面结构时发挥着不可或缺的作用。接下来，就让我们一起深入探索 ArkTS 中以声明方式组合创建组件的奇妙世界。

二、ArkTS 声明式 UI 基础概念

在软件开发的长河中，UI 编程范式历经了从命令式到声明式的重大变革。命令式 UI 就像是一位严格遵循指令的执行者，开发者需要精确地告诉它每一个操作步骤，从创建 UI 元素，到设置其属性，再到处理各种交互事件，就如同撰写一份详细的操作手册。比如在传统的安卓开发中，如果要更新一个按钮的文本和背景颜色，你得先通过findViewById找到这个按钮，然后分别调用setText和setBackgroundColor方法来进行修改。随着应用规模和复杂度的不断攀升，这种方式的弊端逐渐显现，代码变得冗长繁琐，维护和扩展的难度与日俱增，就像一本厚厚的操作手册，修改其中一处可能会影响到其他多处。

而声明式 UI 则宛如一位聪明的设计师，你只需向它描述最终想要的 UI 样子，它就能凭借自身的智能算法，自动完成从当前状态到目标状态的过渡。在声明式 UI 的世界里，UI 就像是一个依赖于状态的函数，状态发生变化，UI 便会自动更新。以一个简单的计数器应用为例，在声明式 UI 框架中，你只需要定义好数字显示区域和按钮，以及点击按钮时数字变化的逻辑，当按钮被点击，数字状态改变，UI 会自动刷新显示新的数字，无需手动去更新显示。这种方式不仅让代码变得简洁易懂，还大大提高了开发效率和可维护性，就像告诉设计师你想要的房间风格，他就能帮你完成从装修到布置的全过程。

在 ArkTS 中，以声明方式组合组件的原理正是基于声明式 UI 的这些特性。开发者通过定义一个个组件，描述它们的属性、样式和交互逻辑，再将这些组件像搭积木一样组合起来，构建出完整的用户界面。组件就像是一个个独立的模块，有自己的状态和行为，它们之间通过数据传递和事件交互来协同工作。比如一个简单的登录界面，可能由输入框组件、按钮组件和提示信息组件组成，输入框组件负责接收用户输入，按钮组件处理点击事件，提示信息组件根据登录结果显示相应的提示，这些组件相互配合，共同构成了一个功能完备的登录界面。

三、无参数组件创建实例解析

（一）常见无参数组件展示

在 ArkTS 的组件大家庭中，无参数组件就像是那些默默奉献的基础 “小零件”，虽然简单，却不可或缺。Divider 组件便是其中之一，它的作用就如同一条分割线，能将不同的内容区域清晰地划分开来，让界面布局更加有条理。在一个包含商品列表的界面中，Divider 可以放置在每两个商品信息之间，将各个商品条目区分开来，使整个列表看起来整齐有序。

Column 组件也是常用的无参数组件，它如同一个垂直方向的收纳盒，会将内部的子组件按照垂直方向依次排列。比如在一个简单的登录界面中，用户名输入框、密码输入框和登录按钮可以依次放置在 Column 组件内，实现从上到下的垂直布局，符合用户的操作习惯。

（二）代码实操与分析

下面，我们通过一段具体的代码来深入了解无参数自定义组件的创建过程。假设我们要创建一个简单的页面布局组件，它包含一个标题和两个段落，段落之间用 Divider 分隔。

@Entry

@Component

struct LayoutComponent {

build() {

Column() {

Text('这是一个标题').fontSize(20).fontWeight('bold');

Divider();

Text('这是第一段内容').fontSize(16);

Divider();

Text('这是第二段内容').fontSize(16);

}.width('100%').padding(20);

}

让我们逐行来分析这段代码。首先，@Entry装饰器表明这个组件是页面的入口，当页面加载时，这个组件会首先被渲染显示；@Component装饰器则赋予了这个结构体基于组件的能力，使其可以包含构建 UI 的相关逻辑。

在build函数中，我们开始构建组件的 UI 结构。Column()创建了一个 Column 组件，它作为容器，将其他子组件垂直排列。

Text('这是一个标题').fontSize(20).fontWeight('bold');这行代码创建了一个 Text 组件，显示 “这是一个标题” 的文本内容，并通过链式调用设置了字体大小为 20，字体粗细为加粗，就像是给标题穿上了一件醒目的 “外衣”，使其在页面中更加突出。

Divider();创建了一个 Divider 组件，它不需要任何参数，就像一条无形的分割线，将标题和第一段内容分隔开来，让页面布局层次更加分明。

Text('这是第一段内容').fontSize(16);和Text('这是第二段内容').fontSize(16);分别创建了两个 Text 组件，用于显示两段不同的文本内容，字体大小都设置为 16，保持了整个页面文本风格的一致性。

最后，Column()的链式调用.width('100%').padding(20);设置了 Column 组件的宽度为 100%，即充满整个父容器的宽度，同时设置了内边距为 20，让组件内部的内容与边缘保持一定的距离，避免过于拥挤，提升了页面的美观度和可读性。通过这段代码，我们可以清晰地看到无参数组件在构建页面布局时的简洁与高效，它们相互配合，就像搭积木一样，轻松构建出一个结构清晰的用户界面。

四、有参数组件创建深度剖析

（一）系统组件参数配置

在 ArkTS 开发中，系统组件的参数配置是一项关键技能，它能让我们根据不同的需求灵活定制组件的外观和行为。以 Image 组件为例，src参数是必选的，它就像是图片的 “身份证”，指定了图片的来源路径。这个路径可以是本地文件系统中的图片路径，比如/data/imgs/logo.png，也可以是网络上的图片链接，像https://example.com/images/banner.jpg 。

在实际使用中，我们可以这样配置 Imag