002、ArkTS开发实践

之——尝试

目录

之——尝试

杂谈

正文

1.声明式UI

1.1 声明式描述

1.2 状态驱动视图更新

2.自定义组件

3.配置属性与布局

4.改变组件状态

 5.渲染列表数据

6.补充

---

杂谈

        学习声明式UI语法：

---

正文

1.声明式UI

1.1 声明式描述

        想要什么样子就直接描述：

1.2 状态驱动视图更新

---

2.自定义组件

        对页面内容进行合理抽象，组合基础组件，封装成自定义组件。 

        自定义子组件，为后续使用做准备： 

        开始页面：

         配置build函数：

         整个组件的组成：

 

        合理抽象组件： 

---

3.配置属性与布局

        样式调整，使用.运算符来进行属性设置：

         布局调整，使用容器组件进行多个组件的布局调整，将组件按照需要排列的顺序放置：

        比如说行排列容器：

        代码实现： 

        .运算符进行属性优化：

        build()：这是一个特殊的方法，通常在 HarmonyOS 的 UI 组件中定义。它的主要任务是定义和构建 UI 组件的视图层次结构。当系统需要渲染 UI 组件时，会调用这个方法来获取组件的视图层次结构。 

         可变文字实现，然后用struct封装整个组件：

        组合标题和代办组件，列布局容器：

         将之前封装的组件用起来：

         {} 是用来创建一个对象的。在 JavaScript 和 TypeScript 中，我们可以使用 {} 来创建一个对象，并使用 key: value 的形式来定义对象的属性。

        在 ToDoItem({ content: item }) 这行代码中，{ content: item } 创建了一个对象，这个对象有一个属性 content，其值为 item。这个对象被传递给 ToDoItem 组件作为参数，用于初始化组件的状态。

        在 HarmonyOS 中，这种方式常常被用于传递参数给 UI 组件。在这个例子中，ToDoItem 组件接收一个对象作为参数，这个对象的 content 属性用于设置待办事项的内容。

        在 HarmonyOS 中，创建 UI 组件实例的主要方式就是像 ToDoItem({ content: item }) 这样，通过传递一个对象来初始化组件的状态。这是因为 HarmonyOS 的 UI 组件是基于声明式 UI 框架的，这种方式可以使得代码更简洁，也更易于理解。

        然而，如果你需要更复杂的初始化逻辑，你可以在组件的方法中进行。例如，你可以在 aboutToAppear() 方法或其他生命周期方法中设置组件的状态。但是，这种方式通常更复杂，也更难以管理。

        总的来说，ToDoItem({ content: item }) 这种方式是创建和初始化 HarmonyOS UI 组件实例的推荐方式。 

---

4.改变组件状态

        提供交互功能，变化组件实现状态交互，通过state修饰完成变量，实现状态与视图UI的绑定：

         代码与效果：

        需要build变量来支持if else，为对应row配置动作与状态变量的绑定实现交互：

---

 5.渲染列表数据

        ForEach语句，传入数据源：

         用每个元素生成todoitem组件，todoitem组件里面定义了每个row的功能：

         效果：

---

6.补充

        在 HarmonyOS 中，@Builder 是一个装饰器，用于标记一个方法作为构建器方法。构建器方法通常用于创建和配置 UI 组件。在这个 ToDoItem 组件中，labelIcon 方法就被标记为构建器方法，它创建并配置了一个 Image 组件。

        构建器方法的特点是可以链式调用，即每个方法调用都返回对象本身，这样可以连续调用多个方法来配置对象。在这个例子中，Image(icon) 创建了一个 Image 组件，然后连续调用 .objectFit(), .width(), .height(), .margin() 方法来配置这个组件。