尝试用 ArkUI 做一个相册应用原创精华

丨张明亮丨

发布于 2021-12-15 08:41

浏览

4收藏

前言

今年的HDC华为开发者大会2021，华为又双叒推出新的声明式UI开发框架（ArkUI），咋说呢，学无止境啊，更新速度堪比坐火箭。虽然没能到发布的现场比较遗憾，但是这并不妨碍我们撸代码的热情。我也是第一时间更新IDE，使用新的开发框架尝试开发一款图库应用。先看效果：

尝试用 ArkUI 做一个相册应用-鸿蒙开发者社区

一、基本语法

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

@装饰器
struct 组件名 {
    build(){ 
        //一个根容器组件，比如：
        Flex (接口){
            //内容
        }.属性
        
        Tabs (接口){
            TabContent(接口) {
                //内容
            }
        }.属性
        
        List (接口){
            ListItem(接口) {
                //内容
            }
        }.属性
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

详细的内容可以参考官方文档：https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-general-ui-concepts-0000001215268053

目前支持的装饰器：

装饰器	装饰内容	说明
@Component	struct	结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。
@Entry	struct	组件被装饰后作为页面的入口，页面加载时将被渲染显示。
@State	基本数据类型，类，数组	修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。
@Prop	基本数据类型	修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。
@Link	基本数据类型，类，数组	父子组件之间的双向数据绑定。父组件的内部状态数据作为数据源。任何一方所做的修改都会反映给另一方。

二、实现一个菜单栏

尝试用 ArkUI 做一个相册应用-鸿蒙开发者社区

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

Tabs(
    { barPosition: BarPosition.End } //指定页签位置
) {
    TabContent() {
        Photo() //要实现的内容
    }.tabBar({
        icon: this.menuData[0].url,
        text: this.menuData[0].text
    })
        ... ...
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

不过也有点问题。第一个就是图一中的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")
        })
    })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

源数据：

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

菜单项：

@Builder MenuItem(url, text) {
    Column() {
        Image(url)
            .objectFit(ImageFit.Contain) // 保持长宽比缩小或放大，以便图像完全显示在显示边界内。
            .width('60%').height('60%')
            Text(text)
            .fontSize(14)
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

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

三、实现照片区域

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

  @State photoData: Array<any> = [
    {
      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") }]
    }
  ]
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

所以可以使用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})
                    })
                }
            }
        }
    })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

代码打包上传了，感兴趣的小伙伴，可以下载源码查看。时间有限，先体验这么多，有新的心得再来发帖和大家交流。
【#本文正在参与优质创作者激励#】

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

ArkUIdemo.zip 10.03M 145次下载

已于2021-12-17 10:55:50修改

1条回复

按时间正序

按时间倒序

红叶亦知秋

感谢亮哥带路体验新框架

2021-12-15 10:14:39

51CTO

51CTO博客

51CTO学堂

尝试用 ArkUI 做一个相册应用原创精华

前言

一、基本语法

二、实现一个菜单栏

三、实现照片区域

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

尝试用 ArkUI 做一个相册应用 原创 精华

前言

一、基本语法

二、实现一个菜单栏

三、实现照片区域

目录

订阅鸿蒙技术特刊，精选内容抢先看

尝试用 ArkUI 做一个相册应用原创精华