# vlayout

**Repository Path**: wangyingjun01/vlayout

## Basic Information

- **Project Name**: vlayout
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 21
- **Created**: 2022-04-18
- **Last Updated**: 2022-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vlayout

## 简介

>能够处理列表、网格和其他布局在同一个视图的复杂情况，用户可以使用已设定好的容器布局组件，也可以在原有的基础上自定义容器布局组件。

## 效果展示：

1. BANNER_LAYOUT滑动容器布局组件

   <img src="./gifs/BANNER_LAYOUT.gif"/>

2. COLUMN_LAYOUT横向容器布局组件

   <img src="./gifs/COLUMN_LAYOUT.gif"/>

3. DEFAULT_LAYOUT默认容器布局组件

   <img src="./gifs/DEFAULT_LAYOUT.gif"/>

4. FIX_LAYOUT固定容器布局组件

   <img src="./gifs/FIX_LAYOUT.gif"/>

5. FLOAT_LAYOUT浮动容器布局组件

   <img src="./gifs/FLOAT_LAYOUT.gif"/>

6. GRID_LAYOUT复杂网格容器布局组件

   <img src="./gifs/GRID_LAYOUT.gif"/>

7. LINEAR_LAYOUT列表容器布局组件

   <img src="./gifs/LINEAR_LAYOUT.gif"/>

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

   <img src="./gifs/ONEN_LAYOUT.gif"/>

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

   <img src="./gifs/ONEN_EX_LAYOUT.gif"/>

10. RANGEGRID_LAYOUT区域网格容器布局组件

    <img src="./gifs/RANGEGRID_LAYOUT.gif"/>

11. SCROLL_FIX_LAYOUT滚动固定容器布局组件

    <img src="./gifs/SCROLL_FIX_LAYOUT.gif"/>

12. SINGLE_LAYOUT单项容器布局组件

    <img src="./gifs/SINGLE_LAYOUT.gif"/>

13. STAGGEREDGRID_LAYOUT交错网格容器布局组件

    <img src="./gifs/STAGGEREDGRID_LAYOUT.gif"/>

14. STICKY_LAYOUT吸顶容器布局组件

    <img src="./gifs/STICKY_LAYOUT.gif"/>

15. 跳转item项位置

    <img src="./gifs/JUMP.gif"/>

## 下载安装

1. 参考安装教程 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md)

2. 安装命令如下：

   ```
   npm install @ohos/vlayout --save
   ```

## 使用说明

1.导入自定义容器组件(路径根据存放位置决定)

 ```
import {ONEN_LAYOUT} from '@ohos/vlayout'
 ```

2.创建对应容器组件对象并设置属性

 ```
build() {
	List(){
		ListItem(){
			ONEN_LAYOUT({
            layoutColor: '#ff876384',
            layoutContent: [
              { layoutText: 11, layoutWidth: '100%', outerRowsHeight: 1 },
              { layoutText: 12, layoutWidth: '100%', outerRowsHeight: 1, innerColsWeight: 1 },
              { layoutText: 13, layoutWidth: '100%', innerColsWeight: 1 },
            ],
            layoutHeight: 120,
            layoutAspectRatio: 4,
            topPadding: 5,
            rightPadding: 5,
            bottomPadding: 5,
            leftPadding: 5,
            topMargin: 5,
            rightMargin: 5,
            bottomMargin: 5,
            leftMargin: 5,
          })
		}
	}
}
 ```

3.更多详细用法请参考开源库sample页面的实现。

#### 接口说明

| 属性                         | 是否必填 | 说明（不同布局组件存在不同的属性，此处列出共有属性） |
| ---------------------------- | -------- | ---------------------------------------------------- |
| layoutColor: Color \| string | 是       | 布局颜色，默认为0xAAAAAA                             |
| innerColor: Color \| string  | 是       | 内部颜色，默认为0x22EEEEEE                           |
| layoutHeight: number         | 是       | 布局高度，当布局纵横比为0时有效                      |
| layoutAspectRatio: number    | 是       | 布局纵横比，当它为0时布局高度有效                    |
| layoutContent: any[]         | 是       | 内容元素                                             |
| topMargin: number            | 否       | 布局上外边距，默认为0                                |
| rightMargin: number          | 否       | 布局右外边距，默认为0                                |
| bottomMargin: number         | 否       | 布局下外边距，默认为0                                |
| leftMargin: number           | 否       | 布局左外边距，默认为0                                |
| topPadding: number           | 否       | 布局上内边距，默认为0                                |
| rightPadding: number         | 否       | 布局右内边距，默认为0                                |
| bottomPadding: number        | 否       | 布局下内边距，默认为0                                |
| leftPadding: number          | 否       | 布局左内边距，默认为0                                |

## 兼容性

支持 OpenHarmony API version 8 及以上版本。

## 目录结构

```
|---- vlayout  
|     |---- entry  # 示例代码文件夹
|     |---- vlayout  # vlayout库文件夹
|           |---- index.ets  # 对外接口
|           |---- src
|		|---- main
|			|---- ets
|				|---- components
|					|---- common  # 组件文件夹
|						|---- BannerLayoutHelper.ets  # 滑动容器布局组件
|						|---- ColumnLayoutHelper.ets  # 横向容器布局组件
|						|---- DefaultLayoutHelper.ets  # 默认容器布局组件
|						|---- FixLayoutHelper.ets  # 固定容器布局组件
|						|---- FloatLayoutHelper.ets  # 浮动容器布局组件
|						|---- GridLayoutHelper.ets  # 复杂网格容器布局组件
|						|---- JumpBar.ets  # 跳转功能栏
|						|---- LinearLayoutHelper.ets  # 列表容器布局组件
|						|---- OnePlusNLayoutHelper.ets  # 一加多容器布局组件
|						|---- OnePlusNLayoutHelperEx.ets  # 一加多拓展容器布局组件
|						|---- RangeGridLayoutHelper.ets  # 区域网格容器布局组件
|						|---- ScrollFixLayoutHelper.ets  # 滚动固定容器布局组件
|						|---- SingleLayoutHelper.ets  # 单项容器布局组件
|						|---- StaggeredGridLayoutHelper.ets  # 交错网格容器布局组件
|						|---- StickyLayoutHelper.ets  # 吸顶容器布局组件
|     |---- README.MD  # 安装使用方法                    
```

## 贡献代码

使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/vlayout/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/vlayout/pulls) 。

## 开源协议

本项目基于 [Apache License 2.0](https://gitee.com/hihopeorg/vlayout/blob/master/LICENSE) ，请自由地享受和参与开源。