三小时使用鸿蒙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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

swampCTF 2024

swampCTF 2024 MISC Discord Challenge swampCTF{w3lc0m3_t0_th3_swamp} What the Form google form不停重定向&#xff0c;直接F12看一下。flag就在前端。 swampCTF{F0rm5_K33p5_D4T4_H1dd3n} OSINT Lost in Space 图片是旅行者2号&#xff0c;问距离地球多少个天文单…

Games101-光线追踪(基本原理)

光线追踪和光栅化是两个不同的成像方式。 光栅化最大的问题是无法很好的表示全局的效果。 全局效果包括 软阴影(shadow mapping后来被改进成能够支持软阴影&#xff0c;阴影随着离物体越远越来越模糊)&#xff0c;glossy反射(类似镜子&#xff0c;但没有镜子那么光滑&#xff0…

蓝桥杯2023年第十四届省赛真题-棋盘

solution1(暴力) 暴力蓝桥杯可以过&#xff0c;虽然理论上会超时~ #include<iostream> using namespace std; const int maxn 2010; int a[maxn][maxn] {0};//0白棋&#xff0c;1黑棋 int main(){int n, m, x1, x2, y1, y2;scanf("%d%d", &n, &m)…

基于单片机水塔水位检测控制系统设计

**单片机设计介绍&#xff0c; 基于单片机水塔水位检测控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机水塔水位检测控制系统设计的主要目标是实现水塔水位的自动监测与控制&#xff0c;确保水塔内的水位始…

代码随想录第35天| 860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球

860.柠檬水找零 860. 柠檬水找零 - 力扣&#xff08;LeetCode&#xff09; 代码随想录 (programmercarl.com) 贪心算法&#xff0c;看上去复杂&#xff0c;其实逻辑都是固定的&#xff01;LeetCode&#xff1a;860.柠檬水找零_哔哩哔哩_bilibili 在柠檬水摊上&#xff0c;每…

如何在 iOS 项目中集成 MiniApp SDK,快速构建智能小程序?

本文介绍如何在 iOS 项目中&#xff0c;集成 MiniApp SDK&#xff0c;使之能够构建智能生活小程序&#xff0c;运行在你的 IoT App 上。 准备工作 在集成 MiniApp SDK 之前&#xff0c;您需要在 涂鸦 IoT 开发平台 上&#xff1a; 注册开发者账号、创建产品、创建功能点等。…

【静态分析】静态分析笔记02 - Intermediate Representation

参考&#xff1a; [南京大学]-[软件分析]课程学习笔记(二)-IR_ast和ir的区别-CSDN博客 ------------------------------------------------------------------------------------------------------------ 1. compilers and static analyzers compiler 是将 Source Code 转…

实时云渲染视频流化Webgl引擎模型技术原理

数字孪生领域很多项目B/S架构下交付使用的是webgl方案&#xff0c;该方案有其自身的优势&#xff0c;降低了用户在使用数字孪生或者虚拟仿真模型时需要的高性能显卡。但其也有自身无法忽视的困境&#xff0c;比如一些数据量大的模型&#xff0c;需要验证依赖下载时的网络环境&a…

c语言驾驶员理论课程模拟考试与学习系统1300

定制魏&#xff1a;QTWZPW&#xff0c;获取更多源码等 目录 1问题描述 2功能要求 【选做要求】 【其他要求】 部分代码展示 效果展示 程序设计题4:驾驶员理论课程模拟考试与学习系统 1问题描述 要求编写一个程序&#xff0c;模拟驾驶员科目一的考试&#xff0c;要求具有良…

Android获取连接到手机热点上的设备信息

主题&#xff1a;在手机开启热点网络的情况下&#xff0c;想要获取是哪个设备已经连接上了当前开启的热点。 实现思路&#xff1a;Android通过读取 /proc/net/arp 文件可以得到连接当前热点的设备信息&#xff0c;包括Mac地址、IP地址等信息。 一. 方法逻辑&#xff1a; /*** …

Webots常用的执行器(Python版)

文章目录 1. RotationalMotor2. LinearMotor3. Brake4. Propeller5. Pen6. LED 1. RotationalMotor # -*- coding: utf-8 -*- """motor_controller controller."""from controller import Robot# 实例化机器人 robot Robot()# 获取基本仿真步长…

IDEA无法成功配置Tomcat的解决方法(IDEA版本问题)

在创建Servlet时&#xff0c;下载了Tomcat文件夹以及成功配置了环境变量之后&#xff0c;在IDEA中怎么都找不到Tomcat&#xff0c;尝试了网络中的各种方法&#xff0c;都不行&#xff0c;结果发现时IDEA版本的问题。因为我下的IDEA是社区版的&#xff0c;所以没有自带的Tomcat&…

Flutter开发之图片选择器

使用FLutter开发了一个图片选择的组件&#xff0c;功能如下&#xff1a; 1、支持设置最大可选图片的个数&#xff1b; 2、根据选择的图片个数自适应容器组件的高度&#xff1b; 3、可设置容器的最大高度&#xff1b; 4、支持点击放大和删除功能&#xff1b; 具体效果如下 …

Linux系统安装内网穿透实现固定公网地址访问本地MinIO服务

文章目录 前言1. 创建Buckets和Access Keys2. Linux 安装Cpolar3. 创建连接MinIO服务公网地址4. 远程调用MinIO服务小结5. 固定连接TCP公网地址6. 固定地址连接测试 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&am…

【计算机考研】408算法大题怎么练?

先说结论&#xff1a;基础阶段学好各个数据结构与&#xff0c;重点是数组、链表、树、图。然后强化阶段突破算法提 在基础阶段&#xff0c;并不需要过于专门地练习算法。相反&#xff0c;基础阶段的重点应该放在对各种数据结构原理的深入理解上。在我个人的经验中&#xff0c;…

计算机考研择校|408还是自命题,哪个上岸难度大?

我一般是建议选择408&#xff0c;但是现在考408的同学太多了 所以408的竞争压力会比较大&#xff0c;加上复习难度大&#xff0c;复习过程中&#xff0c;心态很容易崩掉。 其实到底选自命题还是408&#xff0c;我觉得还是要看自己的目标。如果目标院校是自命题&#xff0c;那…

C语言的显式类型转换和隐式类型转换详细讲解

目录 一、类型转换 1、显式类型转换 2、隐式类型转换 二、算术转换 三、总结 每个编译器都会对表达式做两件事情&#xff0c;一是判断表达式中操作符的优先级和结合性&#xff0c;二是判断表达式中的操作数类型是否一致&#xff0c;如果不一致则需要进行类型转换。第一点在…

吴恩达机器学习实践实验室:决策树(Decision Trees)

在本练习中&#xff0c;您将从头开始实施决策树&#xff0c;并将其应用于蘑菇可食用还是有毒的分类任务。 文章目录 1-包2-问题陈述3-数据集3.1一个热编码数据集 4-决策树4.1计算熵4.2分割数据集4.3计算信息增益4.4获得最佳分割 5-构建树 1-包 首先&#xff0c;让我们运行下面…

【问题解决】ubuntu安装新版vscode报code-insiders相关错误

问题 目前 vscode官网 最新的包为 insiders_1.89.0-1712297812_amd64.deb &#xff0c;双击或者使用sudo dpkg -i code-insiders_1.89.0-1712297812_amd64.deb安装后报错&#xff0c;执行其他命令也报错。 安装环境&#xff1a;ubuntu18.04 dpkg: 处理软件包 code-insiders (…

代码随想录算法训练营第四十九天 | 121. 买卖股票的最佳时机、22. 买卖股票的最佳时机 II

代码随想录算法训练营第四十九天 | 121. 买卖股票的最佳时机、22. 买卖股票的最佳时机 II 121. 买卖股票的最佳时机题目解法 122. 买卖股票的最佳时机 II题目解法 感悟 121. 买卖股票的最佳时机 题目 解法 题解链接 没看题解想出来的&#xff1a;贪心 class Solution { pub…