最近在開(kāi)視頻時(shí), 經(jīng)惩缰看到鴻蒙純血相關(guān)標(biāo)題, 就搜索了下鴻蒙教學(xué), 隨便找一個(gè)免費(fèi)視頻課程, 就開(kāi)始了學(xué)習(xí)
一開(kāi)始, 先了解語(yǔ)言特性, 鴻蒙是TS作為開(kāi)發(fā)語(yǔ)言, 恰好之前接觸過(guò)一些js和ts. 還算熟悉. 然后就是看UI組件了, 先了解下如何繪制UI, 這樣可以最快動(dòng)手, 提高成就感.
上官網(wǎng), 下載編輯器, SDK, 配置好以后, 就可以開(kāi)始著手按照教程中去繪制UI了. 教程只涉及了一部分, 剩下的, 就需要去官網(wǎng)上查看了 Ui 組件文檔
這里可以查看所有的鴻蒙系統(tǒng)UI組件, 他們基本涵蓋了所有需要的種類(lèi). 有demo, 有效果圖, 很清晰.
了解布局方式, 布局方式, 跟H5的很詳細(xì), H5也跟Flutter相似, Android的xml布局方式也相似, 如果做過(guò)其中一種, 都可以很快上手了解, 布局主要就是線性方式. 在一個(gè)方向上, 挨個(gè)排列各個(gè)組件. 再某一行再更換排列方式. Row橫向/Column豎向/Stack重疊, 這三個(gè)基本滿足了大部分, 其余的, 就再去官網(wǎng)查看
此時(shí), 可以在單一文件中, 繪制所期望的UI了. 但是做開(kāi)發(fā), 就會(huì)遇到面向?qū)ο? 需要抽取一些公共組件, 這時(shí)候需要學(xué)習(xí), 如何創(chuàng)建一個(gè)可以復(fù)用的公共組件, 容器組件文檔
使用@Builder, 才可以把組件單獨(dú)抽離成一個(gè)方法.
使用@Component, 才可以把組件單獨(dú)抽離到一個(gè)類(lèi)中.
ArkTs中, UI使用的是結(jié)構(gòu)體Struct, 而非類(lèi)Class. 邏輯部分使用的才是類(lèi).
UI繪制OK后, 就是網(wǎng)絡(luò)通信.
ark也內(nèi)置了http.
在單獨(dú)的類(lèi)中使用http. 可以請(qǐng)求接口, 并異步收到返回值.
這時(shí)候, 就該了解UI組件的生命周期, 在哪里調(diào)用網(wǎng)絡(luò)請(qǐng)求. 如何更新UI. 使用狀態(tài)管理@State 其余的@Prop / @Link, 在需要的時(shí)候 , 去看看文檔, 如何使用就可以了.
基本的開(kāi)發(fā)似乎沒(méi)有阻礙了. 想在鴻蒙里, 復(fù)刻一些, 之前常用的組件效果.
1. Btn按下時(shí), 按鈕透明度下降
首先自定義一個(gè)組件 @Component export struct BaseBtn
在組件中定義一個(gè)狀態(tài)值 @State opacity:number = 1
在組件中, 定義一個(gè)傳入組件 @BuilderParam child: () => void 還要給他賦一個(gè)默認(rèn)值哦
然后就是設(shè)置opacity / onTouch 方法. 在touch.Down時(shí), 讓opacity變?yōu)?.3. touch.Up時(shí), 改為1.
但是效果發(fā)現(xiàn)很生硬, 需要加入動(dòng)畫(huà). 就需要animation方法, 來(lái)配置了, 需要注意,animation 需要放在最后, 放在前面的話, 他后面設(shè)置的屬性不會(huì)生效.
2. ListView下拉刷新
系統(tǒng)自帶一個(gè) Refresh 組件, 但是這個(gè)只能是下拉該組件時(shí)觸發(fā). 跟常見(jiàn)的feed列表下拉刷新并不相似.
由于是feed, 所以是很多數(shù)據(jù), 需要一個(gè)長(zhǎng)列表來(lái)顯示數(shù)據(jù), 就需要用到List
List里需要使用ListItem
像是iOS和Android中, ListView都是通過(guò)delegate回調(diào), 來(lái)設(shè)置總共的數(shù)量, 然后有有一個(gè)繪制每個(gè)item的函數(shù).
但是ArkTs中不是, 他只能通過(guò) ForEach來(lái)循環(huán)繪制.
所以在List的第一個(gè)元素, 放置一個(gè)高度為X的TopView. 這個(gè)View, 就是 '下拉刷新' / '松開(kāi)刷新' 的提示組件
之后再用ForEach來(lái)循環(huán)遍歷其余View.
設(shè)置List的onScroll 方法, 通過(guò)該方法, 可以知道現(xiàn)在Y軸上的偏移量, 當(dāng)偏移小于0時(shí), 表示已經(jīng)下拉到極限, 出現(xiàn)了拉扯動(dòng)作, 此時(shí), 希望上方出現(xiàn) "下拉刷新" 的提示.
那就可以根據(jù)Y軸的偏移, 來(lái)讓頂部TopView的高度改變, 從0到50. 這樣, 在下拉的途中, 這個(gè)組件會(huì)逐步顯示出來(lái), 僅僅修改高度, 可能比較生硬, 再加上透明度, 就會(huì)好很多.
在下拉到一定程度后, 修改提示文字為 "松手刷新". 也只需要根據(jù)Y的偏移 小于多少后, 就替換文字內(nèi)容
在松手后, 需要將Text組件, 替換為L(zhǎng)oadingView, 并且高度維持在50.
這時(shí), 需要實(shí)現(xiàn) onTouch方法, 這個(gè)方法, 可以得到手勢(shì)抬起的事件, 當(dāng)抬起時(shí), 判斷Y的偏移是否達(dá)到要求, 當(dāng)松手時(shí), 超過(guò)了刷新閾值, 那就讓UI顯示為loadingview, 并且觸發(fā)加載回調(diào)函數(shù). 待回調(diào)函數(shù)執(zhí)行完畢后, 將TopView的高度設(shè)置為0
