吊椅厂家
免费服务热线

Free service

hotline

010-00000000
吊椅厂家
热门搜索:
技术资讯
当前位置:首页 > 技术资讯

华为推出新声明式 UI 开发框架(ArkUI)-电子发烧友网

发布时间:2022-04-25 15:28:01 阅读: 来源:吊椅厂家
华为推出新声明式 UI 开发框架(ArkUI)-电子发烧友网

今年的 HDC 华为开发者大会 2021,华为又双叒推出新的声明式 UI 开发框架(ArkUI),咋说呢,学无止境啊,更新速度堪比坐火箭。

虽然没能到发布的现场比较遗憾,但是这并不妨碍我们撸代码的热情。我也是第一时间更新 IDE,使用新的开发框架尝试开发一款图库应用。

先看效果:

基本语法

新的编译框架基于 TS,相比于之前的 JS 代码更简洁,将原来的 js、hml、css合并为了 *.ets 一个文件,而且更接近自然语义,学习成本很低。

基本是下面的写法:

@装饰器struct组件名{build(){//一个根容器组件,比如:Flex(接口){//内容}.属性Tabs(接口){TabContent(接口){//内容}}.属性List(接口){ListItem(接口){//内容}}.属性}}

详细的内容可以参考官方文档:

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

目前支持的装饰器:

实现一个菜单栏

上面 2 个图片使用了两种不同的实现方式,第一种使用的是 Tabs + TabContent,现成的组件实现也比较简单。

酒店旅游海报
代码如下:

Tabs({barPosition:BarPosition.End}//指定页签位置){TabContent(){Photo()//要实现的内容}.tabBar({icon:this.menuData[0].url,text:this.menuData[0].text})......}

不过也有点问题。第一个就是图一中的 icon 和 text 有点小,想把尺寸调大却发现各种不支持,只能是这样默认大小,不知道是不是我设置有问题,有知道怎么操作的大佬欢迎留言指点迷津。

第二个问题,按理说 TabContent 内容是一样的,可以使用 ForEach+数组,但是也没有成功。

最终 Tabs 实现的效果着实让人不太满意,所以我使用了 Flex 基本布局 + ForEach 重新实现了图二中的效果。 房地产海报
>

代码如下:

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")})})}

源数据:

//State:数据变化触发build(),实现UI更新@StatemenuData:Array=[{url:$r("app.media.0"),text:"照片"},{url:$r("app.media.1blue"),text:"相册"},{url:$r("app.media.2"),text:"时刻"},{url:$r("app.media.3"),text:"发现"}

菜单项:

@BuilderMenuItem(url,text){Column(){Image(url).objectFit(ImageFit.Contain)//保持长宽比缩小或放大,以便图像完全显示在显示边界内。.width('60%').height('60%')Text(text).fontSize(14)}}

总体来看 Flex + ForEach 效果的实现更自由一些,但是点击交互切换标签等操作都需要手动实现,不如组件化的 Tabs 方便,或许以后会支持把。

实现照片区域

首先照片区域使用了下面的数据格式:

@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 循环嵌套的方式,只需要简单的代码,就可以实现照片列表的效果。

//照片区List(){ForEach(this.photoData,(item)=>{ListIte餐饮美食海报
m(){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

原文标题:在HarmonyOS上做一个相册应用

文章出处:【微信公众号:HarmonyOS技术社区】欢迎添加关注!文章转载请注明出处。

审核编辑:彭菁