鸿蒙学习第三篇—声明式框架 ArkUI 实践.pdf

鸿蒙学习第三篇—声明式框架ArkUI实践

前言：鉴于小伙伴催更，加点更新新的一篇文章。上一篇介绍了ArkTS声明式UI开发范式和状态

管理的特点，这一篇文章让我们通过实现一个TodoList组件感受下ArkTS的两个特点。

实现一个待办列表

我们先以一个ToDoItem来介绍一个自定义组件需要了解的概念：

UI：

基本概念

@Entry和@Component：装饰struct，@Entry标识了页面的入口，@Component代表这是一

个组件。两个装饰器同时存在则意味着该组件为页面的入口组件，会在页面加载时首次渲染。

@Preview：装饰struct，用@Preview装饰的自定义组件可以在DevEcoStudio的预览器上进行实

时预览，加载页面时，将创建并显示@Preview装饰的自定义组件。

struct：自定义组件可以基于struct实现，不能有继承关系，对于struct的实例化，可以省略new。

在自定义组件内需要使用build方法来进行UI描述。

Text是内置文本组件

属性配置

使用属性方法配置组件的属性，属性方法紧随组件，如width()、height()、

backgroundColor()，并用.运算符连接。

自定义组件

这样我们就实现了一个ToDoItem，这只是ToDoList的一个单元，让我们再来实现下ToDoList

的UI

首先我们定义一个ToDoList组件

添加Column

自定义组件里使用Column布局组件，让内容从上往下排列，且给一个16的space：

添加标题

再添加一个标题：

添加样式

给标题加上样式：

列表渲染

定义一个待办列表，用ForEach循环渲染出来，并将内容传递给ToDoItem组件：

数据展示

相应地，我们也要在刚才实现的ToDoItem组件里接收父组件传递过来的content，参数传递使

用花括号的形式，用content接受数组内的内容项item：

这样我们就实现了ToDoList的UI开发，呈现的效果如下：

响应事件

接下来，我们需要在ToDoItem内部实现与用户交互的效果，即当用户点击该待办项时，该待办

项就变更为已完成状态。这需要在组件内部添加一个isComplete的状态，并在组件上添加了

onClick点击事件，当用户点击该待办项时，数据isComplete的更改就能够触发UI的更新。

最后让我们看下整个ToDoList的交互效果：

这样我们就完成了一个简单的包含声明式UI开发范式和状态管理特点的ToDoList组件

声明式UI思想

声明式UI的思想，主要体现在两个方面：

描述UI的呈现结果，而不关心过程

状态驱动视图更新

用一张图表示即：

体现在我们实现的ToDoList中就是当点击ToDoItem组件时，声明式UI只需要修改组件内

isComplete的状态，UI会根据状态自动更新视图，而不需要手动去修改组件的样式。

参考及学习资料：

声明式UI开发指导