当前位置: 首页 > news >正文

鸿蒙移动应用开发--渲染控制实验

任务使用“对象数组”、“ForEach渲染”、“Badge角标组件”、“Grid布局”等相关知识,实现生效抽奖卡案例。如图1所示:

图1 生肖抽奖卡实例图 

图1(a)中有6张生肖卡可以抽奖,每抽中一张,会通过弹层显示出来(图(b)),每抽中一张,图片的右上角数量增加1,若6张卡片均抽中了(每种卡片至少有一张),就可以抽更大的奖,包括华为、苹果以及小米三种不同的手机,如图1(c)。也可实现支付宝集五福案例,功能相似即可。

参考资料:68-【阶段综合】-生肖抽卡-Badge角标组件_哔哩哔哩_bilibili

实验过程:

        首先,定义了一个接口`Images`,用于描述每张生肖卡的数据结构,包含图片的URL和数量(`count`)。接着,基于这个接口准备了初始数据,即6张生肖卡,每张卡的初始数量为0。

        在页面布局方面,使用了`Stack`层叠布局来实现页面的多层显示。最底层是一个`Column`布局,其中包含了一个`Grid`布局用于展示生肖卡。通过`ForEach`方法,将每张生肖卡的数据绑定到`GridItem`中,并使用`Badge`组件在每张卡的右上角显示其数量。此外,还添加了一个“立即抽卡”按钮,用于触发抽卡操作。

        当点击“立即抽卡”按钮时,会触发一系列的动画效果和逻辑处理。首先,设置遮罩层的透明度、层级和缩放比例,使抽卡页面显示出来。然后,通过`Math.random()`方法生成一个随机数,表示抽中的生肖卡序号。接着,将抽中的生肖卡以放大的形式显示在抽卡页面上,并提供一个“开心收下”按钮。

        点击“开心收下”按钮后,将遮罩层的透明度和层级恢复到初始状态,并将抽中的生肖卡数量加1。同时,检查是否所有生肖卡的数量都大于0,如果是,则表示集齐了所有生肖卡,可以进入中奖页面。在中奖页面中,会随机选择一个奖品(华为、苹果或小米手机),并显示相应的图片和“再来一次”按钮。点击“再来一次”按钮后,将所有生肖卡的数量重置为0,重新开始抽奖过程。

        在整个实验过程中,通过合理使用`State`变量来控制页面的状态变化,以及利用`ForEach`和`Badge`组件实现了动态的数据绑定和显示效果。同时,通过`Grid`布局实现了生肖卡的规则排列,使得页面布局更加美观和清晰。

源代码:

// 1.定义接口
interface Images{url:stringcount:number
}// 需求1:遮罩层显隐 透明度opacity 0-1 层级zInsex 1-99
// 需求2:图片收缩 缩放scale 0-1
@Entry
@Component
struct Index {// 随机的生肖卡序号@State randomNum:number=-1// 初始值为-1表示还没有抽卡// 2.基于接口准备数据@State images:Images[]=[{url:'app.media.bg_00',count:0},{url:'app.media.bg_01',count:0},{url:'app.media.bg_02',count:0},{url:'app.media.bg_03',count:0},{url:'app.media.bg_04',count:0},{url:'app.media.bg_05',count:0}]// 透明度@State transparent:number=0 // 初始为0//层级@State Level:number=0 // 初始为0// 缩放@State zoomx:number=0@State zoomy:number=0// 控制中奖@State isGet:boolean=false// 奖池@State arr:string[]=['pg','hw','xm']@State price:string=''//默认没有中奖build() {// 层叠布局Stack(){// 初始化页面Column(){// Grid布局的基础使用:规则的行列布局中非常常见Grid(){ForEach(this.images,(item:Images,index:number)=>{GridItem(){Badge({count:item.count,position:BadgePosition.RightTop,style:{fontSize:14,badgeSize:20,badgeColor:Color.Red}}){Image($r(item.url)).width(100).height(100)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({top:100})Button('立即抽卡').width(200).backgroundColor('#de668d').margin({top:50}).onClick(()=>{this.Level=99this.transparent=1this.zoomx=1this.zoomy=1//计算随机数this.randomNum = Math.floor(Math.random()*6)})}.zIndex(5) // 初始化层级为5.width('100%').height('100%')// 抽卡时的页面Column({space:25}){Text('获得生肖卡片').fontColor('#f5ebcf').fontSize(25).fontWeight(FontWeight.Bold)Image($r(`app.media.img_0${this.randomNum}`)).width(200)// 卡片的播放.scale({x:this.zoomx,y:this.zoomy}).animation({duration:500})Button('开心收下').width(200).height(50).backgroundColor(Color.Transparent)// 透明色.border({width:2,color:'#fff9e0'}).onClick(()=>{this.transparent=0this.Level=0this.zoomx=0this.zoomy=0// 开心收下this.images[this.randomNum]={url:`app.media.img_0${this.randomNum}`,count:this.images[this.randomNum].count+1}// 判断卡片的数量// 如果卡片中有一个的数量为0,那就是没集齐let flag:boolean=truefor(let item of this.images){if(item.count==0){flag=falsebreak}}this.isGet=flagif(flag){let randomIndex:number=Math.floor(Math.random()*3)this.price=this.arr[randomIndex]}})}.justifyContent(FlexAlign.Center)// 居中对齐.width('100%').height('100%').backgroundColor('#cc000000').zIndex(this.Level).opacity(this.transparent)// 透明度// 动画.animation({duration:200})if(this.isGet){// 中奖页面Column(){Text('恭喜获得手机一部').fontColor('#f5ebcf').fontSize(25).fontWeight(700)Image($r(`app.media.${this.price}`)).width(300)Button('再来一次').width(200).height(50).backgroundColor(Color.Transparent).border({width:2,color:'#fff9e0'}).onClick(()=>{this.isGet=falsethis.price=''this.images=[j{url:'app.media.img_00',count:0},{url:'app.media.img_01',count:0},{url:'app.media.img_02',count:0},{url:'app.media.img_03',count:0},{url:'app.media.img_04',count:0},{url:'app.media.img_05',count:0}]})}.zIndex(10).width('100%').height('100%').justifyContent(FlexAlign.Center).backgroundColor('#cc000000')}}}
}

 运行截图:

相关文章:

鸿蒙移动应用开发--渲染控制实验

任务:使用“对象数组”、“ForEach渲染”、“Badge角标组件”、“Grid布局”等相关知识,实现生效抽奖卡案例。如图1所示: 图1 生肖抽奖卡实例图 图1(a)中有6张生肖卡可以抽奖,每抽中一张,会通过弹层显示出来&#xf…...

【漫话机器学习系列】215.处理高度不平衡数据策略(Strategies For Highly Imbalanced Classes)

处理高度不平衡数据的四大策略详解 在机器学习与数据挖掘任务中,“类别不平衡”问题几乎无处不在。无论是信用卡欺诈检测、医疗异常诊断,还是网络攻击识别,正负样本的比例往往严重失衡。比如一个欺诈检测数据集中,可能只有不到 1…...

在离线 Ubuntu 环境下部署双 Neo4j 实例(Prod Dev)

在许多开发和生产场景中,我们可能需要在同一台服务器上运行多个独立的 Neo4j 数据库实例,例如一个用于生产环境 (Prod),一个用于开发测试环境 (Dev)。本文将详细介绍如何在 离线 的 Ubuntu 服务器上,使用 tar.gz 包部署两个 Neo4j…...

Windows下Golang与Nuxt项目宝塔部署指南

在Windows下将Golang后端和Nuxt前端项目打包,并使用宝塔面板部署的步骤如下 一、Golang后端打包 交叉编译为Linux可执行文件 在Windows PowerShell中执行: powershell复制下载 $env:GOOS "linux" $env:GOARCH "amd64" go build…...

基于贝叶斯优化的Transformer多输入单输出回归预测模型Bayes-Transformer【MATLAB】

Bayes-Transformer 在机器学习和深度学习领域,Transformer模型已经广泛应用于自然语言处理、图像识别、时间序列预测等多个领域。然而,在一些实际应用中,我们面临着如何高效地优化模型超参数的问题。贝叶斯优化(Bayesian Optimiz…...

ibus输入法微软词库分享

链接: https://pan.baidu.com/s/1aC-UvV-UDHEpxg5sZcAS2Q?pwddxpq 提取码: dxpq --来自百度网盘超级会员v8的分享 链接: https://pan.baidu.com/s/1aC-UvV-UDHEpxg5sZcAS2Q?pwddxpq 提取码: dxpq --来自百度网盘超级会员v8的分享 # 更改ibus输入法字体大小 sudo apt insta…...

Sharding-JDBC 系列专题 - 第五篇:分布式事务

Sharding-JDBC 系列专题 - 第五篇:分布式事务 本系列专题旨在帮助开发者全面掌握 Sharding-JDBC,一个轻量级的分布式数据库中间件。本篇作为系列的第五篇文章,将深入探讨 分布式事务(Distributed Transactions),包括其概念、支持的事务类型、配置方法、工作原理以及实战…...

力扣每日打卡17 49. 字母异位词分组 (中等)

力扣 49. 字母异位词分组 中等 前言一、题目内容二、解题方法1. 哈希函数2.官方题解2.1 前言2.2 方法一:排序2.2 方法二:计数 前言 这是刷算法题的第十七天,用到的语言是JS 题目:力扣 49. 字母异位词分组 (中等) 一、题目内容 给…...

深入解析C++ STL List:双向链表的特性与高级操作

一、引言 在C STL容器家族中,list作为双向链表容器,具有独特的性能特征。本文将通过完整代码示例,深入剖析链表的核心操作,揭示其底层实现机制,并对比其他容器的适用场景。文章包含4000余字详细解析,适合需…...

在 master 分支上进行了 commit 但还没有 push,怎么安全地切到新分支并保留这些更改

确保你的 commit 确实没有 push(否则会覆盖远程分支): git log --oneline # 查看本地 commit git log --oneline origin/master # 查看远程 master 的 commit 确保你的 commit 只存在于本地,远程 origin/master 没有…...

spark jar依赖顺序

1. 执行顺序 spark-submit --config "spark.{driver/executor}.extraClassPathsomeJar"提交的依赖包SystemClasspath – Spark安装时候提供的依赖包spark-submit --jars 提交的依赖包 2. 依赖解释 提交任务时指定的依赖 Spark-submit --config "spark.{drive…...

docker 国内源和常用命令

Ubuntu | Docker Docs 参考docker官方安装docker # Add Dockers official GPG key: sudo apt-get update sudo apt-get install ca-certificates curl sudo install -m 0755 -d /etc/apt/keyrings sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt…...

【目标检测】对YOLO系列发展的简单理解

目录 1.YOLOv12.YOLOv23.YOLOv34.YOLOv45.YOLOv66.YOLOv77.YOLOv9 YOLO系列文章汇总: 【论文#目标检测】You Only Look Once: Unified, Real-Time Object Detection 【论文#目标检测】YOLO9000: Better, Faster, Stronger 【论文#目标检测】YOLOv3: An Incremental …...

C# AppContext.BaseDirectory 应用程序的启动目录

Application.StartupPath定义与用途局限性示例 Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location)定义与用途局限性示例 Directory.GetCurrentDirectory()定义与用途局限性示例 关键区别总结推荐使用场景需要应用程序安装目录需要动态工作目录插件或模块化应用…...

Sentinel数据S2_SR_HARMONIZED连续云掩膜+中位数合成

在GEE中实现时,发现简单的QA60是无法去云的,最近S2地表反射率数据集又进行了更新,原有的属性集也进行了变化,现在的SR数据集名称是“S2_SR_HARMONIZED”。那么: 要想得到研究区无云的图像,可以参考执行以下…...

探索Cangjie Magic:仓颉编程语言原生的LLM Agent开发新范式

引言:智能体开发的革命性突破 2025年3月,仓颉社区开源了Cangjie Magic——这是首个基于仓颉编程语言原生构建的LLM Agent开发平台,标志着智能体开发领域的一次重大突破。作为一名长期关注AI发展的技术爱好者,我有幸第一时间体验了…...

css三大特性

css三大特性:层叠性 继承性 优先性 一.层叠性 二.继承性 子标签会继承父标签的某些样式 恰当地使用继承性,减少代码复杂性子元素会继承父元素地某些样式(text-,font-,line-这些元素开头的可以继承,以及color属性) 2…...

Centos7安装Jenkins(图文教程)

本章教程,主要记录在centos7安装部署Jenkins 的详细过程。 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) 一、基础环境安装 内存大小要求:256 MB 内存以上 硬盘大小要求:10 GB 及以上 安装基础java环境:Java 17 ( JRE 或者 JDK 都可…...

Hyper-V 管理工具

什么是 Hyper-V Microsoft Hyper-V是一个虚拟化平台,可在Windows客户端和服务器上创建并运行虚拟计算机。操作系统(OS)被称为“监管程序”(supervisor),因为它负责为程序分配物理资源。在虚拟环境中&#…...

小雨滴的奇妙旅行

以下是基于原稿的优化版本,在保留童趣的基础上,进一步贴近5岁孩子的语言习惯和表演需求。修改处用(优化)标注,供参考: 《小雨滴的奇妙旅行》(优化标题,更易记忆) “滴答…...

极狐GitLab 权限和角色如何设置?

极狐GitLab 是 GitLab 在中国的发行版,关于中文参考文档和资料有: 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 权限和角色 (BASIC ALL) 将用户添加到项目或群组时,您可以为他们分配角色。该角色决定他们在极狐GitLab 中可以执…...

NLP高频面试题(五十一)——LSTM详解

长短期记忆网络(LSTM)相较于传统循环神经网络(RNN)的核心改进在于通过引入记忆单元(cell state)和门机制(gating mechanism)来有效缓解梯度消失与梯度爆炸问题,从而更好地捕捉长距离依赖关系 。在其网络结构中,信息通过输入门(input gate)、遗忘门(forget gate)和…...

C++学习之游戏服务器开发十二nginx和http

目录 1.容器运行游戏需求分析 2.静态编译游戏服务 3.手动创建游戏镜像 4.编写游戏启动脚本 5.脚本创建游戏服务器镜像 6.登录服务器架构选择 7.http协议初识 8.http报文分析 9.nginx简介和安装 10.nginx配置静态页面 11.nginx配置反向代理 1.容器运行游戏需求分析 2.…...

Spark集群搭建-spark-local

(一)安装Spark 安装Spark的过程就是下载和解压的过程。接下来的操作,我们把它上传到集群中的节点,并解压运行。 1.启动虚拟机 2.通过finalshell连接虚拟机,并上传安装文件到 /opt/software下 3.解压spark安装文件到/op…...

突破 RAG 检索瓶颈:Trae+MCP 构建高精度知识库检索系统实践

一、引言:RAG 技术的落地困境与破局思路 在企业级 AI 应用中,基于检索增强生成(RAG)的知识库系统已成为构建智能问答、文档分析的核心方案。然而随着实践深入,从业者逐渐发现传统 RAG 架构存在三大典型痛点&#xff1…...

PyQt5、NumPy、Pandas 及 ModelArts 综合笔记

PyQt5、NumPy、Pandas 及 ModelArts 综合笔记 PyQt5 GUI 开发 信号与槽 概念:对象间解耦通信机制。 信号:对象状态改变时发射,例如 btn.clicked。槽:接收信号的普通函数或方法。 连接:signal.connect(slot)&#xff…...

TM2SP-Net阅读

TCSVT 2025 创新点 结合图像显著性和视频时空特征进行视频显著性预测。 提出一个多尺度时空特征金字塔(MLSTFPN),能够更好的融合不同级别的特征,解决了显著性检测在多尺度时空特征表示的不足。 对比MLSTFPN和普通的FPN和BiFPN的区别。 Pipeline 时空语义信息和图…...

C++ 拷贝构造函数 浅拷贝 深拷贝

C 的拷贝构造函数(Copy Constructor)是一种特殊的构造函数,用于通过已有对象初始化新创建的对象。它在对象复制场景中起关键作用,尤其在涉及动态内存管理时需特别注意深浅拷贝问题。 一、定义与语法​​ 拷贝构造函数的​​参数…...

Linux系统用户迁移到其它盘方法

步骤 1:创建脚本文件 使用文本编辑器(如 nano 或 vim)创建脚本文件,例如 migrate_users.sh: sudo nano /root/migrate_users.sh 脚本代码如下: #!/bin/bash # 迁移用户主目录到 /mnt/sdb1 的批量脚本# 用…...

NDSS 2025|侧信道与可信计算攻击技术导读(二)系统化评估新旧缓存侧信道攻击技术

本文为 NDSS 2025 导读系列 之一,聚焦本届会议中与 硬件安全与侧信道技术 相关的代表性论文。 NDSS(Network and Distributed System Security Symposium) 是网络与系统安全领域的顶级国际会议之一,由 Internet Society 主办&…...

Kafka 面试,java实战贴

面试问题列表 Kafka的ISR机制是什么?如何保证数据一致性? 如何实现Kafka的Exactly-Once语义? Kafka的Rebalance机制可能引发什么问题?如何优化? Kafka的Topic分区数如何合理设置? 如何设计Kafka的高可用跨…...

第十五届蓝桥杯 2024 C/C++组 下一次相遇

目录 题目: 题目描述: 题目链接: 思路: 自己的思路详解: 更好的思路详解: 代码: 自己的思路代码详解: 更好的思路代码详解: 题目: 题目描述&#xf…...

2024年全国青少年信息素养大赛-算法创意实践C++ 华中赛区(初赛真题)

完整的试卷可点击下方去查看,可在线考试,在线答题,在线编程: 2024年全国青少年信息素养大赛-算法创意实践C 华中赛区(初赛)_c_少儿编程题库学习中心-嗨信奥https://www.hixinao.com/tidan/cpp/show-96.htm…...

“思考更长时间”而非“模型更大”是提升模型在复杂软件工程任务中表现的有效途径 | 学术研究系列

作者:明巍/临城/水德 还在为部署动辄数百 GB 显存的庞大模型而烦恼吗?还在担心私有代码库的安全和成本问题吗?通义灵码团队最新研究《Thinking Longer, Not Larger: Enhancing Software Engineering Agents via Scaling Test-Time Compute》…...

测试OMS(订单管理系统)时,对Elasticsearch(ES)数据和算法数据进行测试(如何测试几百万条数据)

1. 测试目标 在测试OMS中的ES数据和算法数据时,主要目标包括: 数据完整性 数据完整性:确保所有需要的数据都被正确采集、存储和索引。 数据准确性:确保数据内容正确无误,符合业务逻辑。 性能:确保系统在处…...

Java中链表的深入了解及实现

一、链表 1.链表的概念 1.1链表是⼀种物理存储结构上⾮连续存储结构,数据元素的逻辑顺序是通过链表中的引⽤链接次序实现的 实际中链表的结构⾮常多样,以下情况组合起来就有8种链表结构: 2.链表的实现 1.⽆头单向⾮循环链表实现 链表中的…...

继承相关知识

概念 定义类时,代码中有共性的成员,还有自己的属性,使用继承可以减少重复的代码, 继承的语法 class 子类:继承方式 父类 继承方式有:public,private,protected 公共继承&#x…...

《开源大模型选型全攻略:开启智能应用新征程》

《开源大模型选型全攻略:开启智能应用新征程》 在当今数字化浪潮中,人工智能的发展可谓日新月异,而开源大模型作为其中的关键驱动力,正以惊人的速度改变着各个领域的面貌。从智能客服高效解答客户疑问,到智能写作助力创作者灵感迸发,开源大模型展现出了强大的应用潜力。…...

PyTorch DDP 跨节点通信的底层机制

我们已经知道 torch.nn.parallel.DistributedDataParallel (DDP) 是 PyTorch 中实现高性能分布式训练的利器,它通过高效的梯度同步机制,让多个 GPU 甚至多台机器协同工作,大大加速模型训练。 当我们的训练扩展到多个节点(不同的物…...

Prompt工程:大模型的「精准导航系统」

在Elasticsearch中,DSL通过精确的查询语法帮助开发者从海量数据中定位目标文档;而在大模型应用中,Prompt就是用户的「意图导航仪」,通过结构化的语言模板引导模型生成符合业务需求的答案。两者的核心逻辑相似——通过精准的指令设…...

25.4.22华为--算法真题整理(2025年4月22日)

120.三角形最小路径和(120.三角形最小路径和) 题目分析: 给定一个三角形,用二维列表triangle表示,现在约定:自顶向下移动,每一步只能移动到下一行中相邻的节点上,即当前行的下标为…...

C语言高频面试题——指针函数和函数指针的区别

在 C 语言中,指针函数 和 函数指针 是两个容易混淆的概念,但它们的功能和用途完全不同。以下是详细的对比分析,帮助你彻底理解它们的区别。 1. 指针函数(Function Returning a Pointer) 定义 指针函数 是一个返回值为…...

MQTTClient_message 源码深度解析与架构设计

一、结构体内存布局与版本控制机制 #mermaid-svg-i9W8883mELYm6HUj {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-i9W8883mELYm6HUj .error-icon{fill:#552222;}#mermaid-svg-i9W8883mELYm6HUj .error-text{fill:#…...

4.21—4.22学习总结 JavaWeb:HTML-CSS

Web:能够通过浏览器访问到的网站。 Web标准: HTML: vscode中进行注释的快捷键为ctrl斜线/ h1的字体最大,依次递减,只存在h1—h6。 超链接: 设置字体颜色: 方式三写一个css文件,将方…...

STM32的定时器输出PWM时,死区时间(DTR)如何计算

在 STM32F429(以及所有 STM32F4 “高级定时器”)中,死区时间由 TIMx_BDTR 寄存器的 8 位 “Dead‑Time Generator” 字段 DTG[7:0] 来配置。其计算分三步: 计算死区时钟周期 tDTS TIM1 时钟源为 APB2 定时器时钟(PCL…...

4.LinkedList的模拟实现:

LinkedList的底层是一个不带头的双向链表。 不带头双向链表中的每一个节点有三个域:值域,上一个节点的域,下一个节点的域。 不带头双向链表的实现: public class Mylinkdelist{//定义一个内部类(节点)stat…...

使用PyTorch构建神经网络笔记

专有名词 Batch Size 在深度学习中,批大小(Batch Size) 是指每次前向传播和反向传播时使用的样本数量。它是训练神经网络时的一个关键超参数,直接影响训练速度、内存占用和模型性能。 (1) 计算梯度 在训练时,模型通过…...

麒麟系统网络连接问题排查

麒麟系统网络连接有红色叹号,不能上外网 了。 首先执行 ping -c4 8.8.8.8 和 nc -zv 8.8.8.8 53,如果 都能正常通信,说明你的网络可以访问公共 DNS 服务器(如 Google DNS 8.8.8.8),但域名解析仍然失败,可能是 DNS 解析配置问题 或 系统 DNS 缓存/代理干扰。以下是进一步…...

python高级特性01

装饰器 基本语法 在不改变原函数的基础上,新增/修改一些功能 在被装饰函数/类前使用:decorator_name 装饰器接收一个函数返回一个新函数 def decorator_name(func):# 装饰器的操作...def wrapper(*args, **kwargs):# 前置操作...result func()# 后置…...

shared_ptr八股收集 C++

(1)、具体讲一下shared_ptr自动管理内存的原理/引用计数的具体原理/shared_ptr引用计数什么时候会增加,什么时候会减少? 在shared_ptr的内部维护了⼀个计数器,来跟踪有多少个shared_ptr对象指向了某⼀个资源。当计数器…...