HarmonyOS RcList组件：高性能可定制列表开发实践

1. 项目概述

大家好，我是若城，一名专注于HarmonyOS生态开发的工程师。今天要和大家分享的是我们团队正在开发的Rchoui三方库中的核心组件之一——RcList。这个组件从设计到实现历时半年，期间我们反复打磨了它的视觉表现和交互细节。

RcList是一个高度可定制的列表组件，主要面向HarmonyOS应用开发者。它解决了原生列表组件在视觉表现力上的不足，通过三套视觉系统（缩略图、角标、额外图标）的有机组合，让开发者能够快速构建出专业级的列表界面。在实际项目中，我们发现很多团队都需要花费大量时间重复实现这些基础功能，这正是我们开发RcList的初衷。

2. 核心设计思路

2.1 架构设计理念

RcList的设计遵循了"高内聚、低耦合"的原则。我们将列表功能划分为三个独立的子系统：

1. 缩略图系统：处理左侧图片展示，支持多种尺寸和圆角样式
2. 角标系统：实现右上角的提示标记，支持数字、文字和点状三种形态
3. 额外图标系统：管理右侧的功能图标，兼容矢量图标和本地图片

这种模块化设计使得每个系统都可以独立使用，也可以自由组合。在性能优化方面，我们采用了轻量级的渲染策略，确保即使是在低端设备上也能流畅运行。

2.2 尺寸计算机制

2.2.1 单位统一处理

在HarmonyOS开发中，尺寸单位处理是个常见痛点。RcList通过getSizeByUnit工具函数统一处理了这个问题：

typescript复制export function getSizeByUnit(size: string | number): string | number {
  if (typeof size === 'number') {
    return size  // 数字直接返回（单位为vp）
  }
  return size    // 字符串直接返回（支持'100%'、'50vp'等）
}

这个设计考虑到了实际开发中的两种常见场景：

• 固定尺寸：直接使用数字（如100），默认以vp为单位
• 响应式尺寸：使用字符串（如'50%'），可以适配不同屏幕尺寸

2.2.2 圆角计算优化

对于缩略图的圆角处理，我们做了特殊优化。当设置rcListItemThumbRadi