# MultiType

**Repository Path**: zhangjun93/MultiType

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 19
- **Created**: 2022-07-05
- **Last Updated**: 2022-07-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MultiType

## 简介
> 更轻松、更灵活地为 List 创建多种类型布局

## 效果展示
<img height="400" src="screenshot/效果展示1.jpg"/>  <img height="400" src="screenshot/效果展示2.jpg"/>  <img height="400" src="screenshot/效果展示3.jpg"/> 
<img height="400" src="screenshot/效果展示4.jpg"/> <img height="400" src="screenshot/效果展示5.jpg"/> 
<img height="400" src="screenshot/效果展示6.jpg"/>  <img height="400" src="screenshot/效果展示7.jpg"/>

## 下载安装
```shell
npm install @ohos/multitype --save
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。

## 使用说明

### MultiType引用及使用
```
import {MultiTypeAdapter} from '@ohos/multitype'

  //自定义item内容
  @Builder MyListItem(arr, index) {
    Column() {
      Text('title: ' + arr[index].id).fontSize(16).padding({ left: 15, right: 15, top: 15 })

    }.width('100%').alignItems((arr[index].itemType == 1) ? HorizontalAlign.Start : HorizontalAlign.End)
  }
  //页面中使用
  build() {
    Column() {
      ...
      MultiTypeAdapter({
        array: this.items,
        // @ts-ignore
        child: (arr, index) => {
          this.MyListItem(arr, index)
        }
      })
    }.height('94%').width('100%')
  }

```

## 接口说明
`MultiTypeAdapter({})`
参数1：array List的数据源
参数2：child Item的样式

## 兼容性
支持 OpenHarmony API version 8 及以上版本。

## 目录结构
````
|---- MultiType
|     |---- entry  # 示例代码文件夹
|     |---- multitype  # multiType库文件夹
|	    |----src
          |----main
              |----ets
                  |----components/MainPage
                      |----MultiTypeAdapter.ets #核心封装逻辑
|       |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法                    
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/MultiType/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-sig/MultiType/pulls) 。

## 开源协议
本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/MultiType/blob/master/LICENSE) ，请自由地享受和参与开源。