Vlayout布局扩展组件——提供一整套布局方案和布局间的组件复用 原创

发布于 2022-4-24 01:04
浏览
0收藏

一、前言
构建容器布局是创建视图的开始,因为要把鸡蛋放在篮子里,所以容器布局就是这个篮子。在创建视图开发过程中,复杂的布局构建是一件很头疼的事情,现有的容器布局过于简单,想实现复杂且好看的布局是一件繁琐的问题,但是,vlayout容器布局组件就很好的解决了这个问题。vlayout是基于OpenHarmony API version 8且通过eTS开发框架实现的自定义容器布局组件,使其能够处理列表、网格和其他布局在同一个视图中并且响应屏幕纵横比的复杂情况。vlayout组件提供了15个已定义好的容器布局,用户可以使用已设定好的容器布局组件,也可以在原有的基础上自定义容器布局组件。
二、环境搭建
1.使用eTS语言开发
(1)说明: 请使用DevEco Studio V3.0.0.900 Beta3及更高版本。
(2)为确保运行效果,本文以使用DevEco Studio V3.0.0.900 Beta3版本为例。
2.创建eTS工程
(1)打开DevEco Studio,点击File > New > Create Project,选择模板“Empty Ability”,点击Next进行下一步配置。
(2)进入配置工程界面,UI Syntax选择“eTS”,其他参数保持默认设置即可
3.下载安装
(1)参考安装教程:如何安装OpenHarmony npm包 https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md
(2)安装命令如下:npm install @ohos/vlayout --save
4.构建页面
(1)导入vlayout自定义容器组件:
Vlayout布局扩展组件——提供一整套布局方案和布局间的组件复用-开源基础软件社区
(2)创建对应容器组件对象并设置属性:
Vlayout布局扩展组件——提供一整套布局方案和布局间的组件复用-开源基础软件社区
(3)接口说明:
Vlayout布局扩展组件——提供一整套布局方案和布局间的组件复用-开源基础软件社区
(4)预览页面效果:在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。
(5)恭喜您已经使用eTS语言开发完成了一个vlayout布局。
(6)更多详细用法请参考开源库sample页面的实现 https://gitee.com/hihopeorg/vlayout
三、vlayout体验
vlayout组件提供了15个已定义好的容器布局,用户可以使用已设定好的容器布局组件,也可以在原有的基础上自定义容器布局组件。
1.STAGGEREDGRID_LAYOUT交错网格容器布局组件
Vlayout布局扩展组件——提供一整套布局方案和布局间的组件复用-开源基础软件社区
2.ONEN_LAYOUT一加多容器布局组件
Vlayout布局扩展组件——提供一整套布局方案和布局间的组件复用-开源基础软件社区
3.ONEN_EX_LAYOUT一加多拓展容器布局组件
Vlayout布局扩展组件——提供一整套布局方案和布局间的组件复用-开源基础软件社区

四、如何贡献到vlayout
体验完vlayout自定义容器布局组件,你是否也想为vlayout自定义容器布局组件锦上添花呢?
vlayout自定义容器组件基于OpenHarmony系统,开发路上会有很多志同道合的小伙伴与你同行,共同学习进步。我们所有的源码和指导文档都已经开源,大家可以通过以下路径进行获取:
vlayout源码:https://gitee.com/hihopeorg/vlayout
OpenHarmony的gitee仓链接:https://gitee.com/openharmony
经过以上路径的互通与共享,相信你可以做到:
·添加vlayout自定义容器布局到你的项目中;
·把你的好点子提给vlayout组件,甚至直接贡献代码;
·使用eTS语言重构或升级vlayout自定义容器布局组件;
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR 。期待作为开发者的你加入并为之贡献一臂之力。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
1
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐