華為推出新聲明式 UI 開發(fā)框架（ArkUI）

今年的 HDC 華為開發(fā)者大會(huì) 2021，華為又雙叒推出新的聲明式 UI 開發(fā)框架（ArkUI），咋說呢，學(xué)無止境啊，更新速度堪比坐火箭。

雖然沒能到發(fā)布的現(xiàn)場(chǎng)比較遺憾，但是這并不妨礙我們擼代碼的熱情。我也是第一時(shí)間更新 IDE，使用新的開發(fā)框架嘗試開發(fā)一款圖庫(kù)應(yīng)用。

先看效果：

基本語(yǔ)法

新的編譯框架基于 TS，相比于之前的 JS 代碼更簡(jiǎn)潔，將原來的 js、hml、css合并為了 *.ets 一個(gè)文件，而且更接近自然語(yǔ)義，學(xué)習(xí)成本很低。

基本是下面的寫法：

@裝飾器
struct組件名{
build(){
//一個(gè)根容器組件，比如：
Flex(接口){
//內(nèi)容
}.屬性

Tabs(接口){
TabContent(接口){
//內(nèi)容
}
}.屬性

List(接口){
ListItem(接口){
//內(nèi)容
}
}.屬性
}
}

詳細(xì)的內(nèi)容可以參考官方文檔：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-general-ui-concepts-0000001215268053

目前支持的裝飾器：

實(shí)現(xiàn)一個(gè)菜單欄

上面 2 個(gè)圖片使用了兩種不同的實(shí)現(xiàn)方式，第一種使用的是 Tabs + TabContent，現(xiàn)成的組件實(shí)現(xiàn)也比較簡(jiǎn)單。

代碼如下：

Tabs(
{barPosition:BarPosition.End}//指定頁(yè)簽位置
){
TabContent(){
Photo()//要實(shí)現(xiàn)的內(nèi)容
}.tabBar({
icon:this.menuData[0].url,
text:this.menuData[0].text
})
......
}

不過也有點(diǎn)問題。第一個(gè)就是圖一中的 icon 和 text 有點(diǎn)小，想把尺寸調(diào)大卻發(fā)現(xiàn)各種不支持，只能是這樣默認(rèn)大小，不知道是不是我設(shè)置有問題，有知道怎么操作的大佬歡迎留言指點(diǎn)迷津。

第二個(gè)問題，按理說 TabContent 內(nèi)容是一樣的，可以使用 ForEach+數(shù)組，但是也沒有成功。

最終 Tabs 實(shí)現(xiàn)的效果著實(shí)讓人不太滿意，所以我使用了 Flex 基本布局 + ForEach 重新實(shí)現(xiàn)了圖二中的效果。

代碼如下：

Flex({
direction:FlexDirection.Row,//主軸：橫向布局
alignItems:ItemAlign.Center,//主軸：
justifyContent:FlexAlign.SpaceEvenly
}){
ForEach(this.menuData,(item)=>{
Column(){//列方向布局容器
this.MenuItem(item.url,item.text)
}
.onClick(()=>{
console.info("memememe")
})
})
}

源數(shù)據(jù)：

//State:數(shù)據(jù)變化觸發(fā)build()，實(shí)現(xiàn)UI更新
@StatemenuData:Array=[
{url:$r("app.media.0"),text:"照片"},
{url:$r("app.media.1blue"),text:"相冊(cè)"},
{url:$r("app.media.2"),text:"時(shí)刻"},
{url:$r("app.media.3"),text:"發(fā)現(xiàn)"}

菜單項(xiàng)：

@BuilderMenuItem(url,text){
Column(){
Image(url)
.objectFit(ImageFit.Contain)//保持長(zhǎng)寬比縮小或放大，以便圖像完全顯示在顯示邊界內(nèi)。
.width('60%').height('60%')
Text(text)
.fontSize(14)
}
}

總體來看 Flex + ForEach 效果的實(shí)現(xiàn)更自由一些，但是點(diǎn)擊交互切換標(biāo)簽等操作都需要手動(dòng)實(shí)現(xiàn)，不如組件化的 Tabs 方便，或許以后會(huì)支持把。

實(shí)現(xiàn)照片區(qū)域

首先照片區(qū)域使用了下面的數(shù)據(jù)格式：

@StatephotoData:Array=[
{
date:"昨天",
photos:[{src:$r("app.media.today1")},{src:$r("app.media.today2")},{src:$r("app.media.today3")}]
},
{
date:"2021年10月27日",
photos:[{src:$r("app.media.today4")},{src:$r("app.media.today5")},{src:$r("app.media.today6")},{
src:$r("app.media.today7")
}]
},
{
date:"2021年10月26日",
photos:[{src:$r("app.media.today8")}]
},
{
date:"2021年10月25日",
photos:[{src:$r("app.media.today9")},{src:$r("app.media.today11")}]
},
{
date:"2021年10月24日",
photos:[{src:$r("app.media.today10")}]
}
,
{
date:"2021年10月23日",
photos:[{src:$r("app.media.today1")}]
}
]

所以可以使用 ForEach 循環(huán)嵌套的方式，只需要簡(jiǎn)單的代碼，就可以實(shí)現(xiàn)照片列表的效果。

//照片區(qū)
List(){
ForEach(this.photoData,(item)=>{
ListItem(){
Flex({direction:FlexDirection.Column}){
Text(item.date).fontSize(18).margin({top:20,left:15,bottom:5})
Flex({direction:FlexDirection.Row}){
ForEach(item.photos,(item)=>{
Image(item.src).objectFit(ImageFit.Cover).width(80).height(80).margin({right:2})
})
}
}
}
})

代碼打包上傳了，感興趣的小伙伴，可以下載源碼查看：

https://harmonyos.51cto.com/posts/9634

原文標(biāo)題：在HarmonyOS上做一個(gè)相冊(cè)應(yīng)用

文章出處：【微信公眾號(hào)：HarmonyOS技術(shù)社區(qū)】歡迎添加關(guān)注！文章轉(zhuǎn)載請(qǐng)注明出處。