华为推出新声明式 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更新@state menudata: 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: 发现 }
菜单项：
@builder menuitem(url, text) { column() { image(url) .objectfit(imagefit.contain) // 保持长宽比缩小或放大，以便图像完全显示在显示边界内。 .width('60%').height('60%') text(text) .fontsize(14) }}
总体来看 flex + foreach 效果的实现更自由一些，但是点击交互切换标签等操作都需要手动实现，不如组件化的 tabs 方便，或许以后会支持把。
实现照片区域
首先照片区域使用了下面的数据格式：
@state photodata: 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技术社区】欢迎添加关注！文章转载请注明出处。
恩智浦智能识别芯片荣获公安部“蓝盾奖”
Intel辟谣不会放弃10nm桌面版处理器
运放参数之交流电源抑制比详解
选购同轴馈线的误区盘点
uart寄存器详解
华为推出新声明式 UI 开发框架（ArkUI）
COB显示屏的定义、特点及发展前景详解
Diodes AP3302AQC4／4+ 27W Class A充电器解决方案详解
杰发科技MCU芯片应用新能源汽车的高端BMS系统设计方案
LitePoint开发了一种自动测试解决方案IQfactATM
大数据时代还需要数据治理吗？如何面向用户开展大数据治理？
国家电网：建设国际一流绿色智能电网 服务京津冀协同发展
基于自动光学检测系统（AOI）设计
万里红亮相华为开发者大会，繁荣OpenHarmony生态建设
mac地址可以随便改吗
物联网应用和软件应用的区别是什么
细说拉曼光谱仪原理
诺基亚推65英寸智能电视，配备智能调光、宽色域和杜比视界
能源转型以电网为核心构建多能互补新能源系统
SEW-MOVIPRO启动应用程序配置程序设置步骤
虽然没能到发布的现场比较遗憾，但是这并不妨碍我们撸代码的热情。我也是第一时间更新 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更新@state menudata: 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: 发现 }
菜单项：
@builder menuitem(url, text) { column() { image(url) .objectfit(imagefit.contain) // 保持长宽比缩小或放大，以便图像完全显示在显示边界内。 .width('60%').height('60%') text(text) .fontsize(14) }}
总体来看 flex + foreach 效果的实现更自由一些，但是点击交互切换标签等操作都需要手动实现，不如组件化的 tabs 方便，或许以后会支持把。
实现照片区域
首先照片区域使用了下面的数据格式：
@state photodata: 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技术社区】欢迎添加关注！文章转载请注明出处。
恩智浦智能识别芯片荣获公安部“蓝盾奖”
Intel辟谣不会放弃10nm桌面版处理器
运放参数之交流电源抑制比详解
选购同轴馈线的误区盘点
uart寄存器详解
华为推出新声明式 UI 开发框架（ArkUI）
COB显示屏的定义、特点及发展前景详解
Diodes AP3302AQC4／4+ 27W Class A充电器解决方案详解
杰发科技MCU芯片应用新能源汽车的高端BMS系统设计方案
LitePoint开发了一种自动测试解决方案IQfactATM
大数据时代还需要数据治理吗？如何面向用户开展大数据治理？
国家电网：建设国际一流绿色智能电网 服务京津冀协同发展
基于自动光学检测系统（AOI）设计
万里红亮相华为开发者大会，繁荣OpenHarmony生态建设
mac地址可以随便改吗
物联网应用和软件应用的区别是什么
细说拉曼光谱仪原理
诺基亚推65英寸智能电视，配备智能调光、宽色域和杜比视界
能源转型以电网为核心构建多能互补新能源系统
SEW-MOVIPRO启动应用程序配置程序设置步骤