HarmonyOs 应用基础--ArkTS-核心-基础

目录

八. ArkTS-语句-类型进阶与渲染控制

1. 对象进阶

1.1. 定义对象数组

1.2. 使用对象数组

2. 渲染控制 - ForEach

2.1. ForEach语法

 2.2. ForEach使用优化代码

 2.3. 案例-学生档案

实现思路

3. Math对象

 4. 综合案例 -- 抽奖卡案例

4.1. 初始页面布局(静态)

4.2. 根据数据渲染初始页面

4.2.1. 准备响应数据

4.2.2. 渲染初始页面

4.3. 遮罩层静态布局

4.4. 遮罩层动态交互

4.4.1. 按钮交互

4.4.2. 图片数据

4.5. 中奖结果

 4.5.1. 抽奖静态页面

4.5.2. 条件渲染-抽卡与抽奖页面

4.5.3. 抽奖数据处理

4.6. 再次抽奖


八. ArkTS-语句-类型进阶与渲染控制

今日核心

  1. 对象
  2. 渲染控制ForEach

1. 对象进阶

1.1. 定义对象数组

// 1. 定义接口
interface Person {stuId: numbername: stringgender: stringage: number
}// 2. 根据接口定义对象数组
let students: Person[] = [{stuId: 1, name: '小红', gender: '女', age: 18},{stuId: 2, name: '小明', gender: '男', age: 19},{stuId: 3, name: '大强', gender: '男', age: 18}
]

1.2. 使用对象数组

  • 访问某一个对象:
    • 每一对象在数组中都是有对应的下标的, 可以通过 数组名[下标] 访问
  • 访问某一对象的某一个属性
    • 先找到要访问的对象, 在该对象的属性访问属性 数组名[下标].属性名 访问
  • 依次访问每一个对象
    • for ... of 进行访问即可
// 3. 访问属性 数组名[下标].属性名
console.log('小红的年龄是', students[0].age)// 4. 遍历对象数组
for (const item of students) {console.log('学生姓名是', item.name)
}

2. 渲染控制 - ForEach

当我们页面中的区域中有多个样式相同的小区域,只有内容数据不一样的时候, 为了提升代码的复用率,不需要一个一个的编写UI组件,我们可以将所有的数据整合成一个数组, 并采取ForEach进行循环渲染.如下图区域,如果我们分别实现每个栏目,代码太过于冗余,这时就可以使用ForEach进行渲染了

2.1. ForEach语法

ForEach基于数组类型数据来进行循环渲染,需要与容器组件配合使用,且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。

  • 语法: ForEach(arr, (item, index) => {})

参数

参数类型

是否必须

参数说明

arr

Array

数据源, 根据该数组生成对应的UI组件渲染到页面中:

  • 可以为空数组

UI组件生成函数

(item: any, index?: number) => void

UI组件生成函数

  • 为数组中的每个元素创建对应的组件
  • item: 代表每一个数组元素, 类型与数组元素保持一致,不可以省略
  • index: 代表每一个数组元素的下标,可以省略

 2.2. ForEach使用优化代码


@Entry@Componentstruct Index {build() {Column(){Text('电子产品').fontSize('24').fontWeight(700).fontColor(Color.Orange).width('100%').padding(15)Text('精品服饰').fontSize('24').fontWeight(700).fontColor(Color.Orange).width('100%').padding(15)Text('母婴产品').fontSize('24').fontWeight(700).fontColor(Color.Orange).width('100%').padding(15)Text('影音娱乐').fontSize('24').fontWeight(700).fontColor(Color.Orange).width('100%').padding(15)Text('海外旅游').fontSize('24').fontWeight(700).fontColor(Color.Orange).width('100%').padding(15)}.width('100%').height('100%')}}

 完成代码

@Entry@Componentstruct Index {@Statetitles:string[] = ['电子产品', '精品服饰', '母婴产品', '影音娱乐', '海外旅游']build() {Column() {ForEach(this.titles, (item: string, index: number) => {Text(item).fontSize('24').fontWeight(700).fontColor(Color.Orange).width('100%').padding(15)})}}}

 2.3. 案例-学生档案

模版代码 

@Entry
@Component
struct Index {build() {Column() {Row() {Text(`姓名:张三,年龄:18`).fontSize(18).fontColor('#fff')Button('年龄+1').backgroundColor('#e64133')}.width('100%').height(60).backgroundColor(Color.Orange).borderRadius(5).padding({left: 10, right: 10}).margin({bottom: 10}).justifyContent(FlexAlign.SpaceBetween)}.padding(20)}
}
实现思路
  • 准备数据
    • 定义数组元素接口
    • 根据接口创建对象数组保存数据
  • ForEach循环渲染
    • 使用数组元素的属性(item.属性名)动态填充UI组件对应的位置
interface Person {stuId: numbername: stringgender: stringage: number
}@Entry
@Component
struct Index {@Statestudents: Person[] = [{stuId: 1, name: '小红', gender: '女', age: 18},{stuId: 2, name: '小明', gender: '男', age: 19},{stuId: 3, name: '大强', gender: '男', age: 18}]build() {Column() {ForEach(this.students, (item: Person, index: number) => {Row() {Text(`姓名:${item.name},年龄:${item.age}`).fontSize(18).fontColor('#fff')Button('年龄+1').backgroundColor('#e64133').onClick(() => {// item.age += 1this.students[index] = {stuId: item.stuId,name: item.name,gender: item.gender,age: item.age += 1}})}.width('100%').height(60).backgroundColor(Color.Orange).borderRadius(5).padding({left: 10, right: 10}).margin({bottom: 10}).justifyContent(FlexAlign.SpaceBetween)})}.padding(20)}
}

3. Math对象

Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法, Math 用于 Number 类型数据的处理.

Math.random()

  • 随机数
  • 取值范围 [0, 1)之间的随机小数,左闭右开, 可以取到0,但是取不到1

Math.ceil()

  • 需要一个数字形参数
  • 总是向上取整

Math.floor()

  • 需要一个数字形参数
  • 总是向下取整
  • 代码测试
// 1. 随机数
console.log('Math对象', Math.random())  // 0-1 之间的随机小数// 2. 向上取整
console.log('Math对象', Math.ceil(1.1))  // 2
console.log('Math对象', Math.ceil(1.9))  // 2// 3. 向下取整
console.log('Math对象', Math.floor(1.1))  // 1
console.log('Math对象', Math.floor(1.9))  // 1
  • 求0--10之间的随机整数
// 0-10 之间的随机数
console.log('Math对象', Math.random() * 11)// 0-10 之间的随机 整数
console.log('Math对象', Math.floor(Math.random() * 11))

 4. 综合案例 -- 抽奖卡案例

实现如下图所示的效果 

4.1. 初始页面布局(静态)

备注:无数据

@Entry
@Component
struct Index {build() {Column() {// 一. 初始界面Column() {// 图片区域Flex({wrap: FlexWrap.Wrap}) {Badge({count: 1,style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}}) {Image($r('app.media.bg_00')).width(80)}.margin(15)Badge({count: 1,style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}}) {Image($r('app.media.bg_00')).width(80)}.margin(15)Badge({count: 1,style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}}) {Image($r('app.media.bg_00')).width(80)}.margin(15)Badge({count: 1,style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}}) {Image($r('app.media.bg_00')).width(80)}.margin(15)Badge({count: 1,style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}}) {Image($r('app.media.bg_00')).width(80)}.margin(15)Badge({count: 0,style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}}) {Image($r('app.media.bg_00')).width(80)}.margin(15)}.margin({top: 100, bottom: 50}).padding({left: 15})// 抽卡按钮Button('立即抽卡').width(200).backgroundColor('#ED5B8C').stateStyles({pressed: {.backgroundColor('#EA446C')}}).animation({duration: 1000})}}}
}

4.2. 根据数据渲染初始页面

4.2.1. 准备响应数据

思路: 观察效果可以发现列表区域的每一项, 至少需要两个数据:

  1. 图片的地址
  2. 抽中的数量
// 初始界面卡片接口
interface Card {url: stringnum: number
}// 初始界面卡片状态@Stateimages: Card[] = [{url: 'app.media.bg_00', num: 0},{url: 'app.media.bg_01', num: 0},{url: 'app.media.bg_02', num: 0},{url: 'app.media.bg_03', num: 0},{url: 'app.media.bg_04', num: 0},{url: 'app.media.bg_05', num: 0}]
4.2.2. 渲染初始页面

ForEach() 渲染 Badge组件

// 初始界面卡片接口
interface Card {url: stringnum: number
}@Entry
@Component
struct Index {// 初始界面卡片状态@Stateimages: Card[] = [{url: 'app.media.bg_00', num: 0},{url: 'app.media.bg_01', num: 0},{url: 'app.media.bg_02', num: 0},{url: 'app.media.bg_03', num: 0},{url: 'app.media.bg_04', num: 0},{url: 'app.media.bg_05', num: 0}]build() {Column() {// 一. 初始界面Column() {// 图片区域Flex({wrap: FlexWrap.Wrap}) {ForEach(this.images, (item: Card, index: number) => {Badge({count: item.num,style: {badgeSize: 16, badgeColor: '#f00', fontSize: 14}}) {Image($r(`${item.url}`)).width(80)}.margin(15)})}.margin({top: 100, bottom: 50}).padding({left: 15})// 抽卡按钮Button('立即抽卡').width(200).backgroundColor('#ED5B8C').stateStyles({pressed: {.backgroundColor('#EA446C')}}).animation({duration: 1000})}}}
}

4.3. 遮罩层静态布局

单击“立即抽卡”按钮后显示的遮罩层

  • 标签解构: Column > Text + Image + Button

样式枚举:

  1. 遮罩层整体样式:

宽度 -> 100% 高度 -> 100% 背景色 -> 'rgba(0,0,0,0.8)' 定位 内容主轴对齐方式 -> 居中

  1. 文字: 颜色 -> '#F5EBCF' 大小 -> 25 粗细 -> 600
  2. 图片: 外边距 -> 30 宽度 -> 200
  3. 按钮样式:

宽度 -> 200 高度 -> 50 背景色 -> 透明 边框 -> 粗细 2 颜色 '#FFF9E0'

Column({space: 30}) {Text('获取生肖卡').fontColor('#F5EBCF').fontSize(25).fontWeight(600)Image($r('app.media.img_00')).width(200)Button('开心收下').width(200).height(50).backgroundColor(Color.Transparent).border({width: 2, color: '#FFF9E0'})
}
.width('100%').height('100%').backgroundColor('rgba(0,0,0,0.8)').justifyContent(FlexAlign.Center).position({x: 0, y: 0})

4.4. 遮罩层动态交互

4.4.1. 按钮交互

遮罩层的显示隐藏, 图片添加缩放效果

思路分析:

默认状态

  1. 界面隐藏visibility(Visibility:Hidden)
  2. 生肖卡隐藏(缩放比例为0)

抽卡后状态

  1. 界面显示visibility(Visibility:Visible)
  2. 生肖卡显示(缩放比例为1)

单击“开心收下”按钮

  1. 界面隐藏
 // 是否显示生肖卡界面状态@StateisVisible: boolean = false// 生肖卡缩放状态@StateimgX: number = 0@StateimgY: number = 0// 抽卡按钮
Button('立即抽卡').width(200).backgroundColor('#ED5B8C').stateStyles({pressed: {.backgroundColor('#EA446C')}}).animation({duration: 1000}).onClick(() => {this.isVisible = truethis.imgX = 1this.imgY = 1})// 二. 生肖卡界面
Column({space: 30}) {Image($r('app.media.img_00')).width(200).scale({x: this.imgX, y: this.imgY}).animation({duration: 400})Button('开心收下').onClick(() => {// 生肖卡界面隐藏;卡片隐藏this.isVisible = falsethis.imgX = 0this.imgY = 0})
}// 使用状态控制整个界面显隐.visibility(this.isVisible ? Visibility.Visible : Visibility.Hidden)
4.4.2. 图片数据

随机抽中一张生肖卡,单击“开心收下”按钮,显示对应的生肖卡,角标+1

思路分析:

  1. 随机显示生肖卡
  2. 卡片数量 +1
// 随机生肖卡序号@StaterandomIndex: number = -1Button('立即抽卡').onClick(() => {// 随机生肖卡 0-5this.randomIndex = Math.floor(Math.random() * 6)})
Column({space: 30}) {// 使用生成的随机数筛选生肖卡Image($r(`app.media.img_0${this.randomIndex}`))Button('开心收下').onClick(() => {// 收下卡片更新对象数组 -- 替换初始界面图片url和角标数字this.images[this.randomIndex] = {url: `app.media.img_0${this.randomIndex}`,num: this.images[this.randomIndex].num += 1}})
}

4.5. 中奖结果

6张卡片数量均>=1,则可以抽奖一次(显示抽奖页面:奖品随机)

 4.5.1. 抽奖静态页面

// 抽奖页面-遮罩层
Column({space: 50}) {Text('恭喜获得手机一部').fontColor('#F5EBCF').fontSize(25).fontWeight(600)Image($r('app.media.hw')).width(300)Button('再来一次').width(200).height(50).backgroundColor(Color.Transparent).border({width: 2, color: '#FFF9E0'})
}
.width('100%').height('100%').backgroundColor('rgba(0,0,0,0.8)').justifyContent(FlexAlign.Center).position({x: 0, y: 0})
4.5.2. 条件渲染-抽卡与抽奖页面

集齐6种生肖卡显示抽奖页面,否则显示抽卡页面

// 是否中奖状态@StateisGet: boolean = false// 三. 抽奖中奖界面
if (this.isGet) {Column({space: 50}) {}
}
4.5.3. 抽奖数据处理

判断是否可以抽奖:定义count变量保存已经获得的卡片种类数量(如果每个生肖卡数量>=1,则count+1)

如果count == 6,说明已经得到了6种卡,则可以抽奖,渲染抽中的奖品图片

思路分析:

声明一个变量 保存 中奖的结果 、声明一个变量保存中奖的名称

  1. 声明一个变量保存 获得卡片的种类
  2. 遍历数组, 如果卡片的个数 大于 等于1 获得种类加 1 否则 肯定没有中奖 跳出循环
  3. 判断种类是否有 6 种
    1. 如果等于 6 说明已经集够卡片 中奖结果改为 true
    2. 罗列所有的奖品名称
    3. 获取随机下标 0 -- 2
    4. 获取随机名称
// 奖品状态@StatejiangPin: string = ''// 抽奖页面-遮罩层
Column({space: 50}) {Text('恭喜获得手机一部')Image($r(`app.media.${this.prize}`))Button('再来一次')
}Button('开心收下').onClick(() => {// 判断是否可以抽奖:定义count变量保存已经获得的卡片种类数量(如果每个生肖卡数量>=1,则count+1)// 如果count == 6,说明已经得到了6种卡,则可以抽奖// 判断是否中奖let count: number = 0for (const item of this.images) {if (item.num >= 1) {count += 1} else {break}}if (count == 6) {this.isGet = true}// 随机奖品const arr: string[] = ['hw', 'xm', 'pg']let randomNum: number = Math.floor(Math.random() * 3)this.jiangPin = arr[randomNum]})

4.6. 再次抽奖

单击“再来一次”按钮,重新抽卡

  1. 关闭遮罩层:中奖状态为 false
  2. 初始化列表数据
Button('再来一次').onClick(() => {this.isGet = falsethis.images = [{url: 'app.media.bg_00', num: 0},{url: 'app.media.bg_01', num: 0},{url: 'app.media.bg_02', num: 0},{url: 'app.media.bg_03', num: 0},{url: 'app.media.bg_04', num: 0},{url: 'app.media.bg_05', num: 0}]})

案例代码:【免费】HarmonyOs应用基础-ArkTS-核心-基础-抽奖案例代码资源-CSDN文库

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

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

相关文章

通信工程学习:什么是GSMP通用交换机管理协议

GSMP:通用交换机管理协议 GSMP(General Switch Management Protocol,通用交换机管理协议)是一种用于IP交换机对ATM交换机进行控制的协议。以下是对GSMP的详细解释: 一、定义与概述 GSMP是一种异步协议,它在…

在国产芯片上实现YOLOv5/v8图像AI识别-【4.4】RK3588网络摄像头推理后推流到RTSP更多内容见视频

本专栏主要是提供一种国产化图像识别的解决方案,专栏中实现了YOLOv5/v8在国产化芯片上的使用部署,并可以实现网页端实时查看。根据自己的具体需求可以直接产品化部署使用。 B站配套视频:https://www.bilibili.com/video/BV1or421T74f 前言…

【论文阅读】01-Survey on Temporal Knowledge Graph

原文名称:Survey on Temporal Knowledge Graph 1 Introduction 目前有两种方法:基于距离模型的嵌入变换方法和基于语义匹配模型的双线性模型。它们的思想都是将包含实体和关系的知识图谱嵌入到连续的低纬度实向量空间中 时间知识图的推理有两种,第一种是…

斐纳切数列考试题

计算机二级考试有一道题 result [] a,b0,1 while a<100:print(a,end,) a, b b, ab # 0,1,1,2,3,5,8,13,21,34,55,89,

python爬虫代理ip池搭建

最近大量爬取数据的时候总会遇到被封ip的情况&#xff0c;所有打算自己搭建一个代理ip池来使用。本次使用的是开源的ip代理池项目ProxyPool 1.下载redis数据库 redis安装 这里我选择直接下载redis的解压包形式&#xff0c;方便安装。下载地址&#xff1a;发布 TPORADOWSKI/RED…

SCAU算法竞赛入门指北

首先&#xff0c;还是欢迎各位小朋友来到华南农业大学&#xff0c;虽然不是什么ACM强校&#xff0c;但是姑且还是有这么个校队存在的。本文的主要目的是给各位OI✌️介绍下acm和oi的区别&#xff0c;给各位纯萌新介绍下你需要做什么&#xff0c;以及进校队的时间线。 ACM是什么…

UE4_后期处理_后期处理材质及后期处理体积二

效果&#xff1a; 步骤&#xff1a; 1、创建后期处理材质,并设置参数。 2、回到主界面&#xff0c;找到需要发光的物体的细节面板。 渲染自定义深度通道&#xff0c;默认自定义深度模具值为10&#xff08;需要修改此值&#xff0c;此值影响物体的亮度&#xff09;。 3、添加…

JVM系列(六) -对象的创建过程

一、摘要 在之前的文章中,我们介绍了类加载的过程和 JVM 内存布局相关的知识。本篇我们综合之前的知识,结合代码一起推演一下对象的真实创建过程,以及对象创建完成之后在 JVM 中是如何保存的。 二、对象的创建 在 Java 中,创建对象的方式有很多种,比如最常见的通过new …

Spring 循环依赖原理及解决方案

一、什么是循环依赖 循环依赖指的是一个实例或多个实例存在相互依赖的关系&#xff08;类之间循环嵌套引用&#xff09;。 举例&#xff1a; Component public class AService {// A中注入了BAutowiredprivate BService bService; }Component public class BService {// B中也…

ActiveMQ 的网络连接及消息回流机制

1、ActiveMQ 的网络连接 activeMQ 如果要实现扩展性和高可用性的要求的话&#xff0c;就需要用用到网络连接模式。 NetworkConnector&#xff1a;主要用来配置 broker 与 broker 之间的通信连接 如上图所示&#xff0c;MQ 服务器1 和MQ 服务器2 通过 NewworkConnector 相连&…

前端月中总结

1、领导一拍脑门想要一个内部聊天软件 --基于open IM二次开发 背景 前段时间不是接手了一个内部办公软件的项目嘛&#xff0c;这个项目已经写了三四年了&#xff0c;一代代的前端融合了不知到多少种代码风格&#xff0c;再加上最初搭这个项目架子的人不知道咋想的&#xff0c…

操作系统 ---- 进程的概念、组成、特征

学习路线&#xff1a; 一、进程的概念及组成 我们通过一个例子来说明进程的概念以及程序和进程的区别。 我们在Windows操作系统中打开任务管理器&#xff0c;在任务管理器当中能看到此时系统当中运行的进程有哪些&#xff0c;如下图所示&#xff1a; 此时&#…

H5漂流瓶社交系统源码

一个非常有创意的H5漂流瓶社交系统源码&#xff0c;带完整前端h5和后台管理系统。 环境&#xff1a;Nginx 1.20.1-MySQL 5.6.50-PHP-7.3 代码下载

一家电子信息企业终止,前五大客户收入占比超九成,募资合理性存疑

兴天科技终止原因如下&#xff1a;首先&#xff0c;兴天科技前五大客户收入占比约超九成&#xff0c;客户集中度较高且高于行业平均水平&#xff0c;其中近期来自第一大客户收入占比超七成&#xff0c;单一客户依赖程度进一步上升&#xff1b;其次&#xff0c;兴天科技除第一大…

ffmpeg的安装和使用教程及案例

FFmpeg的安装与使用教程 一、FFmpeg简介 FFmpeg是一个开源的、跨平台的音视频处理工具&#xff0c;可以用来转换、播放、录制、流化音视频数据&#xff0c;以及进行多种音视频编码和解码。 二、安装FFmpeg 1. Windows系统安装 下载预编译的二进制文件&#xff1a;从FFmpeg…

云原生学习交流

欢迎加入技术交流群&#xff0c;与阿里、腾讯、字节、华为等运维大佬面对面交流和互相学习。 请扫码备注 加群&#xff0c;<城市>-<公司/自由职业>-<昵称>&#xff0c;如“加群&#xff0c;广州-阿里-行则”&#xff1a;

LabVIEW灵活集成与调试的方法

在LabVIEW开发中&#xff0c;为了构建一个既便于调试又能灵活集成到主VI中的控制VI&#xff0c;开发者需要采用适当的编程方式和架构。常见的选择包括模块化设计、状态机架构以及事件驱动编程。这些方法有助于简化调试过程、提高系统的稳定性&#xff0c;并确保代码的重用性和可…

分布式事务Seata原理及其项目使用

0.Seata官方文档 1.Seata概念及原理 Seata是什么 Seata 是一款开源的分布式事务解决方案&#xff0c;致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式&#xff0c;为用户打造一站式的分布式解决方案。 Seata主要由三个重要组…

JAVA基础:值传递和址传递

1 值传递和址传递 值传递 方法调用时&#xff0c;传递的实参是一个基本类型的数据 形参改变&#xff0c;实参不变 public static void doSum(int num1,int num2){} main(){doSum(10,20);int i 10 ;int j 20 ;doSum(i,j) ; } public static void t1(int num){num 20 ;Sys…

[数据集][目标检测]街头摊贩识别检测数据集VOC+YOLO格式758张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;758 标注数量(xml文件个数)&#xff1a;758 标注数量(txt文件个数)&#xff1a;758 标注类别…