三小时使用鸿蒙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.mzph.cn/news/803300.shtml

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

相关文章

【STL】顺序容器与容器适配器

文章目录 1顺序容器概述1.1array1.2forward_list1.3deque 2.如何确定使用哪种顺序容器呢&#xff1f;3.容器适配器的概念4.如何定义适配器呢&#xff1f; 1顺序容器概述 给出以下顺序容器表&#xff1a; 顺序容器类型作用vector可变大小的数组&#xff0c;支持快速访问&#…

lua学习笔记15(元表的学习)

print("*****************************元表的学习*******************************") print("*****************************元表的概念*******************************") --任何变量都可以作为另一个表变量的元表 --任何表变量都可以有自己的元表 --当我…

谷歌浏览器变黑色背景 扩展程序 Hacker Vision

这个扩展程序能够把浏览器的背景变成黑色&#xff0c;长时间阅读文章的时候护眼效果很不错 效果如下

《前端面试题》- JS基础 - call()、apply()、bind() 的区别

call 、bind 、 apply 这三个函数的功能都是改变this的指向问题&#xff0c;但是也存在一定的区别。 call 的参数是直接放进去的&#xff0c;第二第三第 n 个参数全都用逗号分隔,apply 的所有参数都必须放在一个数组里面传进去bind 除了返回是函数以外&#xff0c;它 的参数和…

美团一面:说说synchronized的实现原理?问麻了。。。。

引言 在现代软件开发领域&#xff0c;多线程并发编程已经成为提高系统性能、提升用户体验的重要手段。然而&#xff0c;多线程环境下的数据同步与资源共享问题也随之而来&#xff0c;处理不当可能导致数据不一致、死锁等各种并发问题。为此&#xff0c;Java语言提供了一种内置…

PUBG绝地求生29.1版本延迟高/卡顿/掉帧/丢包的快速解决方法

要想在绝地求生中获得好成绩&#xff0c;咱们需求把握一些根本的游戏技巧。比方&#xff0c;在挑选降落点时&#xff0c;咱们可以运用u标签来着重“安全”二字。挑选一个相对较为安全的降落点可以防止与其他玩家过早触摸&#xff0c;给自己争夺更多时间来搜集资源和配备。接下来…

ORAN C平面 Section Extension 22

ORAN C平面Section扩展22用于ACK/NACK请求。除section type 7外&#xff0c;section扩展22可以用于从O-DU发送到O-RU的所有section type和section扩展。 对于一个section描述&#xff0c;O-DU可以使用section扩展22要求O-RU使用section type 8 C平面消息进行ACK/NACK反馈。关于…

MyBatis源码介绍

文章目录 MyBatis的核心流程介绍SqlSessionFactory的理解MyBatis中的Executor的源码理解Spring中是如何解决MySQL的SqlSession的线程安全问题MyBatis面向Mapper编程工作原理Mybatis动态sql执行原理Mybatis的一级、二级缓存实现原理Mybatis的插件运行原理以及如何编写一个插件my…

制作一个RISC-V的操作系统十-Trap和Exception(流 mtvec mepc mcause mtval mstatus trap完整流程)

文章目录 流mtvecmepcmcausemtvalmstatustrap 初始化trap的top half&#xff08;硬件完成&#xff09;trap的bottom half&#xff08;软件完成&#xff09;从trap返回代码实现 流 控制流&#xff1a;程序控制的执行流 trap分为中断和异常 mtvec base&#xff1a;存储trap入…

2_8.Linux系统引导过程及引导修复

# 1.磁盘引导 # mbr主引导记录0磁道1扇区446 作用&#xff1a; 记录grub2引导文件的位置 当mbr数据丢失系统会因为找不到启动分区而停止启动 问题模拟方式: 系统磁盘/dev/sda dd if/dev/zero of/dev/vda bs446 count1 ##清空系统/dev/sda上的mbr数据 恢复方式&#xff1a; &…

图形化界面使用MQ!!!

一、docker安装 1、拉去镜像 docker pull rabbitmq:3.10-management 2、Docker运行&#xff0c;并设置开机自启动&#xff08;第一个-p是MQ默认配置的端口&#xff0c;第二个-p是图形化界面配置的端口&#xff09; docker run -d --restartalways --name rabbitmq -p 5672:5672…

直播系统的短视频直播源码,带有多功能后台系统的直播短视频平台 APP 源码。

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 此源码是一个直播系统&#xff0c;集直播、短视频等功能&#xff0c;根据市场趋势开发并推出思乐直播APP&#xff0c;APP功能丰富且可在后台管理系统进行配置&#xff0c;做到按需求来…

《QT实用小工具·二十二》多种样式导航按钮控件

1、概述 源码放在文章末尾 该项目实现了多种样式的导航按钮控件 可设置文字的左侧、右侧、顶部、底部间隔。 可设置文字对齐方式。 可设置显示倒三角、倒三角边长、倒三角位置、倒三角颜色。 可设置显示图标、图标间隔、图标尺寸、正常状态图标、悬停状态图标、选中状态图标…

ctfshow web入门 文件上传web162--web167

web162 session文件包含条件竞争 直接包含不传马了 我们上传的文件如果不符合要求&#xff0c;就会被删除&#xff0c;导致成功上传无法访问&#xff0c;没有用。但是如果我们上传的速度比服务器删的速度快&#xff0c;就可以了。 上传.user.ini GIF89a auto_append_file/tmp/…

四、书城开发--3、书城图书部分的开发

书城图书部分 首先我们做书城首页搜索栏下面的图片展示 我们在书城首页组件中通过home请求方法中获取回来的数据中&#xff0c;打印出来可以看到那个banner就是我们现在要的图片 我们在data中定义一个变量banner用来存放获取回来的数据中的banner 然后把它展示出来就可以了&a…

LeetCode-84. 柱状图中最大的矩形【栈 数组 单调栈】

LeetCode-84. 柱状图中最大的矩形【栈 数组 单调栈】 题目描述&#xff1a;解题思路一&#xff1a;单调栈解题思路二&#xff1a;解题思路三&#xff1a; 题目描述&#xff1a; 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且…

阿赵UE学习笔记——26、动画混合空间

阿赵UE学习笔记目录   大家好&#xff0c;我是阿赵。   继续学习虚幻引擎的使用。之前学习了通过蓝图直接控制动画播放&#xff0c;或者通过动画状态机去控制播放。这次来学习一种比较细致的动画控制播放方式&#xff0c;叫做动画混合空间。 一、使用的情景 假设我们现在需…

ssm035基于JavaWeb的家居商城系统的设计与实现+jsp

家居商城系统 摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于家居商城系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了家居商城系统&#xff0c;它彻底改…

Linux操作系统安装注意事项(新手简易版)

Linux操作系统安装注意事项&#xff08;新手简易版&#xff09; 目录&#xff1a; 1、字符集安装 2、磁盘分区 3、关闭KDUMP防火墙 4、时区选择 注&#xff1a;事例截图是centos8的安装&#xff0c;其他版本是一样的 1、字符集安装 ecology运行需要用到GBK和UTF8字符…

设计模式-结构型-装饰器模式-decorator

发票基本类 public class Invoice {public void printInvoice() {System.out.println("打印发票正文");} } 发票正文类 public class Decorator extends Invoice {protected Invoice ticket;public Decorator(Invoice ticket) {this.ticket ticket;}Overridepubl…