OpenHarmony——ArkTS声明式开发与应用 课件 项目2-任务1-2 编写第1个ArkTS页面.pptxVIP

任务1编写第1个ArkTS页面项目2走近ArkTS声明式开发

完成任务达成的技能目标01任务描述02技能目标本任务先认识ArkTS声明式UI的页面描述结构，再学习如何使用ArkTS基础语法调用和配置组件属性，完成第一个ArkTS页面的编写。能认识ArkTS声明式开发范式的UI描述页面结构1能跟踪源代码进行组件的参数和属性样式的查阅2能进行组件的参数和属性的设置3能初步使用@State状态变量4

任务实施步骤STEPS编写第一个声明式页面1处理组件的点击事件2使用@State状态变量3

编写第一个声明式页面01任务实施

编写第一个声明式页面打开Index.ets页面，设置组件的常用属性，实现下面图示的效果。设置组件属性代码演示

处理组件的点击事件02任务实施

处理组件的点击事件在Colunm组件中，添加2个Text子组件，给Column组件添加参数space:20，并分别使用不同的方式处理每个子组件的点击事件。两种方式处理组件的点击事件代码演示

使用@State状态变量03任务实施

使用@State状态变量当用@State装饰变量时，变量的值发生变化时，会驱动页面进行刷新，这就是ArkTS中的状态变量的作用。当用private装饰变量，则变量变化，不会驱动页面刷新。用private和@State装饰变量代码演示

任务小结本任务了解和认识了ArkTS声明式开发范式的UI描述方