三小时使用鸿蒙OS模仿羊了个羊,附源码

学习鸿蒙arkTS语言,决定直接通过实践的方式上手,而不是一点点进行观看视频再来实现。
结合羊了个羊的开发思路,准备好相应的卡片素材后进行开发。遇到了需要arkTS进行解决的问题,再去查看相应的文档。

  1. 首先需要准备卡片对应的图片,而且这是可以复用的,自然就需要将图片存储在集合里,正好根据集合相应的索引下标,能够使用random来获得随机的图片。通过这一步,学习了使用Resource,以及知道了图片需要放在resource/base文件夹下。这里有个小插曲,一开始我使用生成变量的方式来获取图片:let s = app.media. + 随机数; 然后使用$r(s),发现是不行的,知道了Resource是编译阶段生成的,不过我在Image组件里面也使用变量的方式,也是不行的
// 可点击的卡片列表public static cardImageArray: Array<Resource> = new Array($r('app.media.0'),$r('app.media.1'),$r('app.media.2'),$r('app.media.3'),$r('app.media.4'),$r('app.media.5'),$r('app.media.6'),$r('app.media.7'),$r('app.media.8'));
  1. 其次开始构建卡片,需要在初始化的时候构建,这样就知道了组件/页面的生命周期
  2. 在初始化阶段构造好卡片列表后,需要进行展示,这需要了解for循环进行渲染,这就会使用ForEach了,不过到了后面的阶段,才知道ForEach有一个坑,就是会进行去重操作
  3. 一开始我渲染卡片,使用的是长方形的UI,还没使用上一开始准备的图片,所以使用到了自定义组件,在组件里生成每一个卡片。还能够加上onClick方法,这样就能够很好地处理点击事件。
  4. 下一个问题就是值的变化,和组件之间值变化的处理,学习了@State、@Prop、@Link的用法,并且进行了实践。

由于没有更多时间进行完善,最终效果如下:
在这里插入图片描述
源码地址奉上,若是觉得可以记得点个星星:https://github.com/myloverwdm/YLGY-HM-Next

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

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

相关文章

什么是JAVA面向对象

一&#xff0c;什么是面向对象&#xff1a; 我们以前的项目都是面向过程的&#xff0c;一个完整的项目所有的代码都写在一个类里 这就叫面向过程。 面向对象&#xff0c;是指在写大型项目时&#xff0c;多人分工合作&#xff0c;为了代码看上去简洁美观&#xff0c;会将不同的…

2023-2024年科技行业主要变化趋势梳理与总结

一、主要大额并购案例并购原因 &#xff08;一&#xff09;产品线补充与业务市场拓展&#xff08;如VMware、Activision Blizzard并购案&#xff09; &#xff08;二&#xff09;技术整合&#xff08;如Spunk并购案&#xff09;、 &#xff08;三&#xff09;优化运营以期溢…

MFC:手写一个模态对话框程序

我们知道&#xff0c;在MFC中&#xff0c;要生成一个模态对话框程序&#xff0c;只要按着VS的提示&#xff0c;拖拖拽拽就能生成一个这样的程序&#xff0c;效率非常高。这里&#xff0c;我们反其道而行之&#xff0c;自己写一个这样的程序&#xff0c;这个程序与自动生成的程序…

机器学习和深度学习 --李宏毅(笔记与个人理解)Day 18

Day 18 Spatial Transformer Layer 因为单纯的cNN无法做到scaling&#xff08;放大&#xff09;and rotation&#xff08;转&#xff09;&#xff0c;所以我们引入&#xff1b; 实战中也许我们可以做到 是因为 我们的training data 中包含了对data 的augmentation&#xff1b; …

设计模式——外观(门面)模式10

外观模式&#xff1a;能为系统框架或其他复杂业务流程封装提供一个简单的接口。 例如抽奖过程中 设计模式&#xff0c;一定要敲代码理解 调用1&#xff08;抽奖系统&#xff09; /*** author ggbond* date 2024年04月08日 10:34*/ public class Lottery {public String getId…

帝国cms仿《鳄鱼下载站》网站源码

仿《鳄鱼下载站》网站源码手机安卓软件网站模版 PHP网站源码 帝国cms内核 采用帝国cms7.5 环境PHPmysql 恢复数据库后如何修改密码: 双击表&#xff0c;进入对应的详细数据表&#xff0c;然后找到&#xff1a;www_96kaifa_com_enewsuser这个表&#xff0c;双击打开修改&…

python画神经网络图

代码1(画神经网络连接图&#xff09; from math import cos, sin, atan import matplotlib.pyplot as plt # 注意这里并没有用到这个networkx这个库&#xff0c;完全是根据matploblib这个库来画的。 class Neuron():def __init__(self, x, y,radius,nameNone):self.x xself.y …

Substance 3D2024版 下载地址及安装教程

Substance 3D是Adobe公司推出的一套全面的3D设计和创作工具集合&#xff0c;用于创建高质量的3D资产、纹理和材质。 Substance 3D包括多个功能强大的软件和服务&#xff0c;如Substance 3D Painter、Substance 3D Designer和Substance 3D Sampler等。这些工具提供了广泛的功能…

智过网:注册安全工程师注册有效期与周期解析

在职业领域&#xff0c;各种专业资格认证不仅是对从业者专业能力的认可&#xff0c;也是保障行业安全、规范发展的重要手段。其中&#xff0c;注册安全工程师证书在安全生产领域具有举足轻重的地位。那么&#xff0c;注册安全工程师的注册有效期是多久呢&#xff1f;又是几年一…

数据可视化的3D问题

三维对象非常流行&#xff0c;但在大多数情况下会对解释图形的准确性和速度产生负面影响。 以下是对涉及 3d 的主要图形类型的回顾&#xff0c;并讨论了它们是否被认为是不好的做法。 1、3D 条形图&#xff1a;不要 这是一个 3d 条形图。 你可能很熟悉这种图形&#xff0c;因为…

LabVIEW电信号傅里叶分解合成实验

LabVIEW电信号傅里叶分解合成实验 电信号的分析与处理在科研和工业领域中起着越来越重要的作用。系统以LabVIEW软件为基础&#xff0c;开发了一个集电信号的傅里叶分解、合成、频率响应及频谱分析功能于一体的虚拟仿真实验系统。系统不仅能够模拟实际电路实验箱的全部功能&…

The C programming language (second edition,KR) exercise(CHAPTER 3)

E x c e r c i s e 3 − 1 Excercise\quad 3-1 Excercise3−1&#xff1a;输出结果如图1所示&#xff0c;这里故意让二分搜索算法去寻找一个在数组中不存在在的数&#xff0c;然后去看两种二分搜索算法分别所花费的时间的大小&#xff0c;为了使得所花费的时间更具有可分辨性&a…

3D室内装潢设计 Sweet Home 3D for Mac 中文直装版

Sweet Home 3D 是一款非常棒的家装辅助设计软件&#xff0c;支持包括中文在内的16中语言&#xff0c;它能帮您通过二维的家居平面图来设计和布置您的家具,还可以用三维的视角浏览整个装修布局的全貌。是一款操作起来简单方便&#xff0c;使用起来快捷、迅速&#xff0c;拥有超高…

C语言——数据在内存中的存储

引言 数据是程序运行的核心。当我们用C语言编写程序时&#xff0c;我们实际上是在操纵内存中的数据。这些数据在内存中是如何储存的&#xff0c;今天我们就来学习这些内容。 基本数据类型 1.整型 int: 基本整型&#xff0c;通常占用4个字节 short: 短整型&#xff0c;通常占用…

Windows环境下删除MySQL

文章目录 一、关闭MySQL服务1、winR打开运行&#xff0c;输入services.msc回车2、服务里找到MySQL并停止 二、卸载MySQL软件1、打开控制模板--卸载程序--卸载MySQL相关的所有组件 三、删除MySQL在物理硬盘上的所有文件1、删除MySQL的安装目录&#xff08;默认在C盘下的Program …

基于STC12C5A60S2系列1T 8051单片机的带字库液晶显示器LCD12864数据传输并行模式显示汉字应用

基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD12864显示汉字应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍液晶显示器LCD12864简单介绍一、LCD12864点阵型液…

【四十八】【算法分析与设计】单调栈,单调栈模板,单调栈求个元素最近小于(等于)或者大于(等于)下标

求各个元素左边和右边的最近的小于&#xff08;等于&#xff09;的下标 最近的小于的计算过程: 实现的过程需要用到一个stack<>st 黑盒:在st的元素都可以正确计算出最近小于的元素下标那么我们依次将arr中的元素入栈计即可 1.栈里面存储的是vector&#xff0c;vector存…

无人机巡检技术革命性变革光伏电站运维管理

在中国广袤的大地上&#xff0c;光伏电站如雨后春笋般崛起&#xff0c;晶体硅组件板在阳光下熠熠生辉&#xff0c;为人们带来了源源不断的绿色能源。然而&#xff0c;随着光伏产业的迅猛发展&#xff0c;电站运维管理面临着前所未有的挑战。而无人机巡检技术的引入&#xff0c;…

分类预测 | Matlab实现PSO-LSSVM粒子群算法优化最小二乘支持向量机数据分类预测

分类预测 | Matlab实现PSO-LSSVM粒子群算法优化最小二乘支持向量机数据分类预测 目录 分类预测 | Matlab实现PSO-LSSVM粒子群算法优化最小二乘支持向量机数据分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现PSO-LSSVM粒子群算法优化最小二乘支持向量…

一起学习python——基础篇(19)

今天来说一下python的如何修改文件名称、获取文件大小、读取文中指定的某一行内容。 1、修改文件名称&#xff1a; import os testPath"D:/pythonFile/test.txt" testPath2"D:/pythonFile/test2.txt" #修改文件名称使用rename方法&#xff0c; #第一个参…