第五节HarmonyOS ArkTS声明式开发范式

ArkTS声明式开发范式:

规范中各个内容说明如下:

  1. 装饰器

1、基本UI装饰器@Entry、@Component

@Entry

装饰struct,页面的入口。

@Component

装饰struct,表示该struct具有基于组件的能力。

2、数据装饰器@State、@Prop、@Link

@State

当数据被修改时,所在组件的build()方法会被重新调用,进而重新绘制该页面UI。此装饰器的作用范围仅限于其所在的UI内部。

@Prop

该组件继承@State的基本功能,同时,又有两个新的特点:

  1. 只能被其父控件的@State变量初始化(假设为name)
  2. 与其父组件建立单向联系,监听父组件中的变量name,当name的值发生变化时,该@Prop也会同步变化,进而重绘制其所在控件的UI。

@Link

与@Prop不同的是,@Link会与其父控件中对应的@State变化建立双向联系,即当子组件中的@Link对象发生变化时,其父组件中对应的@State变量也会随之变化,这个时候父UI与子UI都会重绘。

数据装饰器@State、@Prop、@Link三者的相同点与不同点:

相同点:

  1. 都会引起UI的重绘
  2. 内部私有

不同点:

不同点

@State

@Prop

@Link

装饰内容

基本数据类型、类、数组

基本数据类型

基本数据类型、类、数组

关联

不与其他控件关联

父@State -> 子@Prop单向关联

父@State <-> 子@Link单向关联

初始化时机

声明时

创建组件时由参数传入

创建组件时由参数传入

  1. 生产者-消费者模式的装饰器@Provide、@Consume

这一对是形成生产者-消费者模式的装饰器,且双向绑定。@Provide必须设置初始值,@Consume不可设置默认初始值

触发变化的时机:

  1. 基础类型(boolean、string、number)变量的改变
  2. @Observed class类型变量以及其属性的修改
  3. 添加、删除、跟新数组中的元素

struct  CompA {
@Provide("reviewVote") reviewVotes: number = 0;
}

struct  CompB {
@Consume("reviewVote") reviewVotes: number
}

框架行为:

  1. 初始渲染:
    1. @Provide装饰的变量会以map的形式,传递给当前@Provide所属组件的所有子组件;
    2. 子组件中如果使用@Consume变量,则会在map中查找是否有该变量名/alias(别名)对应的@Provide的变量,如果查找不到,框架会抛出JS ERROR;
    3. 在初始化@Consume变量时,和@State/@Link的流程类似,@Consume变量会保存在map中查找到的@Provide变量,并把自己注册给@Provide。
  2. 当@Provide装饰的数据变化时:
    1. 通过初始渲染的步骤可知,子组件@Consume已把自己注册给父组件。父组件@Provide变量变更后,会遍历更新所有依赖它的系统组件(elementid)和状态变量(@Consume);
    2. 通知@Consume更新后,子组件所有依赖@Consume的系统组件(elementId)都会被通知更新。以此实现@Provide对@Consume状态数据同步。
  3. 当@Consume装饰的数据变化时:
    1. 通过初始渲染的步骤可知,子组件@Consume持有@Provide的实例。在@Consume更新后调用@Provide的更新方法,将更新的数值同步回@Provide,以此实现@Consume向@Provide的同步更新。
  1. 观察者模式的装饰器@Watch

使用观察者模式的装饰器,但该装饰器不是触发变量变化,而是绑定一个函数,当@Watch变量变化时,调用该函数。

struct  ComA {
// 绑定onBasketUpdate方法,当变量更新时调用
@State @Watch('onBasketUpdate') shopBasket: Array = [7, 12, 47, 3]

onBasketUpdate(propName: string): void {
this.updateTotal()
}
}

  1. 自定义组件

可复用的UI单元,可组合其他组件,如上述被@Component装饰的“struct Hello”,就是一个自定义组件。

  1. UI描述

声明式的方式来描述UI的结构,如上述build()方法内部的代码块。

  1. 内置组件

框架中默认内置对的基础和布局组件,可以直接被开发者调用,比如示例中对的Column、Text、Divider、Button等。

  1. 事件方法

用于添加组件对事件的相应逻辑,统一通过事件方法进行设置,如跟随在Button后面的onClick()。

  1. 属性方法

用于组件属性的配置,统一通过属性方法进行设置,如fontSize()、width()、height()、color()等,可通过链式调用的方式设置多项属性。

        总之,从UI框架的需求角度,ArkTS在TS的类型系统的基础上,做了进一步的扩展:定义了各种装饰器、自定义组件和UI描述机制,再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了应用开发的主体。在应用开发中,除了UI的结构化描述之外,还有一个重要的方面:状态管理。如上述示例中,用 @State 装饰过的变量 myText ,包含了一个基础的状态管理机制,即 myText 的值的变化会自动触发相应的 UI 变更 (Text组件)。

        ArkUI 中进一步提供了多维度的状态管理机制。和 UI 相关联的数据,不仅可以在组件内使用,还可以在不同组件层级间传递,比如父子组件之间,爷孙组件之间,也可以是全局范围内的传递,还可以是跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和 UI 的联动。

        总体而言,ArkUI开发框架通过扩展成熟语言、结合语法糖或者语言原生的元编程能力、以及UI组件、状态管理等方面设计了统一的UI开发范式,结合原生语言能力共同完成应用开发。这些构成了当前ArkTS基于TS的主要扩展。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/200326.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32CubeMX HAL F405 TIM1输出多路不同频率及占空比的方波(PWM)(输出比较模式)

TIM1_CH1 TIM1_CH1N TIM1_CH2 TIM1_CH2N TIM1_CH3 TIM1_CH3N TIM1_CH4 TIM1的通道1、2、3输出同频率&#xff08;20KHz&#xff09;的PWM波形(占空比50%) TIM1的通道1输出100Hz的PWM波形(占空比50%) #include "tim.h"/* USER CODE BEGIN 0 */ uint16_t f1 100;…

resty-http库爬虫程序代码示例

lua -- 导入需要的库 local http require "resty.http" local io require "io" -- 创建一个客户端 local client http.new() -- 设置HTTP客户端的 client:set_proxy(proxy_host, proxy_port) -- 执行HTTP GET请求&#xff0c;获取网页内容 local res…

低功耗蓝牙模块在农业技术中的创新应用

农业技术的不断演进对于提高农业生产效率和可持续性至关重要。本文将深入研究低功耗蓝牙模块在农业技术中的创新应用&#xff0c;探讨其在农业传感器网络、智能灌溉系统、畜牧追踪等方面的优势&#xff0c;以推动农业领域向数字化、智能化的方向发展。 随着全球人口的增长和气候…

51综合程序01-DAC转换输出波形

文章目录 DAC转换输出波形使用DA转换输出正弦波&#xff0c;三角波&#xff0c;锯齿波&#xff08;1&#xff09;仿真电路图&#xff08;2&#xff09;源代码&#xff08;3&#xff09;实验结果 DAC转换输出波形 使用DA转换输出正弦波&#xff0c;三角波&#xff0c;锯齿波 &…

如何判断哪种屋顶适合安装光伏板?

随着国家对可再生能源的推广和大力发展&#xff0c;光伏板开始被越来越多人所熟知。而将光伏板安装在家庭楼顶上&#xff0c;不仅可以有效节省土地和楼房面积&#xff0c;还能够为家庭提供更多的经济和环保效益&#xff0c;成为了越来越多人的选择。哪种屋顶适合安装光伏板呢&a…

ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO

ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO 概述 前述博客讲解了 Web 编程的基本知识&#xff0c;包括 HTML、CSS、JavaScript 三个部分&#xff0c;从这节开始&#xff0c;我们进入实战部分&#xff0c;在实际项目中进一步学习 ESP32-Web 编程。 GPIO &#xff08…

leetCode 40.组合总和 II + 回溯算法 + 剪枝 + used数组 + 图解

给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。candidates 中的每个数字在每个组合中只能使用 一次 注意&#xff1a;解集不能包含重复的组合 示例 1: 输入: candidates [10,1,2,7,6,1,5], t…

linux安装minIo(亲测可用)

一、创建文件夹 进入opt文件夹 cd /opt/创建minio文件夹&#xff1b; mkdir minio赋予权限 chmod 777 minio/执行完后查看目录 进到minio文件夹 创建bin目录 mkdir bin创建data目录 mkdir data创建log touch minio.log创建start.sh文件&#xff0c;并写入数据(不会vi或…

搞定这三个问题 伦敦金止损就没问题

笔者多次强调&#xff0c;做伦敦金交易&#xff0c;重要的是风险控制。而止损是我们风险控制中一个很重要的概念。设定好止损&#xff0c;就是风险控制的好开始。下面我们通过三个问题&#xff0c;来解决止损的问题。 问题一&#xff0c;你的止损位在哪里&#xff1f;要做止损&…

多目标水母搜索算法(MOJS)求解微电网优化MATLAB

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 二、多目标水母搜索算法MOJS 多目标水母搜索算法&#xff08;Multi-Objective Jellyfish Search algorithm&#xff0c;MOJS&#xff09;由Jui-Sheng Chou等…

软工2021上下午第六题(组合模式)

阅读下列说明和Java代码&#xff0c;将应填入&#xff08;n&#xff09;处的字句写在答题纸的对应栏内。 【说明】 层叠菜单是窗口风格的软件系统中经常采用的一种系统功能组织方式。层叠菜单中包含的可能是一个菜单项&#xff08;直接对应某个功能&#xff09;&#xff0c;也可…

three.js--立方体

使用three.js渲染出可以调节大小的立方体 1.搭建开发环境 1.首先新建文件夹用vsc打开项目终端 2.执行npm init -y 创建配置文件夹 3.执行npm i three0.152 安装three.js依赖 4.执行npm I vite -D 安装 Vite 作为开发依赖 5.根目录下新建index.html 作为页面入口文件 …

一文例说嵌入式 C 程序的内聚和耦合

1 - 原理篇 低耦合&#xff0c;是指模块之间尽可能的使其独立存在&#xff0c;模块之间不产生联系不可能&#xff0c;但模块与模块之间的接口应该尽量少而简单。这样&#xff0c;高内聚从整个程序中每一个模块的内部特征角度&#xff0c;低耦合从程序中各个模块之间的关联关系…

Java基于springboot开发的土特产网站商城多商家源码

主要功能&#xff1a;用户可以浏览特产&#xff0c;按分类和产地搜索&#xff0c;按分类查询特产&#xff0c;搜索店铺&#xff0c;查看评价&#xff0c;加入购物车&#xff0c;下单&#xff0c;查看店铺主页信息特产等店铺内搜索等&#xff1b;用户可申请开通店铺&#xff0c;…

AI伪原创软件-AI伪原创工具下载

在当今数字化时代&#xff0c;创作者们在追求独特创意的同时&#xff0c;也面临着时间和灵感的双重挑战。AI伪原创技术应运而生&#xff0c;为创作者提供了一种快捷而便利的解决方案。本文将专心分享两款备受瞩目的AI伪原创工具&#xff0c;147SEO伪原创、百度文心一言伪原创&a…

夸克大模型助力学术科研提效 四大优势提升知识正确性

当严谨的学术科研与创新的大模型技术结合在一起&#xff0c;会擦出什么样的火花&#xff1f;日前&#xff0c;夸克大模型甫一推出便以优秀的性能成为国产大模型中的“学霸”。在中国科学技术协会近期主办的“大模型应用场景研讨会”上&#xff0c;夸克大模型在快速阅读、创作润…

java开发之个微群聊管理

简要描述&#xff1a; 群管理操作 请求URL&#xff1a; http://域名/operateChatRoom 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明w…

DCGAN 使用指南:将卷积神经网络和对抗网络结合,适用于生成小尺寸的图像

DCGAN 使用指南&#xff1a;将卷积神经网络和对抗网络结合 网络结构细节设计 论文地址&#xff1a;https://arxiv.org/abs/1511.06434 项目代码&#xff1a;https://github.com/tensorlayer/DCGAN.git DCGAN 适用于生成小尺寸的图像&#xff0c;并且具有简单易用的优势 Styl…

初中古诗文大会填空题的常见题型和阅读专辑的对应知识点分析

前面两篇文章&#xff0c;六分成长为您介绍了2023年初中古诗文大会复选&#xff08;复赛&#xff09;单选题和多选题的常见题型和考察点&#xff0c;并且从历年真题和中学生古诗文阅读专辑&#xff08;初中适用&#xff0c;下称《专辑》&#xff09;中各选了一些题目作为示例&a…

龙芯loongarch64服务器编译安装maturin

前言 maturin 是一个构建和发布基于 Rust 的 Python 包的工具,但是在安装maturin的时候,会出现如下报错:error: cant find Rust compiler 这里记录问题解决过程中遇到的问题: 1、根据错误的提示需要安装Rust Compiler,首先去其官网按照官网给的解决办法提供进行安装 curl…