问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在鸿蒙开发中，如何实现一个简单的列表界面？

头像
一行袋码
    3.6k1228
    HarmonyOSharmonyos-next
    阅读 602
    avatarAI BotBETA
    在鸿蒙开发中，实现一个简单的列表界面可以通过使用 `ListContainer` 组件来完成。以下是一个基本的实现步骤：

1. **创建项目**：首先，在 DevEco Studio 中创建一个新的 HarmonyOS 项目。

2. **设计 UI**：在 `resources/base/layout` 目录下创建一个 XML 布局文件（例如 `ability_main.xml`），并在其中添加 `ListContainer` 组件。

    <ListContainer
    ohos:id="$+id:list_container"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical" />
```

    1. 定义列表项布局：创建一个新的 XML 文件（例如 list_item.xml），用于定义每个列表项的布局。

      <DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:orientation="horizontal"
    ohos:padding="16vp">

    <Text
        ohos:id="$+id:text"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="18fp"
        ohos:margin_right="16vp"/>
</DirectionalLayout>

    2. 设置列表数据：在 MainAbilitySlice 类中，获取 ListContainer 组件的实例，并为其设置适配器来管理列表项数据。

      @Override
public void onStart(Intent intent) {
    super.onStart(intent);
    super.setUIContent(ResourceTable.Layout_ability_main);

    ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);

    // 创建数据列表
    List<String> dataList = new ArrayList<>();
    dataList.add("Item 1");
    dataList.add("Item 2");
    dataList.add("Item 3");

    // 创建适配器
    MyListAdapter adapter = new MyListAdapter(this, dataList);
    listContainer.setItemProvider(adapter);
}

// 自定义适配器类
private static class MyListAdapter extends BaseItemProvider<String> {
    private List<String> dataList;
    private Context context;

    public MyListAdapter(Context context, List<String> dataList) {
        this.context = context;
        this.dataList = dataList;
    }

    @Override
    public int getCount() {
        return dataList.size();
    }

    @Override
    public Object getItem(int index) {
        return dataList.get(index);
    }

    @Override
    public long getItemId(int index) {
        return index;
    }

    @Override
    public Component getComponent(int index, Component convertComponent, ComponentContainer componentContainer) {
        if (convertComponent == null) {
            // 加载列表项布局
            convertComponent = LayoutInflater.from(context).inflate(ResourceTable.Layout_list_item, componentContainer, false);
        }

        Text text = (Text) convertComponent.findComponentById(ResourceTable.Id_text);
        text.setText(dataList.get(index));

        return convertComponent;
    }
}

    通过以上步骤，你就可以在鸿蒙开发中实现一个简单的列表界面。这个示例展示了如何创建列表容器、定义列表项布局、设置列表数据以及创建自定义适配器来管理这些数据。

    1 个回答
    得票最新
    头像
    脆脆瓜的笔记
      1.6k129

      使用List组件来展示列表，并为每一项绑定点击事件。

      @Entry
@Component
struct ListComponent {
  private items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  onItemTap(index: number) {
    console.log(`点击了第${index}项`);
  }

  build() {
    List(this.items).onItemTap((index, item) => {
      this.onItemTap(index);
    })
  }
}

      参见：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...

      本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题