基于HarmonyOS ArkUI 3.0 框架,瀑布式显示HDC2021图片 原创 精华
一, 前言
在介绍之前,虽然上篇 基于HarmonyOS ArkUI 3.0 框架,我成功开发了流式布局网络语 吐槽过了, 再吐槽一下为什么文档Ets组件里没有文本输入框,这么基础的组件都不先提供的,好的当时在HDC大会体验Ets实例时,见到有用输入框,名叫TextInput,在开发工具是没有提示的,然后我也尝试用它来为我的Demo提供输入,然而发现个问题,当我把TextInput组件里的text属于绑定@State 定义变量时,每次在文本框输入内容,点击按钮,清空变量值,这时文本输入框也清空了,但当我再次输入内容时,输入文本框会追加上次的内容,估计是因为TextInput有这个Bug,所以还没有在文档上显示出来。这里显示的瀑布式布局效果,我也是在HDC大会上,印象里见到过这样的效果,但现在已经记不清楚在哪里看到过了,然后以为文档里有实例或组件说明,找了一遍, 没有找到,然后就在网上科普了一下瀑布式布局原理,道理都懂了,由于前端太菜了,没有在eTS上按照原理实现, 然后就想到了用Flex布局的FlexDirection.Column, 再加上高度设备,效果也出来了,但觉得不是真正的瀑布式布局,我想下来官网文档开放布局了,一行代码就可以有瀑布式布局了,目前先用着自己写的效果了.
简单介绍一下本文的实现效果,在文本输入框输入图片名称, 模糊搜索出符合条件的图片,点击搜索按钮,把符合条件图片添加到下面瀑布式布局的组件里,图片以x、y轴缩放从0.5变化到1,透明度从0到1 显示出来,点击随机删除按钮时,从下面图片随机删除一个,并且以沿y轴旋转360度消失。
二, 实现效果
开发环境效果: https://www.bilibili.com/video/BV1JQ4y1Q7z2/
远程模拟器效果: https://www.bilibili.com/video/BV1uq4y1R7vB/
三, 创建工程
在这当作你已经安装好最新版本DevEco-Studio开发工具, 点击File -> New -> New Project… 弹出Create HarmonyOS Project窗口, 这里我选择空白eTS模板创建, 下来就跟着一起玩转HarmonyOS ArkUI 3.0 框架声明式开发吧.
四, 界面开发
界面有三个组件组合而成,文本输入框和搜索按钮组合成一个自定义组件, 历史记录和随机删除按钮组合成一个自定义组件,滚动组件和多个图片组件组合成一个自定义组件,同时还有Model结构, 初始化数据模型, 下面我们分别从上到下来介绍自定义组件:
实现组件内转场动效,通过点击搜索按钮或随机删除按钮来控制图片组件的查找和移除,呈现容器组件子组件过滤和移除时的动效。
这里用到组件转场动画,简单说一下组件转场主要通过transition属性方法配置转场参数,在组件搜索和移除时会执行过渡动效,需要配合animteTo才能生效。动效时长、曲线、延时跟随animateTo中的配置。
- 文本输入框和搜索按钮组合,在新增按钮的onClick事件中添加animateTo方法,来使下面图片子组件动效生效
- 历史记录和随机删除按钮组合
- 滚动组件和多个图片组件组合成, 给图片组件添加两个transition属性,分别用于定义组件的添加动效和移除动效, 同时为实现瀑布式布局,设置好每张图片高度.
- 数据Model
- 初始化数据方法
介绍就到此了,声明式开发,是不是简洁了很多,大家一起撸起来吧。
前排追更狼哥文章
前排追更狼哥文章
早上新鲜出炉的呀,前排追更狼哥文章。
ets新的语言是不是给不会js和java语言的小伙伴一个新的开始呢?
你们现在开发用DES几呢?因为在开始项目,所以怕用最新的不稳定哦。
必须要安装最新DevEco 3.0 才能使用eTS来开发,现在eTS开发文档慢慢完善中,有空可以先做些Demo来学习学习过度一下。
还是ts的函数式编程舒服
华为为啥要推ets新语言呢?搞不懂。完善好java/js ui不就好了,毕竟第三方框架多。
话说使用方舟编译器,速度提升了不少,一切都是为了速度,编译快,运行快,体验快,这都是我们学习的动力
是的,对于CSS不算很厉害的,使用eTS后,多看文档组件属性,函数,就可以做出效果不错的应用
请问一下eTS开发文档地址在哪? 网上搜了一下,没搜索到。
https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-framework-directory-0000001111581264
和JS API在一起