# MultiType

**Repository Path**: openharmony-sig/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**: 5
- **Forks**: 19
- **Created**: 2022-04-16
- **Last Updated**: 2025-05-07

## 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
ohpm install @ohos/multitype 
```
OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md)

## 使用说明

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

  class itemsType {
  itemType: number = 0
  id: number = 0
  }

  //自定义item内容
  @Builder MyListItem(arr: itemsType[], index: number) {
    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,
        child: (arr: itemsType[], index: number) => {
          this.MyListItem(arr, index)
        }
      })
    }.height('94%').width('100%')
  }

```

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

## 约束与限制

在下述版本验证通过：

- DevEco Studio 版本： 4.1 Canary(4.1.3.317)

- OpenHarmony SDK:API11 (4.1.0.36)

## 目录结构
````
|---- MultiType
|     |---- entry  # 示例代码文件夹
|     |---- library  # multiType库文件夹
|	    |----src
          |----main
              |----ets
                  |----components/MainPage
                      |----MultiTypeAdapter.ets #核心封装逻辑
|       |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法       
|     |---- README_zh.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) ，请自由地享受和参与开源。