解锁ArkUI：声明式UI范式的语法秘籍-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoyingxixi1989/article/details/148478986

一、ArkUI 与声明式 UI 范式简介

在鸿蒙系统的应用开发领域中，ArkUI 扮演着极为关键的角色，它是构建分布式应用的声明式 UI 开发框架，为开发者打造出简洁自然的 UI 信息语法、多维的状态管理以及实时界面预览等能力，大大提升了应用开发效率，也为用户带来生动流畅的体验。

声明式 UI 范式则是一种区别于传统命令式编程的新型编程方式。在传统的命令式 UI 编程里，开发者就像一位细致的工匠，需要一步步地明确指示计算机如何去创建和更新用户界面，比如要精确地告诉计算机先找到某个按钮，再更改按钮的文字，最后隐藏某张图片等一系列具体操作步骤。而声明式 UI 编程更像是一位画家，只需要描述出用户界面在特定时刻应该呈现的样子，也就是 UI 的最终状态，而无需操心具体的实现细节，底层框架会自动处理 UI 的渲染过程，实现从当前状态到预期状态的过渡。

为了更直观地感受两者的差异，假设我们要开发一个简单的计数器应用。在命令式 UI 编程中，我们可能需要手动获取界面上显示数字的文本框元素，然后为按钮添加点击事件，在点击事件处理函数中手动更新文本框的内容来实现计数功能。而在声明式 UI 编程中，我们只需定义一个状态变量来表示计数器的值，然后在界面描述中直接使用这个状态变量，当状态变量的值发生变化时，界面会自动更新显示新的值。

声明式 UI 范式具有诸多显著优势，数据驱动是其核心特性之一，UI 呈现完全由数据状态决定，开发者专注于数据的管理和业务逻辑，而无需手动操作 DOM 元素来更新 UI，这使得代码中的视图逻辑与业务逻辑实现了清晰分离，后续维护更加轻松。例如在一个电商应用中，商品列表的数据从服务器获取后，只需更新数据模型，商品列表 UI 就能自动刷新展示新数据，无需开发者手动去一个个更新列表项。

组件化也是声明式 UI 的重要特性，UI 被拆分为独立的可复用组件，每个组件都有自己的职责和状态，便于管理和维护。以社交应用为例，点赞按钮、评论输入框、头像展示等都可以封装成独立组件，在不同页面复用，提高开发效率。而且，组件的复用性也使得代码的可维护性大大增强，当需要修改某个组件的功能时，只需要在组件内部进行修改，而不会影响到其他部分的代码。

自动更新则是声明式 UI 的一大亮点，当数据状态发生变化时，UI 会自动响应这种变化并进行更新，确保界面始终与数据保持一致，极大地减少了手动同步数据和视图的繁琐工作，降低出错概率。就像在一个实时聊天应用中，当收到新消息时，消息列表会自动更新显示，无需开发者手动去添加新的消息项。

二、ArkUI 基础语法详解

（一）组件创建与使用

在 ArkUI 中，组件的创建方式根据其接口定义有所不同。对于无参数组件，由于其接口定义不包含必选构造参数，创建时组件后面的括号无需配置任何内容，例如 Divider 组件，用于在界面中创建一条分割线，使用时直接写Divider()即可。

而有参数组件，在创建时则需在括号内配置相应参数。以 Image 组件为例，它用于在界面中展示图片，src是其必选参数，用于指定图片的来源，比如Image('https://example.com/image.jpg')，这就会在界面上显示指定链接的图片；Text 组件的content为非必选参数，既可以直接传递字符串，如Text('Hello, ArkUI')，也能通过$r形式引入应用资源，适用于多语言场景，像Text($r('app.string.title')) 。变量或表达式也能用于参数赋值，不过表达式返回的结果类型必须满足参数类型要求，比如Image(this.imageUrl)，这里的this.imageUrl是一个变量，用于动态指定图片链接。

下面是一个综合示例，展示了如何创建和组合使用 Text、Image 和 Button 组件：

@Entry

@Component

struct ComponentExample {

@State message: string = '点击按钮切换图片';

@State imageUrl: string = 'https://example.com/image1.jpg';

build() {

Column() {

Text(this.message)

.fontSize(20)

.fontWeight(FontWeight.Bold);

Image(this.imageUrl)

.width(200)

.height(200)

.objectFit(ImageFit.Cover);

Button