HarmonyOS鸿蒙Next组件库@abner/refresh中，Listview组件的回调函数itemLayout中，参数类型为Object，如何区分类型？

HarmonyOS鸿蒙Next组件库@abner/refresh中，Listview组件的回调函数itemLayout中，参数类型为Object，如何区分类型？ 我需要在函数体里面用参数做条件渲染，但是获取不到他的类型

5 回复
  1. 可以直接在条件语句中使用JSON和as来作为类型转换，从而可以使用点语法获取想要的数据来做判断

cke_443.jpeg

  1. 如果担心JSON丢失数据会影响功能实现，可以直接修改参数类型

cke_778.jpeg

cke_1089.jpeg

更多关于HarmonyOS鸿蒙Next组件库@abner/refresh中，Listview组件的回调函数itemLayout中，参数类型为Object，如何区分类型？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以看看我这三种检验类型的方式

  1. 属性检查法
    通过判断对象是否存在特定属性来区分类型：
if ('specificKey' in yourObject) {
  // 处理类型A
} else if (yourObject.hasOwnProperty('anotherKey')) {
  // 处理类型B
}
  1. 类型守卫（Type Guards）
    使用自定义类型守卫函数：
function isTypeA(obj: any): obj is TypeA {
  return typeof obj.keyA === 'string';
}

if (isTypeA(yourObject)) {
  // 编译器自动推断为TypeA类型
}
  1. 联合类型标注
    在定义回调时明确可能接收的类型：
itemLayout(item: TypeA | TypeB) {
  if ('typeAProperty' in item) {
    // 处理TypeA
  } else {
    // 处理TypeB
  }
}

【问题背景】

  • 在使用 @abner/refresh 组件库的 Listview 组件时，其回调函数 itemLayout 的参数类型为 Object，需在函数体中通过该参数实现条件渲染，但无法获取参数具体类型，需解决类型区分问题。

【解决方案】

  1. 方案一：通过 JSON+as 实现类型转换
    在条件语句中使用 JSON 和类型断言 as 进行参数类型转换，转换后可通过 “点语法” 获取所需数据，进而完成条件判断。
interface TextItem {
  type: 'text',
  content: string,
  fontSize: number,
}

interface ImageItem {
  type: 'image',
  url: string,
  width: number,
  height: number,
}

import { Listview } from '[@abner](/user/abner)/refresh'; 

const handleItemLayout = (item: Object): { height: number; type: string } => {
  const normalizedItem = JSON.parse(JSON.stringify(item)) as TextItem | ImageItem;

  if (normalizedItem.type === 'text') {
    const textItem = normalizedItem as TextItem;
    console.log('文本项内容：', textItem.content); // 类型安全，无报错
    return { height: 60, type: 'text' };
  } else if (normalizedItem.type === 'image') {
    const imageItem = normalizedItem as ImageItem;
    console.log('图片项地址：', imageItem.url); // 类型安全，无报错
    return { height: imageItem.height, type: 'image' };
  }

  // 默认布局高度
  return { height: 50, type: 'default' };
};

Listview({
  itemLayout: handleItemLayout, // 绑定上述回调
  data: [], 
  itemRender: () => {}
});
  1. 方案二：直接修改参数类型
    若担心 JSON 处理过程中丢失数据、影响功能实现，可直接对 itemLayout 回调函数的参数类型进行修改，从根源解决类型获取问题。

在@abner/refresh组件的ListView中，itemLayout回调的Object参数可通过type字段区分类型。常见类型包括：‘header’、‘footer’、'item’等。具体类型值需查阅该组件库的官方文档说明，不同版本的组件库可能定义不同的类型标识。

在@abner/refresh的ListView组件的itemLayout回调中，参数类型为Object，可以通过以下方式区分类型：

  1. 使用hasOwnProperty检查对象属性：
itemLayout: (data: Object) => {
  if (data.hasOwnProperty('imageUrl')) {
    // 图片类型item
    return // 图片布局
  } else if (data.hasOwnProperty('videoUrl')) {
    // 视频类型item  
    return // 视频布局
  }
}
  1. 通过预定义的类型字段区分：
itemLayout: (data: Object) => {
  switch(data.itemType) {
    case 'IMAGE':
      return // 图片布局
    case 'VIDEO':
      return // 视频布局
    default:
      return // 默认布局
  }
}
  1. 检查特定属性值的存在性：
itemLayout: (data: Object) => {
  if (data.image) {
    // 处理图片数据
  } else if (data.text) {
    // 处理文本数据
  }
}
回到顶部