You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

鸿蒙系统中对应Android RecyclerView的替代组件是什么?

HarmonyOS 可滚动动态列表实现方案

和Android RecyclerView.Adapter + RecyclerView.ViewHolder的实现逻辑对应,HarmonyOS中也有成熟的列表回收复用实现,不同技术栈方案如下:

ArkTS Stage模型(当前主流推荐方案)

核心采用 List 容器组件 + LazyForEach 懒加载渲染实现,自带列表项回收复用能力,仅渲染屏幕可见区域的内容,性能表现和Android RecyclerView一致。
各部分对应Android概念:

  • List 组件 → 对应Android RecyclerView 容器控件
  • 继承自BasicDataSource的数据源类 → 对应Android RecyclerView.Adapter,负责数据绑定、列表项计数、增删改通知
  • 自定义列表项组件 → 对应Android RecyclerView.ViewHolder,负责单个列表项的布局与交互逻辑

实现步骤

  1. 定义列表项数据实体类
// 列表项数据结构,对应你业务的Item实体
export class ListItemData {
  id: number;
  title: string;
  content: string;

  constructor(id: number, title: string, content: string) {
    this.id = id;
    this.title = title;
    this.content = content;
  }
}
  1. 实现继承自BasicDataSource的数据源类,用于LazyForEach绑定
import { BasicDataSource } from '@ohos.data.BasicDataSource';

export class MyDataSource extends BasicDataSource<ListItemData> {
  private dataList: ListItemData[] = [];

  // 对应Adapter的getItemCount
  totalCount(): number {
    return this.dataList.length;
  }

  // 对应Adapter的getItem
  getData(index: number): ListItemData {
    return this.dataList[index];
  }

  // 自定义方法:批量添加数据
  addData(data: ListItemData[]) {
    this.dataList.push(...data);
    // 通知列表刷新,对应Adapter的notifyDataSetChanged系列方法
    this.notifyDataAdd(this.dataList.length - data.length, data.length);
  }

  // 自定义方法:更新指定位置数据
  updateItem(index: number, newData: ListItemData) {
    this.dataList[index] = newData;
    this.notifyDataChange(index);
  }
}
  1. 实现自定义列表项组件,对应ViewHolder
@Component
struct ListItem {
  // 接收传入的单个item数据
  private item: ListItemData;

  build() {
    Column() {
      Text(this.item.title)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
      Text(this.item.content)
        .fontSize(14)
        .fontColor(Color.Grey)
    }
    .width('100%')
    .padding(16)
    .border({ width: 1, color: '#eee' })
  }
}
  1. 页面中使用List组件加载列表
@Entry
@Component
struct ListPage {
  // 初始化数据源
  private dataSource: MyDataSource = new MyDataSource();

  aboutToAppear() {
    // 模拟请求数据,填充数据源
    let mockData: ListItemData[] = [];
    for (let i = 0; i < 100; i++) {
      mockData.push(new ListItemData(i, `标题${i}`, `这是第${i}条列表的内容`))
    }
    this.dataSource.addData(mockData);
  }

  build() {
    Column() {
      // List容器,默认垂直滚动
      List() {
        // 用LazyForEach绑定数据源,自动回收复用
        LazyForEach(this.dataSource, (item: ListItemData) => {
          ListItem({ item: item })
        }, (item: ListItemData) => item.id.toString()) // 第三个参数为item唯一标识,提升复用稳定性
      }
      .width('100%')
      .height('100%')
      // 可选配置:滚动方向,默认Axis.Vertical垂直,设置Axis.Horizontal为横向滚动
      .listDirection(Axis.Vertical)
      // 可选配置:边缘滑动效果,对应Android RecyclerView的overScrollMode
      .edgeEffect(EdgeEffect.Spring)
    }
    .width('100%')
    .height('100%')
  }
}

Java FA模型(旧版兼容方案)

如果使用Java语言开发旧版FA模型,可使用ListContainer组件搭配BaseItemProvider实现,逻辑和Android RecyclerView.Adapter + ViewHolder完全一致,只需按API要求实现getCount、getItem、getComponent三个核心方法即可。


内容的提问来源于stack exchange,提问作者OxO

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.10 00:48:00