鸿蒙ark ui 列表组件各种用法教程

前言

各位同学有段时间没有见面 因为一直很忙所以就没有去更新博客。最近有在学习这个鸿蒙的ark ui开发 因为鸿蒙不是发布了一个鸿蒙next的测试版本 明年会启动纯血鸿蒙应用 所以我就想提前给大家写一些博客文章

效果图：

具体实现

我们在鸿蒙的ark ui 里面列表使用我们的list组件来实现 类似flutter 里面的listview和安卓里面的listview 和recyclerview

代码实现：

• 准备数据源 本地数据

export interface PanelListItemType {
  name: Resource;
  cname: Resource;
}

export const panelInitialList: PanelListItemType[] = [
  {
    name: $r('app.string.Fatburningplan1'),
    cname: $r('app.string.change1'),
  },
  {
    name: $r('app.string.Fatburningplan2'),
    cname: $r('app.string.change2'),

  },
  {
    name: $r('app.string.Fatburningplan3'),
    cname: $r('app.string.change3'),
  },
  {
    name: $r('app.st