一、缩略图系统设计
1.1 缩略图渲染流程
RcListItem 的缩略图由 renderRcListItemThumb() 负责渲染,该方法使用 Stack 容器将图片和角标叠加在一起:
@Builder renderRcListItemThumb() {
if (this.rcListItemThumb) {
Stack() {
// 底层:图片本体
Image(this.rcListItemThumb)
.width(this.getRcListItemThumbSize())
.height(this.getRcListItemThumbSize())
.borderRadius(getSizeByUnit(this.rcListItemThumbRadius))
.objectFit(ImageFit.Cover)
// 上层:角标(条件渲染)
if (this.rcListItemShowBadge && this.rcListItemBadge) {
// ... 角标渲染逻辑
}
}.alignContent(Alignment.TopEnd)
}
}
设计要点:
- 图片使用
ImageFit.Cover填充模式,确保任何尺寸的图片都不会被拉伸变形 Stack.alignContent(Alignment.TopEnd)将角标定位在右上角margin({ right: 12 })与主体内容保持间距
1.2 尺寸映射方法
private getRcListItemThumbSize(): number {
// 直接传数字:原样返回
if (typeof this.rcListItemThumbSize === 'number') {
return this.rcListItemThumbSize
}
// 传数字字符串(如 '50'):转换为数字
if (typeof this.rcListItemThumbSize === 'string' && !isNaN(Number(this.rcListItemThumbSize))) {
return Number(this.rcListItemThumbSize)
}
// 预设枚举值
switch (this.rcListItemThumbSize) {
case 'small': return 40
case 'large': return 80
case 'medium': default: return 60
}
}
这个方法的处理顺序体现了输入容错原则:先处理精确类型(number),再处理可转换类型(数字字符串),最后处理语义预设值。无论用户怎么传参,都不会报错。
1.3 缩略图三档尺寸对比
| 预设值 | 尺寸 | 典型场景 |
|---|---|---|
'small' | 40 × 40 | 小图标、应用图标 |
'medium' | 60 × 60 | 联系人头像、商品封面 |
'large' | 80 × 80 | 专辑封面、大头像 |
| 自定义数字 | N × N | 精准控制尺寸场景 |
1.4 圆角控制
rcListItemThumbRadius 参数控制缩略图圆角,配合尺寸可以实现多种形态:
// 轻微圆角(卡片风格)
RcListItem({ rcListItemThumb: $r('app.media.startIcon'), rcListItemThumbSize: 'medium', rcListItemThumbRadius: 8 })
// 正圆头像(半径 = 尺寸 / 2)
RcListItem({ rcListItemThumb: $r('app.media.startIcon'), rcListItemThumbSize: 60, rcListItemThumbRadius: 30 })
// 无圆角(方形图标)
RcListItem({ rcListItemThumb: $r('app.media.startIcon'), rcListItemThumbSize: 'medium', rcListItemThumbRadius: 0 })


