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