一、尺寸计算与工具函数
在 ArkUI 开发中，尺寸单位往往需要灵活处理。getSizeByUnit 工具函数的作用是将 RcStringNumber（即 string | number）统一转换为组件属性可接受的值。
// 来自 utils.ts（简化示意）
export function getSizeByUnit(size: string | number): string | number {
if (typeof size === 'number') {
return size; // 数字直接返回（单位为 vp）
}
return size; // 字符串直接返回（支持 '100%'、'50vp' 等）
}
这使得 rcListWidth、rcListHeight、rcListSpace 等属性既可以传 100（数字 vp），也可以传 '100%'（百分比字符串），大大提升了配置的灵活性。
二、禁用状态与视觉反馈
列表项的禁用状态通常通过全局 opacity 实现，比逐一修改子元素颜色更高效。当 rcListItemDisabled 为真时，整个列表项（包括缩略图、图标、文字）统一降低到 60% 透明度，视觉上清晰传达'不可用'状态。
.opacity(this.rcListItemDisabled ? 0.6 : 1)
三、完整实战示例
下面是一个综合展示缩略图、角标、额外图标三套系统的完整可运行页面。你可以直接复制并在项目中测试效果。
import { RcList, RcListItem } from 'rchoui'
@Entry
@ComponentV2
struct {
() {
() {
({ : }) {
().().(.).({ : , : })
().().().({ : })
({ : }) {
({
: ,
: ,
: $r(),
: ,
: ,
:
})
({
: ,
: ,
: $r(),
: ,
: ,
:
})
({
: ,
: ,
: $r(),
: ,
: ,
: ,
:
})
}
().().().({ : })
({ : }) {
({
: ,
: ,
: $r(),
: ,
: ,
: { : },
:
})
({
: ,
: ,
: $r(),
: ,
: ,
: { : , : },
:
})
({
: ,
: ,
: $r(),
: ,
: ,
: { : , : },
:
})
({
: ,
: ,
: $r(),
: ,
: ,
: { : , : },
: ,
:
})
}
().().().({ : })
({ : }) {
({
: ,
: ,
: ,
: { : , : , : },
:
})
({
: ,
: ,
: ,
: { : , : , : },
:
})
({
: ,
: ,
: ,
: { : , : , : },
: ,
:
})
}
().().().({ : })
({ : }) {
({
: ,
: ,
: ,
: { : $r(), : },
: ,
:
})
}
().().().({ : })
({ : }) {
({
: ,
: ,
: $r(),
: ,
: ,
: ,
: { : , : },
: ,
: { : , : , : },
: ,
: ,
:
})
}
().().().(.).({ : , : })
}.().()
}.().().()
}
}
