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

news/2024/11/17 9:48:03/

学习鸿蒙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.ppmy.cn/news/1412356.html

相关文章

Python高级

不定长参数 位置不定长参数&#xff0c;获取参数args会整合为一个元组 def info(*args):print(arg is, args)print(type(arg) is, type(args))info(1, 2, 3, 4, a, b)# 输出 # arg is (1, 2, 3, 4, a, b) # type(arg) is <class tuple> 关键字不定长参数&#xff0c;&…

常见通信方式之Websocket

官方文档 背景 在没有websocket之前&#xff0c;如果需要不断更新页面的某一部分信息&#xff0c;通常是采用基于http请求的单向轮询。但是轮询的话&#xff0c;一方面&#xff0c;我们又不希望过于频繁的请求服务器&#xff0c;一方面&#xff0c;又希望能够能快的收到最新的…

前端:导出表格

核心代码&#xff1a; function handleExport(HTML,title){ var uri data:application/vnd.ms-excel;base64,;var template <html xmlns:o"urn:schemas-microsoft-com:office:office" xmlns:x"urn:schemas-microsoft-com:office:excel" xmlns"h…

微电网优化:基于巨型犰狳优化算法(Giant Armadillo Optimization,GAO)的微电网优化(提供MATLAB代码)

一、微电网优化模型 微电网是一个相对独立的本地化电力单元&#xff0c;用户现场的分布式发电可以支持用电需求。为此&#xff0c;您的微电网将接入、监控、预测和控制您本地的分布式能源系统&#xff0c;同时强化供电系统的弹性&#xff0c;保障您的用电更经济。您可以在连接…

c# wpf LiveCharts 饼图 简单试验

1.概要 c# wpf LiveCharts 饼图 简单试验 2.代码 <Window x:Class"WpfApp3.Window5"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schem…

Pots(DFS BFS)

//新生训练 #include <iostream> #include <algorithm> #include <cstring> #include <queue> using namespace std; typedef pair<int, int> PII; const int N 205; int n, m; int l; int A, B, C; int dis[N][N];struct node {int px, py, op…

蓝桥杯——最长递增

题目 在数列 a1, a2,,an 中&#xff0c;如果 a¡ < ai1 < ai2 <<aj&#xff0c;则称 ai 至 a,为一段递增序列&#xff0c;长度为 j-i 1。 定一个数列&#xff0c;请问数列中最长的递增序列有多长。 输入描述 输入的第一行包含一个整数 n。 第二行包含 几 个整…

R语言绘图 | 散点小提琴图

原文链接&#xff1a;R语言绘图 | 散点小提琴图 本期教程 写在前面 本期的图形来自发表在Nature期刊中的文章&#xff0c;这样的基础图形在日常分析中使用频率较高。 获得本期教程数据及代码&#xff0c;后台回复关键词&#xff1a;20240405 绘图 设置路径 setwd("You…