【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  # 安装使用方法              
相关推荐
ChinaDragonDreamer3 小时前
HarmonyOS:固定样式弹出框
harmonyos·鸿蒙
Devil枫10 小时前
HarmonyOS 广告服务 ArkTS 实现指南:从激励广告到多形式适配
华为·harmonyos
猫林老师13 小时前
HarmonyOS 5 性能优化全攻略:从启动加速到内存管理
华为·性能优化·harmonyos
猫林老师14 小时前
HarmonyOS 5 手势系统与高级交互动效开发实战
华为·交互·harmonyos
chensi_0715 小时前
uniapp x 鸿蒙开发之调试证书签名配置
服务器·uni-app·harmonyos
搬砖的小码农_Sky17 小时前
鸿蒙(HarmonyOS)应用开发技能栈
harmonyos·鸿蒙系统
D.....l19 小时前
Hi3861 OpenHarmony鸿蒙开发(嵌入式方向) (一)
华为·harmonyos
无风听海1 天前
HarmonyOS之 @Provide 装饰器实现跨组件双向状态同步
华为·harmonyos
安卓开发者1 天前
鸿蒙NEXT传统蓝牙开发指南:从基础到实战的完整解决方案
harmonyos
代码79722 天前
使用会话存储时,处理存储信息加密问题
深度学习·算法·自动化·散列表·harmonyos