鸿蒙5.0开发实战系列（一）：黑马云音乐“猜你喜欢”列表布局实现

鸿蒙5.0开发实战系列（一）：黑马云音乐“猜你喜欢”列表布局实现

从零开始构建动态列表，掌握HarmonyOS布局与适配技巧

欢迎来到鸿蒙5.0开发实战系列！本篇是系列的开篇，我们将以“黑马云音乐”App中的“猜你喜欢”模块为切入点，手把手教你如何实现一个横向滚动的列表布局。无论你是刚接触鸿蒙开发的新手，还是有一定经验想快速上手的开发者，本文都将为你提供清晰、详尽的步骤。准备好了吗？让我们一起开启鸿蒙开发之旅！

一、项目背景与本节目标

“黑马云音乐”是一个仿照主流音乐App的练手项目，旨在通过实战帮助开发者快速掌握鸿蒙5.0开发的核心技术。本节我们将实现首页的“猜你喜欢”模块——一个横向滚动的卡片列表，展示推荐歌曲的封面、歌名和歌手。通过这个实战，你将学习到：

• 如何创建鸿蒙项目并理解基本目录结构
• 使用DirectionalLayout和ListContainer构建猜你喜欢列表
• 自定义列表项的布局与数据绑定
• 编写Adapter实现动态数据填充
• 在AbilitySlice中展示列表并预览效果

二、准备工作：环境与项目创建

首先，请确保你已经安装了DevEco Studio（推荐最新版，支持鸿蒙5.0开发）。打开IDE后，按照以下步骤创建项目：

1. 点击“Create New Project”，选择“Empty Ability”模板。
2. 配置项目名称（例如“BlackCloudMusic”）、包名、存储路径等，语言选择Java（或JavaScript，本文以Java为例）。
3. 点击“Finish”，等待项目构建完成。

项目创建后，你会看到类似如下的目录结构：entry模块是主模块，所有的代码和资源都存放在这里。

三、创建布局文件——实现列表容器

在鸿蒙5.0中，布局文件通常使用XML编写，存放在entry/src/main/resources/base/layout目录下。我们首先创建主界面的布局文件ability_main.xml，在其中放置一个横向列表容器。

上述代码中，我们创建了一个垂直方向的DirectionalLayout作为根布局，顶部是一个标题“猜你喜欢”，下方是一个ListContainer组件，并设置orientation="horizontal"使其横向滚动。注意，我们为ListContainer指定了id，以便在代码中引用。

四、创建列表项布局——卡片样式

每个列表项代表一首歌，我们设计一个简单的卡片布局：上方是歌曲封面图，下方是歌名和歌手。在layout目录下新建item_song.xml：

这里我们设置了每个卡片的宽度为130vp，内部包含一个Image和两个Text，所有内容居中显示。这便是一个标准的猜你喜欢列表项样式。

五、创建数据模型与适配器

在Java代码中，我们需要定义歌曲的数据结构，并编写适配器来填充ListContainer。首先，创建一个数据类Song.java：

public class Song {    private String name;    private String artist;    private int imageResId; // 图片资源ID    public Song(String name, String artist, int imageResId) {        this.name = name;        this.artist = artist;        this.imageResId = imageResId;    }    // 省略getter/setter方法}

然后，创建适配器GuessAdapter.java继承RecycleItemProvider：

public class GuessAdapter extends RecycleItemProvider {    private List list;    private Context context;    public GuessAdapter(List list, Context context) {        this.list = list;        this.context = context;    }    @Override    public int getCount() {        return list.size();    }    @Override    public Object getItem(int position) {        return list.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public Component getComponent(int position, Component convertComponent, ComponentContainer parent) {        Component cpt;        if (convertComponent == null) {            cpt = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_song, null, false);        } else {            cpt = convertComponent;        }        Song song = list.get(position);        Image image = (Image) cpt.findComponentById(ResourceTable.Id_song_image);        Text name = (Text) cpt.findComponentById(ResourceTable.Id_song_name);        Text artist = (Text) cpt.findComponentById(ResourceTable.Id_song_artist);        image.setPixelMap(song.getImageResId());        name.setText(song.getName());        artist.setText(song.getArtist());        return cpt;    }}

在getComponent方法中，我们解析列表项布局，并填充数据。这是布局实现的核心逻辑。

六、在AbilitySlice中展示列表

打开MainAbilitySlice.java，在onStart方法中加载布局并设置适配器：

public class MainAbilitySlice extends AbilitySlice {    @Override    public void onStart(Intent intent) {        super.onStart(intent);        super.setUIContent(ResourceTable.Layout_ability_main);        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_guess_list);        List data = new ArrayList<>();        data.add(new Song("梦想天空", "李华", ResourceTable.Media_icon1));        data.add(new Song("平凡之路", "朴树", ResourceTable.Media_icon2));        data.add(new Song("夜曲", "周杰伦", ResourceTable.Media_icon3));        // 添加更多数据...        GuessAdapter adapter = new GuessAdapter(data, this);        listContainer.setItemProvider(adapter);    }}

注意：图片资源需要提前放入entry/src/main/resources/base/media目录下，并在resource.table中生成对应的ID。

七、运行效果与调试

点击运行按钮，选择模拟器或真机。如果一切顺利，你应该能看到一个横向滚动的卡片列表，就像下面这张示意图：

如果列表没有出现，请检查以下几点：

• ListContainer是否设置了正确的id和orientation。
• 适配器中的数据是否不为空。
• 布局文件中组件的id是否与Java代码中查找的id一致。

八、总结与下期预告

至此，我们已经完成了黑马云音乐项目中“猜你喜欢”列表的布局实现。通过这个实战，你掌握了鸿蒙中列表组件ListContainer的基本用法、自定义适配器的编写以及布局文件的组织。在下一期中，我们将继续完善这个模块，加入点击事件和网络数据加载，敬请期待！

鸿蒙5.0开发实战系列持续更新中，欢迎关注！