三小时使用鸿蒙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语言提供了一种内置…

HwBinder流程分析

HwBinder与普通Binder是一样的,区别是前者是专门给硬件使用&#xff0c;后者是给一般的应用程序使用&#xff0c;为了不影响现有的binder&#xff0c;单独增加硬件的HwBinder来实现硬件相关进程的通信。 HwBinder也是有四部分组成&#xff1a;hwservermanager、server、client…

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; &…

PyTorch深度学习——线性回归、计算图和自动求导机制、损失函数和优化器

一、线性回归 线性回归模型是输入一个特征的张量&#xff0c;做线性变换&#xff0c;输出一个预测张量 为了构造线性变换&#xff0c;需要知道输入特征维度大小&#xff0c;并且知道线性回归的权重和偏置&#xff0c;在forward方法中&#xff0c;输入一个特征张量x&#xff0…

LeetCode -- 第 392 场周赛

链接 : 竞赛 - 力扣 (LeetCode) 3105. 最长的严格递增或递减子数组 . - 力扣&#xff08;LeetCode&#xff09; 用两个分组循环(本质就是双指针)&#xff0c;分别求出最长的递增和递减子数组的长度&#xff0c;然后取max ; class Solution { public:int longestMonotonicS…

客户现场服务器故障处理建议携带的设备

WIFI路由器&#xff0c;带 SIM卡的&#xff0c;带多个千兆网口的&#xff0c;网线 USB硬盘&#xff08;TB计算&#xff09; U盘启动盘 便携的KVM&#xff08;另外带 键盘/鼠标/VGA线&#xff0c;方便现场多个服务器切换显示和控制&#xff09; USB Hub&#xff08;万一客户服…

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

字节面经之碰上了活菩萨

rt, 楼主碰上了活菩萨. 简单做了个自我介绍, 然后项目没怎么问, 说问我一些计算机基础知识. 然后让我说说我都会什么. 然后从数据结构开始. 让我讲一讲自己熟悉的数据结构, 比如树什么的. 然后我就把二叉树, 二叉搜索树, 二叉平衡树, 红黑树. DFS/BFS还有对应的场景讲了一遍.…

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…