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

news2024/11/24 10:50:22

学习鸿蒙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.coloradmin.cn/o/1588102.html

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

相关文章

ccf201509-3模板生成系统(list,map,字符串综合运用)

问题描述 成成最近在搭建一个网站&#xff0c;其中一些页面的部分内容来自数据库中不同的数据记录&#xff0c;但是页面的基本结构是相同的。例如&#xff0c;对于展示用户信息的页面&#xff0c;当用户为 Tom 时&#xff0c;网页的源代码是&#xff1a; 而当用户为 Jerry 时…

【Spring Boot 源码学习】SpringApplication 的 run 方法核心流程介绍

《Spring Boot 源码学习系列》 SpringApplication 的 run 方法核心流程介绍 一、引言二、往期内容三、主要内容3.1 run 方法源码初识3.2 引导上下文 BootstrapContext3.3 系统属性【java.awt.headless】3.4 早期启动阶段3.5 准备和配置应用环境3.6 打印 Banner 信息3.7 新建应用…

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

今天继续说说python的网络请求方法——get方法和post方法。上一章已经简单说了一下get方法&#xff0c;现在说一下post方法如何进行网络请求。 假如服务端开发人员给你一个接口文档内容如下&#xff1a; Request(请求参数)&#xff1a; 1、接口url为http://127.0.0.1:5005/a…

Mac 局域网内连接 MySQL

1. 前言 本文记录在 mac 局域网下实现数据库资源共享的问题 项目开发初期&#xff0c;都是在本地进行开发调试&#xff0c;数据库也在本地。那么和你配合开发的同事&#xff0c;就可能想要连接你 mac 电脑的数据库&#xff0c;连接过程中可能就会遇到问题。本文详细记录这些问…

MongoDB数据库转换为表格文件的Python实现

目录 一、引言 二、转换工具与库的选择 三、转换过程详解 安装必要的库 连接MongoDB数据库 查询并处理数据 将数据写入CSV文件 四、进阶技巧与注意事项 五、总结 一、引言 在当今大数据时代&#xff0c;数据的存储、处理与共享显得尤为重要。MongoDB作为一个面向文档…

centos7安装 on-my-zsh

如下&#x1f447; yum install -y zsh chsh -s /bin/zsh yum install -y git sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" 重启即可生效啦~

cordova后台插件开发新手教程

typora-root-url: imags cordova后台插件开发新手教程 预安装环境&#xff1a;JDK11、Android studios、nodo.js 一、环境搭建 1.安装Cordova npm install -g cordova2.创建项目 cordova create 具体命令&#xff1a; cordova create 目录名 包名 项目名 执行结果终端&am…

7-23 币值转换

题目链接&#xff1a;7-23 币值转换 一. 题目 1. 题目 2. 输入输出样例 3. 限制 二、代码 1. 代码实现 #include <iostream> #include <string> using namespace std;string numStr[] { // 0-9对应的字符串&#xff08;字符串是方便string&#xff09;"a…

tensorflow.js 如何从 public 路径加载人脸特征点检测模型

系列文章目录 如何在前端项目中使用opencv.js | opencv.js入门如何使用tensorflow.js实现面部特征点检测tensorflow.js 如何从 public 路径加载人脸特征点检测模型tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图tensorflow.js 使用 opencv.js 将人脸…

常用特征分箱算法

特征分箱是构建信用评分过程中最重要的一个环节。特征分箱是对连续变量离散化的一种简称&#xff0c;对于连续型变量&#xff0c;需要对其连续值进行拆分&#xff0c;并进行后续的分箱调整工作&#xff1b; 对于离散型变量&#xff0c;通常要根据每个离散值计算其坏样本占比或…

【unity】【C#】游戏音乐播放和发布

今天我们来认识一下有关 unity 音乐的一些知识 我们先创建 AudioClips 文件夹&#xff0c;这个文件夹通常就是 unity 中存放音乐的文件夹&#xff0c;然后拖进音乐文件进去 这里为大家提供了两个音乐&#xff0c;有需要可以自取 百度网盘&#xff1a;https://pan.baidu.com/s…

从库延迟案例分析

背景介绍 近来一套业务系统&#xff0c;从库一直处于延迟状态&#xff0c;无法追上主库&#xff0c;导致业务风险较大。从资源上看&#xff0c;从库的CPU、IO、网络使用率较低&#xff0c;不存在服务器压力过高导致回放慢的情况&#xff1b;从库开启了并行回放&#xff1b;在从…

一键提升Edge浏览器生产力

Edge作为微软的产品&#xff0c;其具体使用和特性在此不再赘述&#xff0c;其中对我个人而言较有吸引力的部分是其扩展部分。正是有了其丰富的扩展插件&#xff0c;其生产力才能一键跃升&#xff0c;今天让我们一起来探索几款有用&#xff08;有趣&#xff09;的扩展插件。 1.…

NASA数据集—— 亚洲夏季季风化学和气候影响项目(ACCLIP)Roscoe 激光雷达收集的云和气溶胶ADO遥感数据

ACCLIP WB-57 Aerosol and Cloud Remotely Sensed Data 简介 ACCLIP_AerosolCloud_AircraftRemoteSensing_WB57_Data 是亚洲夏季季风化学和气候影响项目&#xff08;ACCLIP&#xff09;期间从 Roscoe 激光雷达收集的云和气溶胶遥感数据。该产品的数据收集工作已经完成。 亚洲…

【汇编】_Visual Studio2019写32位汇编

目录 第一步&#xff1a;创建新项目 1. 空项目—下一步 2. 选择位置—填写项目名—创建 第二步&#xff1a;项目生成依赖项 1. 右击项目名—生成依赖项—生成自定义 2. 选中masm—确定 第三步&#xff1a;创建源文件 1. 源文件—添加—新建项 2. 选择C文件—创建新文件…

ActiveMQ + MQTT 集群搭建(虚机版本) + Springboot使用配置

文章目录 前言一、ActiveMQ、 MQTT是什么&#xff1f;1.ActiveMQ介绍2.MQTT介绍 二、集群搭建步骤1.下载apache-activemq-5.15.12-bin.tar.gz2.上传apache-activemq-5.15.12-bin.tar.gz到服务器并解压文件到文件夹clusters、master、slave三个文件夹下面形成三个节点&#xff0…

配置QtCreator能加载自定义插件的环境

配置对应环境 引言查看当前版本配置能够加载插件的环境 引言 生成的自定义插件能在QtCreator的设计器中加载&#xff0c;需要满足当前使用的QtCreator的编译时所需的Qt库和编译器。 查看当前版本 这里需要先查看自己使用的QtCreator的版本&#xff0c;即生成QtCreator时使用…

17(18)-1-HTML5 新增语义标签及属性

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 ✍HTML5 新增语义标签及属性&#x1f48e;1 HTML5 新增的块级语义化标签&…

C语言——指针的高级引用

目录 1.概述 2.虚拟内存空间 2.1存储期限 2.2栈区管理 2.3堆区域的使用 3.动态内存分配和释放&#xff08;重点&#xff09; 3.1通用指针类型void 3.2内存分配malloc函数 3.2.1 malloc函数&#xff08;memory allocation&#xff09;&#xff08;注意len*size&#xff…

SAP SD学习笔记04 - 出荷Plant(交货工厂),出荷Point(装运点),输送计划,品目的可用性检查,一括纳入/分割纳入,仓库管理

上一章讲了SD的主数据。 SAP SD学习笔记03 - SD模块中的主数据-CSDN博客 本章讲出荷Plant&#xff08;交货工厂&#xff09;&#xff0c;出荷Point&#xff08;装运点&#xff09;和出和路线。 还是偏理论多一些&#xff0c;后面的文章尽量多加些练习巩固一下。 1&#xff0…