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

三小时使用鸿蒙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.lryc.cn/news/337843.html

相关文章:

  • 如何使用 ArcGIS Pro 制作热力图
  • SpringBoot之集成Redis
  • mybatis-plus与mybatis同时使用别名问题
  • MySQL基础知识——MySQL日志
  • uniapp 地图分幅网格生成 小程序基于map组件
  • python项目练习——22、人脸识别软件
  • Linux中账号登陆报错access denied
  • python语言之round(num, n)小数四舍五入
  • 安全风险攻击面管理如何提升企业网络弹性?
  • 常用的几款性能测试软件
  • 谷歌google浏览器无法更新Chrome至最新版本怎么办?浏览器Chrome无法更新至最新版本
  • 认识异常(1)
  • C++矩阵
  • 解锁智能未来:用Ollama开启你的本地AI之旅
  • CSS实现卡片在鼠标悬停时突出效果
  • GPT建模与预测实战
  • 传统方法(OpenCV)_车道线识别
  • Git以及Gitlab的快速使用文档
  • MyBatis Interceptor拦截器高级用法
  • Python学习入门(2)——进阶功能
  • 华为改进点
  • 分布式技术---------------消息队列中间件之 Kafka
  • BGP扩展知识总结
  • 华为OD-C卷-按身高和体重排队[100分]
  • 云原生(八)、Kubernetes基础(一)
  • Linux 系统解压缩文件
  • linux如何使 CPU使用率保持在指定百分比?
  • LLMs之Morphic:Morphic(一款具有生成式用户界面的人工智能答案引擎)的简介、安装、使用方法之详细攻略
  • [react] useState的一些小细节
  • 蓝桥杯【第15届省赛】Python B组