了解更多请访问：鸿蒙科技社区https://harmonyos.51cto.com怎么说学无止境，更新速度堪比火箭。虽然不能亲临发布现场有些遗憾，但这并不妨碍我们编码的热情。我也第一时间更新了IDE，使用新的开发框架尝试开发一个图库应用。先看效果：1.基本语法新的编译框架是基于TS的，比之前的JS代码更加简洁。将原来的js、hml、css合并为一个*.ets文件，更接近自然语义，学习成本非常低。低的。基本上是这样写的：@decoratorstructcomponentname{build(){//一个根容器组件，如：Flex(interface){//content}。PropertyTabs(interface){TabContent(interface){//content}}.AttributeList(interface){ListItem(interface){//content}}.Attribute}}详细内容参考官方文档：https：//developer.harmonyos.com/cn/docs/documentation/doc-references/ts-general-ui-concepts-0000001215268053目前支持的装饰器：2.菜单栏上的两张图片分别使用两种不同的实现方式实现。第一种使用Tabs+TabContent，现成的组件也实现了。比较简单，代码如下：Tabs({barPosition:BarPosition.End}//指定tab位置){TabContent(){Photo()//要实现的内容}.tabBar({icon:this.menuData[0].url,text:this.menuData[0].text})......}但是有一些问题。第一个是图1中的图标和文字有点小。我想增加尺寸，但发现不支持。它只能是默认大小。不知道是不是我的设置有问题。欢迎任何知道如何操作的人。留言引导迷宫。第二个问题，按理说TabContent的内容是一样的，可以用ForEach+数组，但是没有成功。最后Tabs实现的效果实在不尽如人意，于是用Flex基础布局+ForEach重新实现了图2的效果，代码如下：Flex({direction:FlexDirection.Row,//主轴:horizo??ntallayoutalignItems:ItemAlign.Center,//主轴:justifyContent:FlexAlign.SpaceEvenly}){ForEach(this.menuData,(item)=>{Column(){//列方向布局容器this.MenuItem(item.url,item.text)}.onClick(()=>{console.info("memememe")})})}Sourcedata://State:数据变化触发build()实现UI更新@StatemenuData:Array<任何>=[{url:$r("app.media.0"),text:"photo"},{url:$r("app.media.1blue"),text:"album"},{url:$r("app.media.2"),text:"moment"},{url:$r("app.media.3"),text:"Discovery"}菜单项：@BuilderMenuItem(url,text){Column(){Image(url).objectFit(ImageFit.Contain)//缩小或放大纵横比，使图像完全显示在显示边界内。.width('60%').height('60%')Text(text).fontSize(14)}}总体来说Flex+ForEach效果的实现比较自由，但是手动操作比如点击交互切换labels是必需的，实现起来不如组件化的Tabs方便，以后可能会支持。3.实现照片区首先，照片区使用如下数据格式：@StatephotoData:Array
