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

2. 其次开始构建卡片，需要在初始化的时候构建，这样就知道了组件/页面的生命周期
3. 在初始化阶段构造好卡片列表后，需要进行展示，这需要了解for循环进行渲染，这就会使用ForEach了，不过到了后面的阶段，才知道ForEach有一个坑，就是会进行去重操作
4. 一开始我渲染卡片，使用的是长方形的UI，还没使用上一开始准备的图片，所以使用到了自定义组件，在组件里生成每一个卡片。还能够加上onClick方法，这样就能够很好地处理点击事件。
5. 下一个问题就是值的变化，和组件之间值变化的处理，学习了@State、@Prop、@Link的用法，并且进行了实践。

由于没有更多时间进行完善，最终效果如下：

源码地址奉上，若是觉得可以记得点个星星：https://github.com/myloverwdm/YLGY-HM-Next