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

一、前言
构建容器布局是创建视图的开始，因为要把鸡蛋放在篮子里，所以容器布局就是这个篮子。在创建视图开发过程中，复杂的布局构建是一件很头疼的事情，现有的容器布局过于简单，想实现复杂且好看的布局是一件繁琐的问题，但是，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自定义容器组件：

(2)创建对应容器组件对象并设置属性：

(3)接口说明：

(4)预览页面效果：在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。
(5)恭喜您已经使用eTS语言开发完成了一个vlayout布局。
(6)更多详细用法请参考开源库sample页面的实现 https://gitee.com/hihopeorg/vlayout
三、vlayout体验
vlayout组件提供了15个已定义好的容器布局，用户可以使用已设定好的容器布局组件，也可以在原有的基础上自定义容器布局组件。
1.STAGGEREDGRID_LAYOUT交错网格容器布局组件

2.ONEN_LAYOUT一加多容器布局组件

3.ONEN_EX_LAYOUT一加多拓展容器布局组件

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