【OpenHarmony】 鸿蒙 UI开发之MultiType

简介

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

效果展示

下载安装

bash 复制代码
ohpm install @ohos/multitype 

DD一下: 鸿蒙开发各类文档,可关注公众号<程序猿百晓生>获取。

erlang 复制代码
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案) 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

使用说明

MultiType引用及使用

less 复制代码
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)

目录结构

lua 复制代码
|---- MultiType
|     |---- entry  # 示例代码文件夹
|     |---- library  # multiType库文件夹
|	    |----src
          |----main
              |----ets
                  |----components/MainPage
                      |----MultiTypeAdapter.ets #核心封装逻辑
|       |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法       
|     |---- README_zh.md  # 安装使用方法              
相关推荐
祥睿夫子3 小时前
零基础搞定 ArkTS 类与对象!保姆级教程:定义→创建→测试全流程 + 代码示例
harmonyos
程序员潘Sir5 小时前
HarmonyOS实现快递APP自动识别地址
harmonyos·鸿蒙
萌虎不虎5 小时前
【鸿蒙(openHarmony)自定义音频播放器的开发使用说明】
华为·音视频·harmonyos
李洋-蛟龙腾飞公司5 小时前
HarmonyOSAI编程万能卡片生成(一)
华为·ai编程·harmonyos
HarmonyOS_SDK7 小时前
打破场景边界,支付宝联合实况窗提供全新出行服务体验
harmonyos
安卓开发者8 小时前
鸿蒙NEXT应用数据持久化全面解析:从用户首选项到分布式数据库
数据库·分布式·harmonyos
森之鸟8 小时前
开发中使用——鸿蒙播放本地mp3文件
华为·harmonyos
前端世界9 小时前
HarmonyOS 数据处理性能优化:算法 + 异步 + 分布式实战
算法·性能优化·harmonyos
HarmonyOS小助手11 小时前
【案例+1】HarmonyOS官方模板优秀案例 第7期:金融理财 · 记账应用
harmonyos·鸿蒙·鸿蒙生态