鸿蒙开发 —— UI开发之MultiType

📑往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

✒️ 鸿蒙（HarmonyOS）北向开发知识点记录~

✒️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~

✒️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✒️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✒️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✒️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✒️ 记录一场鸿蒙开发岗位面试经历~

✒️ 持续更新中……

---

简介

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

效果展示

下载安装

ohpm install @ohos/multitype 

使用说明

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  # 安装使用方法