鸿蒙应用入门级开发者认证实验三（步数排行）

$r('app.media.person01') 是 ArkUI 框架中引用本地资源的核心语法。$r() 用于根据资源ID获取系统内预定义的资源对象。类似于其他框架中的R.xxx（如Android）或require()（如React Native）。

• app.media.person01 是资源路径标识符：
  • app：表示资源位于当前应用内（非系统资源）
  • media：资源类型为媒体文件（如图片、图标等）
  • person01：具体资源名称（对应 resources/media 目录下的 person01.png 等文件）

Image($r('app.media.person01')) 

等价于从当前应用的 resources/media/ 目录加载名为 person01 的图片，无需手动处理文件路径或格式转换，由系统自动完成资源解析

资源文件必须放在工程目录的 resources > media 下，文件名需全小写，使用下划线分隔（如 person_01.png），支持 PNG/JPG/SVG 等格式，资源名在编译时会被转换为唯一ID，避免运行时冲突

对比直接路径引用

此语法同样适用于其他资源类型（如 $r('app.string.title') 引用字符串）。资源引用后会被编译优化，无运行时性能损

这里的子项构建函数比之前的要复杂一些。Athletes是运动员，athletics是田径运动，athletic是运动的强健的。

(item: Athletes) => {         // 子项构建函数
  ListItem() {
    ArticleCard({ Athletes: item }).margin({top:20})
  }
}

item: Athletes：声明式数据参数，定义每个列表项的数据结构；类型标注Athletes：通过TypeScript强类型保证数据安全；数据自动注入：当父级ForEach迭代时自动传入当前项数据

ListItem：基础容器组件，管理列表项生命周期和复用（前面一个简单的ForEach例子中，这里直接使用自定义子组件）；ArticleCard：自定义业务组件，封装具体UI实现；链式调用：.margin({top:20})实现样式隔离

性能方面，ArticleCard编译为固定模板，滚动时复用实例；当item数据变更时，仅刷新当前卡片；轻量级构建：避免在渲染函数内执行复杂计算。