【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门

在这里插入图片描述

在这里插入图片描述

个人名片：

🐼作者简介：一名大三在校生，喜欢AI编程🎋
🐻‍❄️个人主页🥇：落798.
🐼个人WeChat：hmmwx53
🕊️系列专栏：🖼️

  • 零基础学Java——小白入门必备
  • 重识C语言——复习回顾
  • 计算机网络体系———深度详讲
  • HCIP数通工程师-刷题与实战
  • 微信小程序开发——实战开发
  • HarmonyOS 4.0 应用开发实战——实战开发
    🐓每日一句：🍭我很忙，但我要忙的有意义！
    欢迎评论 💬点赞👍🏻 收藏 📂加关注+

文章目录

  • 一、ArkTS 快速入门
    • 1.1 声明式UI
      • 1.1.1 定义界面状态
      • 1.1.2 描述界面显示效果
      • 1.1.3 改变状态
      • 1.1.4 总结
    • 2.1 组件化
    • 3.1 入门案例
      • 3.1.1 案例效果
      • 3.1.2 完整代码
    • 4.1 语法说明
      • 4.1.1 声明组件
      • 4.1.2 自定义组件
      • 4.1.3 渲染控制
      • 4.1.4 循环渲染
    • 欢迎添加微信，加入我的核心小队，请备注来意

一、ArkTS 快速入门

ArkTS 在继承了Typescript语法的基础上，主要扩展了声明式UI开发相关的能力。

1.1 声明式UI

声明式UI是一种编写用户界面的范式。下面通过一个具体案例来学习这种开发范式，假如现在要实现如下界面

在这里插入图片描述

1.1.1 定义界面状态

按照声明式UI的开发范式，首先需要分析和定义页面的各种状态，并声明相应的状态变量用于表示不同的状态。
当前案例中，界面共有两个状态，分别是开灯和关灯 状态，所以我们可以使用一个boolean类型的变量来表示这两个状态，true表示开灯，false表示关灯。如下：

@State isOn: boolean = false;

说明：@State用于声明该变量为状态变量。

1.1.2 描述界面显示效果

在分析完界面状态后，我们需要准确的描述界面在不同状态下的显示效果。
在当前案例中，具体逻辑如下图所示

在这里插入图片描述

1.1.3 改变状态

在明确了界面在不同状态下的显示效果后，我们只需修改状态变量的值，就能触发界面的更新。
在当前案例中，若我们将isOn的值改为true，那么界面上就会显示开灯的图片，否则就会显示关灯的图片。
为了实现点击按钮开/关灯的效果，我们可以为按钮绑定点击事件：

 ● 当用户点击开灯按钮时，我们就将isOn的值改为true。● 当用于点击关灯按钮时，我们就将isOn的值改为false。

在这里插入图片描述

1.1.4 总结

以上就是声明式UI开发范式的大致流程，下面为大家总结一下声明式UI的核心思想

● 声明式描述

开发者只需描述在界面在不同状态下要呈现的最终效果，而无需关注界面变化的具体过程。

在这里插入图片描述

● 状态数据驱动界面更新

开发者只需修改状态变量的值，界面就会自动更新。

在这里插入图片描述

2.1 组件化

在鸿蒙开发中，组件是构成界面的最小单元，我们所看到的界面，都是由众多组件组合而成的，所以编写界面其实就是组合组件的过程，ArkTS提供了很多的内置组件，例如：Text、Button、Image等等；并且ArkTS还支持自定义组件，让开发者可根据具体需求自定义组件中的内容。

在这里插入图片描述

3.1 入门案例

3.1.1 案例效果

案例的最终效果如下图所示

在这里插入图片描述

3.1.2 完整代码

案例的完整代码见Demos/entry/src/main/ets/pages/helloworld/light/solution/Light.ets

@Entry
@Component
struct LightPage {@State isOn: boolean = false;build() {Column({ space: 20 }) {if (this.isOn) {Image('pages/helloworld/light/solution/images/img_light.png').height(300).width(300).borderRadius(20)} else {Image('pages/helloworld/light/solution/images/img_dark.png').height(300).width(300).borderRadius(20)}Row({ space: 50 }) {Button('关灯').onClick(() => {this.isOn = false})Button('开灯').onClick(() => {this.isOn = true;})}}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}

4.1 语法说明

4.1.1 声明组件

下面通过一个相对简单的案例来系统的学习 ArkTS 声明组件的语法，案例的最终效果如下，完整代码见Demos/entry/src/main/ets/pages/helloworld/delete/DeleteButton.ets

在这里插入图片描述

声明组件的完整语法如下图所示

在这里插入图片描述

各部分语法说明如下

  • 组件参数
    如果组件的定义包含参数，可在组件名称后面的()中配置相应参数。各组件支持的参数，可查看 API 文档，查看方式如下

    • 首先将鼠标在相应组件悬停
      在这里插入图片描述
    • 点击Show in API Reference，就会弹出 API 文档
      在这里插入图片描述

  • 子组件
    如果组件支持子组件配置，可在()后的{}中添加子组件，若不支持子组件，则不需要写{}。

  • 属性方法
    属性方法用于配置组件的样式和其他属性，可以在组件声明的末尾进行链式调用。各组件支持的属性可查看 API 文档，除去每个组件的专有属性，还有各组件都能配置的通用属性，通用属性也可通过 API 文档查看。
    在这里插入图片描述

  • 事件方法
    事件方法用于为组件绑定交互事件，可以在组件声明的末尾进行链式调用。各组件的支持的事件可查看 API 文档，除去每个组件的专有事件，还有各组件都支持的通用事件，通用事件也可通过 API 文档查看。
    在这里插入图片描述

4.1.2 自定义组件

除去系统预置的组件外，ArkTS 还支持自定义组件。使用自定义组件，可使代码的结构更加清晰，并且能提高代码的复用性。
语法说明
自定义组件的语法如下图所示
在这里插入图片描述

各部分语法说明如下：

struct关键字

  • struct是ArkTS新增的用于自定义组件或者自定义弹窗的关键字。其声明的数据结构和TS中的类十分相似，可包含属性和方法。
    build方法
  • build()方法用于声明自定义组件的UI结构。
    组件属性
    组件属性可用作自定义组件的参数，使得自定义组件更为通用。
  • @Compnent装饰器

@Component装饰器用于装饰struct关键字声明的数据结构。struct被@Component装饰后才具备组件化的能力。

注： 装饰器是Typescript中的一种特殊语法，常用于装饰类、方法、属性，用于修改或扩展其原有的行为。
在学完自定义组件的语法之后，我们会发现前文案例中的每个页面实际上都是一个自定义组件。但是和自定义组件的语法相比，前边的每个案例还会多出一个@Entry装饰器，那@Entry的作用又是啥呢？

在鸿蒙应用中，每个页面都是由一些列组件组合而成的，并且这些组件都是逐层嵌套的，因此这些组件最终形成了一个组件树的结构，如下图所示
在这里插入图片描述

我们前边所编写的每个页面就相当于是组件树的根节点，而@Entry装饰器的作用就是标识该组件为组件树的根节点，也就是一个页面的入口组件。
案例实操
现在需要对前文的开/关灯的案例做出如下改造，由于两个按钮的结构十分相似，所以可考虑自定义一个按钮组件，然后进行复用。
在这里插入图片描述

案例的完整代码见：Demos/entry/src/main/ets/pages/helloworld/custom/solution/Light.ets

4.1.3 渲染控制

条件渲染

概述 ：条件渲染可根据应用的不同状态渲染不同的UI界面，例如前文的开/关灯案例，以及以下的播放/暂停案例，均可使用条件渲染实现。

在这里插入图片描述

案例的完整代码见：Demos/entry/src/main/ets/pages/helloworld/condition/solution/PlayAndPausePage.ets
语法说明
条件渲染的语法如下

if (...){//UI描述 
}else if (...){//UI描述
}else{//UI描述
}

4.1.4 循环渲染

概述

循环渲染可使用ForEach语句基于一个数组来快速渲染一个组件列表，例如以下案例中的选项列表就可通过循环渲染实现。

在这里插入图片描述

案例的完整代码见：Demos/entry/src/main/ets/pages/helloworld/foreach/solution/FruitPage.ets
语法说明
ForEach循环渲染的语法如下
各参数的含义如下

ForEach(arr: any[], itemGenerator: (item: any, index?: number) => void,keyGenerator?: (item: any, index?: number) => string
)
  • arr
    需要进行循环渲染的数据源，必须为数组类型，例如上述案例中的
@State options: string[] = ["苹果", "桃子", "香蕉", "橘子"];
  • itemGenerator
    组件生成函数，用于为arr数组中的每个元素创建对应的组件。该函数可接收两个参数，分别是
    • item：arr数组中的数据项
    • index（可选）：arr数组中的数据项的索引

例如上述案例中的

(item: string) => {Button(item).width(100).backgroundColor(Color.Green).onClick(() => {this.answer = item;})}

keyGenerator（可选）：
key生成函数，用于为arr数组中的每个数据项生成唯一的key。

key的作用

ForEach在数组发生变化（修改数组元素或者向数组增加或删除元素）时，需要重新渲染组件列表，在重新渲染时，它会尽量复用原来的组件对象，而不是为每个元素都重新创建组件对象。key的作用就是辅助ForEach完成组件对象的复用。

具体逻辑如下：

ForEach在进行初次渲染时，会使用keyGenerator为数组中的每个元素生成一个唯一的key，并将key作为组件对象的标识。当数组发生变化导致ForEach需要重新渲染时，ForEach会再次使用keyGenerator为每个元素重新生成一遍key，然后ForEach会检查新生成的key在上次渲染时是否已经存在，若存在，ForEach就会认为这个key对应的数组元素没有发生变化，那它就会直接复用这个key所对应的组件对象；若不存在，ForEach就会认为这个key对应的元素发生了变化，或者该元素为新增元素，此时，就会为该元素重新创建一个组件对象。

开发者可以通过keyGenerator函数自定义key的生成规则。如果开发者没有定义keyGenerator函数，则系统会使用默认的key生成函数，即

(item: any, index: number) => { return index + '__' + JSON.stringify(item); }

在某些情况下默认的key生成函数，会导致界面渲染效率低下，此时可考虑通过keyGenerator函数自定义生成逻辑，例如如下场景

状态变量数组定义如下

@State arr:string[] = ["zhangsan","lisi","wangwu"]

ForEach语句如下

Column(){ForEach(this.arr,(item)=>{ Text(item) })
}

初次渲染时，每个元素对应的key依次为0__"zhagnsan"、1__"lisi"、2__"wangwu"。若现有一个操作是向arr数组头部插入新的元素，例如新元素为wanger，按照默认的key生成逻辑，插入新元素之后每个元素的key就会依次变为0__"wanger"、1__"zhagnsan"、2__"lisi"、3__"wangwu"，也就是所有元素的key都发生了变化，因此UI界面更新时需要为每个元素都重新创建组件对象，即便原有的元素没有发生变化也无法复用之前的组件，这样一来就导致了性能浪费。此时我们就可以考虑提供第三个参数，如下

Column(){ForEach(this.arr, (item)=>{ Text(item) }, item => JSON.stringify(item))
}

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

欢迎添加微信，加入我的核心小队，请备注来意

👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇

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

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

相关文章

python中[[]] * (n)和[[] for _ in range(n)]的区别

python中[[]] * (n)和[[] for _ in range(n)]的区别

1、现象 刷leetcode207的时候碰到一个坑，用[[]] * (n)初始化二维数组，逻辑是正确的，但是结果始终不对。 2、原因 最后定位是初始化语句使用错误导致的，我使用的是[[]] * (n)，应该使用[[] for _ in range(n)] 3、解…
阅读更多...
Stable Diffusion 模型下载：ReV Animated

Stable Diffusion 模型下载：ReV Animated

模型介绍 该模型能够创建 2.5D 类图像生成。此模型是检查点合并，这意味着它是其他模型的产物，以创建从原始模型派生的产品。 条目内容类型大模型基础模型SD 1.5来源CIVITAI作者s6yx文件名称revAnimated_v122EOL.safetensors文件大小5.13GB 生成案例 …
阅读更多...
redis数据库设置对象的过期时间,到期后自动删除该条数据

redis数据库设置对象的过期时间,到期后自动删除该条数据

redis数据库设置对象的过期时间,到期后自动删除该条数据！过期时间的事情经常发生。比如大家领到了一些购物券。这张购物券有一个过期时间。必须在某节点之前（某年某月末日）之前，使用掉，否则该券就会过期，无…
阅读更多...
Ruby详解及安装流程

Ruby详解及安装流程

文章目录 一、Ruby详解二、Ruby安装流程三、Ruby案例四、Ruby常见问题五、Ruby优缺点六、热门文章 一、Ruby详解 Ruby是一种高级编程语言，具有简单易学、灵活多变、优雅美丽的语法特点。它是一种面向对象的编程语言，具有动态类型和解释型语言的特性。在…
阅读更多...
Aigtek高压放大器用途是什么呢

Aigtek高压放大器用途是什么呢

高压放大器在电子领域中扮演着至关重要的角色，其主要作用是将低电压信号放大到更高的电压水平。这种类型的放大器广泛用于各种应用中，以下是高压放大器的用途以及其关键作用的详细介绍。 1、科学研究和实验室应用： 高压放大器在科学研究和实验…
阅读更多...
【Linux】Linux权限

【Linux】Linux权限

Hello everybody!在介绍完Linux操作系统常用的基本指令后，咱们就要开始权限的讲解了。如果没有看过我之前文章的宝子们可以去看看呦！有比较系统的指令讲解！ 回到正题，关于权限，实际上没有大家想象中的那么神秘&#x…
阅读更多...
解决问题（Tensorflow框架）：ImportError: cannot import name ‘merge‘ from ‘keras.layers‘

解决问题（Tensorflow框架）：ImportError: cannot import name ‘merge‘ from ‘keras.layers‘

看了一圈解决方案，没有找到跟我这个相关的 这就是版本兼容性问题 说句最简单的，针对我这个问题 直接把merge删除点就完事了，因为新版的tensorflow框架这个里面不包含merge，所以直接删掉问题就解决了
阅读更多...
Linux进程信号处理：深入理解与应用（2​​）

Linux进程信号处理：深入理解与应用（2​​）

🎬慕斯主页：修仙—别有洞天 ♈️今日夜电波：its 6pm but I miss u already.—bbbluelee 0:01━━━━━━️💟──────── 3:18 🔄 ◀️…
阅读更多...
Android 无操作之后定时退出

Android 无操作之后定时退出

android定时器监用户听对页面无操作5分钟退出登录实现 - 简书 private long advertisingTime 600000;///定时结束退出登录10分(分钟)600000毫秒public CountDownTimer countDownTimer;Overrideprotected void onResume() {super.onResume();//启动定时if (isTimedExitApp()) …
阅读更多...
ElementUI Form：Form表单

ElementUI Form：Form表单

ElementUI安装与使用指南 Form表单 点击下载learnelementuispringboot项目源码 效果图 el-form.vue&#xff08;Form表单&#xff09;页面效果图 项目里 el-form.vue代码 <script> export default {name: el_form,data() {var checkAge (rule, value, callback…
阅读更多...
计算机设计大赛 深度学习 opencv python 公式识别(图像识别 机器视觉)

计算机设计大赛 深度学习 opencv python 公式识别(图像识别 机器视觉)

文章目录 0 前言1 课题说明2 效果展示3 具体实现4 关键代码实现5 算法综合效果6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的数学公式识别算法实现 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学…
阅读更多...
中等题 ------ 链表

中等题 ------ 链表

文章目录 1. 删除链表中的倒数第N个节点&#xff08;1&#xff09;栈&#xff08;2&#xff09;双指针&#xff08;快慢指针&#xff09; 2. 交换链表中的节点3. 两数相加4. 合并两个链表5. 旋转链表6. 奇偶链表7. 两两交换8. k 个一组翻转链表9. 分割链表10. 分隔链表11. 重排…
阅读更多...
如何保障代码覆盖率？它和精准测试有什么关系？

如何保障代码覆盖率？它和精准测试有什么关系？

前言 大家好&#xff0c;我是chowley&#xff0c;今天来聊一聊代码覆盖率和精准测试两者之间的关系。 在软件开发和测试中&#xff0c;代码覆盖率是一个重要的指标&#xff0c;它可以帮助我们评估测试用例对源代码的覆盖程度。精准测试则注重深入挖掘特定功能或模块的问题。 …
阅读更多...
lombok原理介绍

lombok原理介绍

文章目录 首先介绍一下springboot开始正题看看lombok源码再进一步深入(下面一段是借鉴参考文章的内容)总结参考文章由于lombok基本使用在springboot框架中,因此 首先介绍一下springboot Spring Boot是一个基于Spring框架的开源Java框架，旨在简化和加速Java应用程序的开发过程。…
阅读更多...
19.HarmonyOS App(JAVA)依赖布局DependentLayout使用方法

19.HarmonyOS App(JAVA)依赖布局DependentLayout使用方法

layout/ability_main.xml 显示位置不对&#xff1a;检查布局文件ohos:lef_of "id:tuzi",比如显示在兔子的左侧&#xff0c;这里就会显示不对。 需要id前没有$符号。改为&#xff1a; ohos:lef_of "$id:tuzi" <?xml version"1.0" encodi…
阅读更多...
第六讲：文件操作

第六讲：文件操作

第六讲：文件操作 文件夹创建文件夹移动文件夹复制文件夹删除文件夹文件操作文件读取文件写入文件文件夹 创建文件夹 定义创建文件夹函数：chmk_path()定义一个函数 chmk_path()，这个函数的功能是创建文件夹。 首先需要导入操作系统接口模块——os 模块，这个模块中包含某些函…
阅读更多...
前端小案例——滚动文本区域（HTML+CSS, 附源码）

前端小案例——滚动文本区域（HTML+CSS, 附源码）

一、前言 实现功能: 这个案例实现了一个具有滚动功能的文本区域&#xff0c;用于显示长文本内容&#xff0c;并且可以通过滚动条来查看完整的文本内容。 实现逻辑&#xff1a; 内容布局&#xff1a;在<body>中&#xff0c;使用<div>容器创建了一个类名为listen_t…
阅读更多...
5.0 HDFS 集群服务建立教程

5.0 HDFS 集群服务建立教程

HDFS 集群是建立在 Hadoop 集群之上的&#xff0c;由于 HDFS 是 Hadoop 最主要的守护进程&#xff0c;所以 HDFS 集群的配置过程是 Hadoop 集群配置过程的代表。 使用 Docker 可以更加方便地、高效地构建出一个集群环境。 每台计算机中的配置 Hadoop 如何配置集群、不同的计…
阅读更多...
【实战系列----消息队列 数据缓存】rabbitmq 消息队列 搭建和应用

【实战系列----消息队列 数据缓存】rabbitmq 消息队列 搭建和应用

线上运行图&#xff0c;更新不算最新版&#xff0c;但可以使用修改线程等补丁功能&#xff0c;建议使用新版本。 远程服务器配置图: 这个可以更具体情况&#xff0c;因为是缓存队列理所当然 内存越大越好&#xff0c;至于核心4核以上足够使用。4核心一样跑 这里主要是需要配置服…
阅读更多...
网关、路由器与子网掩码

网关、路由器与子网掩码

文章目录 概念举例总结 概念 网关&#xff08;Gateway&#xff09;&#xff1a; 就是一个网络连接到另一个网络的“关口”&#xff0c;实质上是一个网络通向其他网络的IP地址。 网关作用&#xff1a; 实现两个不同网段的设备(IP)进行通信。 路由器&#xff08;Router&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023