HarmonyOS--ArkTS(1)--基本语法(1)

目录

基本语法概述

声明式UI描述

自定义组件

创建自定义组件

自定义组件的结构--struct ,@Component,build()函数

生命周期


基本语法概述

  • 装饰器: 用于装饰类、结构、方法以及变量,并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器,@Component表示自定义组件,@Entry表示该自定义组件为入口组件,@State表示组件中的状态变量,状态变量变化会触发UI刷新。
  • UI描述:以声明式的方式来描述UI的结构,例如build()方法中的代码块。
  • 自定义组件:可复用的UI单元,可组合其他组件,如上述被@Component装饰的struct Hello。
  • 系统组件:ArkUI框架中默认内置的基础和容器组件,可直接被开发者调用,比如示例中的Column、Text、Divider、Button。
  • 属性方法:组件可以通过链式调用配置多项属性,如fontSize()、width()、height()、backgroundColor()等。
  • 事件方法:组件可以通过链式调用设置多个事件的响应逻辑,如跟随在Button后面的onClick()。
  • 系统组件、属性方法、事件方法具体使用可参考基于ArkTS的声明式开发范式。

除此之外,ArkTS扩展了多种语法范式来使开发更加便捷:

  • @Builder/@BuilderParam:特殊的封装UI描述的方法,细粒度的封装和复用UI描述。
  • @Extend/@Style:扩展内置组件和封装属性样式,更灵活地组合内置组件。
  • stateStyles:多态样式,可以依据组件的内部状态的不同,设置不同样式。

声明式UI描述

ArkTS以声明方式 组合 和 扩展 组件 来 描述应用程序的UI,同时还提供了基本的属性事件子组件配置方法,帮助开发者实现应用交互逻辑。

//如果组件支持子组件配置,则需在尾随闭包"{...}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。@State size:number = 10
myClickHandler(){}build(){Column() {Row() {Image('https://xyz/test.jpg')Image('test1.jpg').width(100).height(100)// string类型的参数Text('test')//枚举类型.fontSize(20).fontColor(Color.Red).fontWeight(FontWeight.Bold)// $r形式引入应用资源,可应用于多语言场景Text($r('app.string.title_value')).fontSize(this.size)// 无参数形式Text()Button('click +1')//事件方法以“.”链式调用的方式配置系统组件支持的事件//三种方式.onClick(() => {this.myText = 'ArkUI';}).onClick(function(){this.myText = 'ArkUI';}.bind(this)).onClick(this.myClickHandler.bind(this))}
}
}

自定义组件

创建自定义组件

自定义组件具有以下特点:

  • 可组合:允许开发者组合使用系统组件、及其属性和方法。
  • 可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。
  • 数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新
自定义组件的结构--struct ,@Component,build()函数
@Component
struct MyComponent {build() {}
}
@Entry
@Component
struct MyComponent {
}

 提示1: @Entry装饰的自定义组件将作为UI页面的入口 

 提示2:@Entry装饰的自定义组件,其build()函数下的根节点唯一且必要,且必须为容器组件,其中ForEach禁止作为根节点。

@Component装饰的自定义组件,其build()函数下的根节点唯一且必要,可以为非容器组件,其中ForEach禁止作为根节点。

//自定义组件 


//@Component装饰的自定义组件,其build()函数下的根节点唯一且必要,可以为非容器组件,其中ForEach禁止作为根节点。@Component
struct HelloComponent {@State message: string = 'Hello, World!';build() {// HelloComponent自定义组件组合--系统组件Row和Text//(当前根节点Row)Row() {Text(this.message).onClick(() => {// 状态变量message的改变驱动UI刷新,UI从'Hello, World!'刷新为'Hello, ArkUI!'this.message = 'Hello, ArkUI!';})}}
}

 //多次调用自定义组件 

//@Entry装饰的自定义组件,其build()函数下的根节点唯一且必要,且必须为容器组件,其中ForEach禁止作为根节点。
@Entry
@Component
struct ParentComponent {build() {//(当前根节点Column)Column() {Text('ArkUI message')//多次调用自定义组件HelloComponent({ message: 'Hello, World!' });Divider()HelloComponent({ message: '你好!' });}}
}

生命周期

页面生命周期,即被@Entry装饰的组件生命周期,提供以下生命周期接口:

  • onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景,仅@Entry装饰的自定义组件生效。
  • onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入前后台等场景,仅@Entry装饰的自定义组件生效。
  • onBackPress:当用户点击返回按钮时触发,仅@Entry装饰的自定义组件生效。

组件生命周期,即一般用@Component装饰的自定义组件的生命周期,提供以下生命周期接口:

  • aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
  • aboutToDisappear:在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(首页)生命周期。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AWS Remote Control ( Wi-Fi ) on i.MX RT1060 EVK - 2 “架构 AWS”

接续上一章节,我们把开发环境架设好之后,此章节叙述如何建立 AWS IoT 环境,请务必已经有 AWS Account,申请 AWS Account 之流程将不在此说明。 III-1. 登入AWS IoT, 在“管理”>“所有装置”>“实物”下点击“建…

Avalonia中如何将View事件映射到ViewModel层

前言 前面的文章里面我们有介绍在Wpf中如何在View层将事件映射到ViewModel层的文章,传送门,既然WPF和Avalonia是两套不同的前端框架,那么WPF里面实现模式肯定在这边就用不了,本篇我们将分享一下如何在Avalonia前端框架下面将事件…

【React Hooks】=> useId()

相比较使用全局变量 作为唯一 ID 和直接使用 useId 是有区别的。 官方解释如下: 如果是将 useId 作为 id 的情况下,是如下的形式 也就是说你使用了 useId 作为唯一 ID 那么在你删除数组某个元素之后不会导致某个 ID 被重复使用,如果使用的全…

分布式环境下的session 共享-基于spring-session组件和Redis实现

1、问题概述 不是所有的项目都是单机模式的,当一个项目服务的局域比较广,用户体量比较大,数据量较大的时候,我们都会将项目部署到多台服务器上,这些个服务器都是分布在不同的区域,这样实现了项目的负载和并…

工作实践中如何使用ThreadLocal?

主要作用 多线程问题主要是多个线程共享一个对象导致的,我们不让他共享就行了,每个线程保存一份自己的对象,自己玩自己的对象,就不会出现线程问题了。 ThreadLocal这个作用就是让线程自己独立保存一份自己的变量副本。每个线程都…

自动驾驶学习笔记(十六)——目标跟踪

#Apollo开发者# 学习课程的传送门如下,当您也准备学习自动驾驶时,可以和我一同前往: 《自动驾驶新人之旅》免费课程—> 传送门 《Apollo 社区开发者圆桌会》免费报名—>传送门 文章目录 前言 匹配关联 轨迹记录 状态预测 总结 前…

《Kafka权威指南》读书笔记

《Kafka权威指南》第一、三、四、六章,是重点。可以多看看。 一、 Kafka的组成 kafka是一个发布与订阅消息系统消息:kafka的数据单元称为"消息"。可以把消息看成是数据库中的一个"数据行"。 消息的key:为key生成一个一…

【工厂方法】设计模式项目实践

前言 以采集数据处理逻辑为例,数据采集分为不同种类如:MQTT、MODBUS、HTTP等,不同的采集数据有不同的解析处理逻辑。但总体解析处理步骤是固定的。可以使用工厂方法设计模式简化代码,让代码变得更加优雅。 代码实践 抽象类 总体…

蒙特霍尔问题(选择三扇门后的车与羊)及其贝叶斯定理数学解释

1. 蒙特霍尔问题 有一个美国电视游戏节目叫做“Let’s Make a Deal”,游戏中参赛者将面对3扇关闭的门,其中一扇门背后有一辆汽车,另外两扇门后是山羊,参赛者如果能猜中哪一扇门后是汽车,就可以得到它。 通常&#xf…

基于PicGo实现Typora图片自动上传GitHub

文章目录 一. 引言二. 原理三. 配置3.1 GitHub 设置3.2 下载配置 PicGo3.3 配置 Typora3.4 使用 一. 引言 Typora是一款非常好的笔记软件,但是有一个比较不好的地方:默认图片是存放在本地缓存中。这就会导致文件夹一旦被误删或电脑系统重装而忘记备份文件…

爬虫解析-jsonpath (六)

jsonpath只能解析本地文件 jsonpath的使用: obj json.load(open(.json文件,r,encodingutf-8))place_name jsonpath.jsonpath(obj, json语法) 目录 1.安装jsonpath 2.Xpath和jsonpath的语法对比 练习:使用jsonpath解析JSON文件 3.使用jsonpath抓取…

openEuler JDK21 部署 Zookeeper 集群

zookeeper-jdk21 操作系统:openEuler JDK:21 主机名IP地址spark01192.168.171.101spark02192.168.171.102spark03192.168.171.103 安装 1. 升级内核和软件 yum -y update2. 安装常用软件 yum -y install gcc gcc-c autoconf automake cmake make \zl…

机器学习实验五:集成学习

系列文章目录 机器学习实验一:线性回归机器学习实验二:决策树模型机器学习实验三:支持向量机模型机器学习实验四:贝叶斯分类器机器学习实验五:集成学习机器学习实验六:聚类 文章目录 系列文章目录一、实验…

imazing正在查找最新的apple mobile device组件

​ Apple Mobile Device是macOS的一个组件,它允许您在Mac上与iOS设备进行无缝连接和通信。因此,无法直接在苹果设备上下载和安装Apple Mobile Device,需要借助管理工具进行下载安装后启动。 如果您需要与iOS设备进行通信和同步,…

流量异常-挂马造成百度收录异常关键词之解决方案(虚拟主机)

一.异常现象:流量突然暴涨,达到平时流量几倍乃至几十倍,大多数情况下因流量超标网站被停止。 二.排查原因: 1.首先分析web日志:访问量明显的成倍、几十倍的增加;访问页面不同;访问IP分散并不固…

Linux常见压缩指令小结

为什么需要压缩技术 我们都知道文件是以byte作为单位的,如果我们的文件仅仅在低位占一个1 0000 0001这种情况我们完全可以压缩一下,将高位的0全部抹掉即可。 如上所说是一种压缩技术,还有一种就是将1111(此处省略96个)一共100个1&#xff0…

logback的使用

1 logback概述 SLF4J与其它日志组件调用关系图如下所示。 SLF4J,即Java中的简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种各样的日志系统。 SLF4J最常用的日志实现框架是&am…

软件设计师——计算机组成原理(二)

📑前言 本文主要是【计算机组成原理】——软件设计师——计算机组成原理的文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是听风与他🥇 ☁️博客首页:CSDN主页听风与他 …

007:vue实现与iframe实现页面数据通信

首页先搭建一个html页面和vue页面,在vue页面中,嵌入我们需要的iframe页面 文章目录 1. 搭建 html 页面和 vue 页面2. 实现 iframe 向 vue 页面通信3. 在实现 vue 向 iframe 页面通信 1. 搭建 html 页面和 vue 页面 暂定为 iframeDemo.html 和 vueDemo.v…

外观模式 rust和java的实现

文章目录 外观模式介绍实现javarustrust仓库 外观模式 外观模式(Facade Pattern)隐藏系统的复杂性,它为子系统中的一组接口提供一个统一的高层接口,使得这些接口更加容易使用。外观模式通过封装子系统内部的复杂性,提…