中國百強(qiáng)城市榜單排名/seo sem推廣
學(xué)習(xí)鴻蒙arkTS語言，決定直接通過實(shí)踐的方式上手，而不是一點(diǎn)點(diǎn)進(jìn)行觀看視頻再來實(shí)現(xiàn)。
結(jié)合羊了個(gè)羊的開發(fā)思路，準(zhǔn)備好相應(yīng)的卡片素材后進(jìn)行開發(fā)。遇到了需要arkTS進(jìn)行解決的問題，再去查看相應(yīng)的文檔。
- 首先需要準(zhǔn)備卡片對應(yīng)的圖片，而且這是可以復(fù)用的，自然就需要將圖片存儲在集合里，正好根據(jù)集合相應(yīng)的索引下標(biāo)，能夠使用random來獲得隨機(jī)的圖片。通過這一步，學(xué)習(xí)了使用Resource，以及知道了圖片需要放在resource/base文件夾下。這里有個(gè)小插曲，一開始我使用生成變量的方式來獲取圖片：let s = app.media. + 隨機(jī)數(shù); 然后使用$r(s)，發(fā)現(xiàn)是不行的，知道了Resource是編譯階段生成的，不過我在Image組件里面也使用變量的方式，也是不行的
// 可點(diǎn)擊的卡片列表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'));
- 其次開始構(gòu)建卡片，需要在初始化的時(shí)候構(gòu)建，這樣就知道了組件/頁面的生命周期
- 在初始化階段構(gòu)造好卡片列表后，需要進(jìn)行展示，這需要了解for循環(huán)進(jìn)行渲染，這就會(huì)使用ForEach了，不過到了后面的階段，才知道ForEach有一個(gè)坑，就是會(huì)進(jìn)行去重操作
- 一開始我渲染卡片，使用的是長方形的UI，還沒使用上一開始準(zhǔn)備的圖片，所以使用到了自定義組件，在組件里生成每一個(gè)卡片。還能夠加上onClick方法，這樣就能夠很好地處理點(diǎn)擊事件。
- 下一個(gè)問題就是值的變化，和組件之間值變化的處理，學(xué)習(xí)了@State、@Prop、@Link的用法，并且進(jìn)行了實(shí)踐。
由于沒有更多時(shí)間進(jìn)行完善，最終效果如下：
源碼地址奉上，若是覺得可以記得點(diǎn)個(gè)星星：https://github.com/myloverwdm/YLGY-HM-Next