0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

华为推出新声明式 UI 开发框架(ArkUI)

OpenHarmony技术社区 来源:HarmonyOS技术社区 作者:HarmonyOS技术社区 2022-01-04 13:39 次阅读

今年的 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

目前支持的装饰器:

d1614852-68b8-11ec-b2e9-dac502259ad0.png

实现一个菜单栏

上面 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)=>{
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

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

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

审核编辑:彭菁

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 华为
    +关注

    关注

    215

    文章

    34292

    浏览量

    251136
  • 编译
    +关注

    关注

    0

    文章

    652

    浏览量

    32799
  • 开发者
    +关注

    关注

    1

    文章

    553

    浏览量

    16980

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

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

收藏 人收藏

    评论

    相关推荐

    HDC技术分论坛:HarmonyOS新一代UI框架的全面解读

    作者:yuzhiqiang,UI编程框架首席技术专家在Harmony 3.0.0开发者预览版中,包含了新一代的声明
    发表于 10-26 18:48

    HDC技术分论坛:HarmonyOS新一代UI框架的全面解读

    作者:yuzhiqiang,UI编程框架首席技术专家在Harmony 3.0.0开发者预览版中,包含了新一代的声明
    发表于 11-22 16:51

    HarmonyOS应用开发-ArkUI声明UI工程体验与分享

    声明UI工程体验1. 创建工程说明:声明UI工程目前仅在API7才能使用 选择 选择
    发表于 12-08 10:22

    课程预告丨12月15日官方直播带你领略ArkUI声明开发范式之美

    方舟开发框架ArkUI)的声明开发范式有什么优势?Java/JS/eTS(extended
    发表于 12-10 17:52

    4天带你上手HarmonyOS ArkUI开发

    本次HarmonyOS ArkUI入门训练营课程--健康生活实战篇,手把手教大家如何制作一个合理膳食的APP前端Demo!课程实战样例通过ArkUI声明
    发表于 09-09 14:44

    ArkUI框架,更懂程序员的UI信息语法

    搜索了一下ArkUI有什么优势。发现很重要的一个原因:ArkUI使用了声明UI开发
    发表于 12-14 11:23

    ArkUI,更高效的框架设计

    了一整套完整的分层机制。接下来我们依次分层为大家介绍。 ArkUI框架的“前驱”——【前端层】 前端层 架构的第一层【前端层】又称【声明UI
    发表于 12-21 10:26

    4天带你上手HarmonyOS ArkUI开发——《HarmonyOS ArkUI入门训练营之健康生活实战》

    框架及组件用法,完成一款健康饮食应用的界面开发,结合DevEco Studio提供的多设备预览能力,体验ArkUI框架带来的一次开发多设备适
    发表于 01-05 11:49

    ArkUI新能力,助力应用开发更便捷

    ArkUI是一套构建分布应用的声明UI开发框架
    发表于 02-15 11:40

    OpenHarmony应用开发-ArkUI方舟开发框架简析

    方舟开发框架(简称ArkUI)为OpenHarmony应用的UI开发提供了完整的基础设施,包括简洁的UI
    发表于 04-23 09:35

    HarmonyOS测试技术与实战-华为ArkUI开发框架和场景测试

    HDC 2021华为开发者大会HarmonyOS测试技术与实战-华为ArkUI开发框架和场景测试
    的头像 发表于 10-23 15:16 1866次阅读
    HarmonyOS测试技术与实战-<b class='flag-5'>华为</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b><b class='flag-5'>框架</b>和场景测试

    全面解读HarmonyOS新一代UI框架

    作者:yuzhiqiang,UI编程框架首席技术专家 在Harmony 3.0.0开发者预览版中,包含了新一代的声明
    的头像 发表于 10-29 10:21 2641次阅读
    全面解读HarmonyOS新一代<b class='flag-5'>UI</b><b class='flag-5'>框架</b>

    ArkUI,更高效的框架设计

    看出,ArkUI的设计理念是在端到端整条技术路径设计上建立了一整套完整的分层机制。接下来我们依次分层为大家介绍。 ArkUI框架的“前驱”——【前端层】 前端层 架构的第一层【前端层】又称【
    的头像 发表于 12-21 09:15 1538次阅读

    ArkUI新能力,助力应用开发更便捷

    作者:niulihua,华为ArkUI技术专家;wanglei,华为ArkUI技术专家 ArkUI是一套构建分布
    的头像 发表于 02-15 16:35 839次阅读

    鸿蒙ArkUI:【从代码到UI显示的整体渲染流程】

    方舟开发框架(简称ArkUI)是鸿蒙开发UI框架,提供如下两种
    的头像 发表于 05-13 16:06 794次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>:【从代码到<b class='flag-5'>UI</b>显示的整体渲染流程】