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

3. 主界面布局（ability_main.xml）

在主布局中，我们只需要一个ListContainer组件，并给它一个id。为了让界面更真实，可以加上顶部的标题栏。布局代码如下：

这个布局非常简单，ListContainer会负责展示我们之前定义的列表项。

4. 创建数据模型（SongBean.java）

在java包下新建一个实体类SongBean，包含歌曲名称、歌手、图片资源ID（或URL）。为了体现鸿蒙5.0开发的特性，我们可以使用Parcelable序列化以便后续传递，但这里简单起见，只写普通JavaBean即可。

    public class SongBean {    private String songName;    private String artist;    private int imageResId;    public SongBean(String songName, String artist, int imageResId) {        this.songName = songName;        this.artist = artist;        this.imageResId = imageResId;    }    // getter/setter 省略（实际代码需要补充）}  

5. 实现列表适配器（GuessAdapter.java）

在HarmonyOS开发实战中，自定义适配器需要继承RecycleItemProvider并重写关键方法。我们创建一个GuessAdapter类，持有数据列表和上下文，在getSubView方法中加载列表项布局并绑定数据。同时可以设置按钮的点击监听。以下是核心代码片段：

    public class GuessAdapter extends RecycleItemProvider {    private List list;    private AbilitySlice slice;    public GuessAdapter(List list, AbilitySlice slice) {        this.list = list;        this.slice = slice;    }    @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 getSubView(int position, Component convertComponent, ComponentContainer parent) {        Component component = convertComponent;        if (component == null) {            component = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_guess, null, false);        }        SongBean bean = list.get(position);        // 初始化子组件        Image imgAlbum = (Image) component.findComponentById(ResourceTable.Id_img_album);        Text tvSong = (Text) component.findComponentById(ResourceTable.Id_tv_song_name);        Text tvArtist = (Text) component.findComponentById(ResourceTable.Id_tv_artist);        Button btnPlay = (Button) component.findComponentById(ResourceTable.Id_btn_play);        imgAlbum.setImageResource(bean.getImageResId());        tvSong.setText(bean.getSongName());        tvArtist.setText(bean.getArtist());        btnPlay.setClickedListener(component1 -> {            // 播放逻辑，可跳转或弹出提示            new ToastDialog(slice).setText("播放：" + bean.getSongName()).show();        });        return component;    }}  

6. 在AbilitySlice中绑定数据

最后，在MainAbilitySlice的onStart方法中，获取ListContainer实例，准备模拟数据，并设置适配器。代码如下：

    @Overridepublic void onStart(Intent intent) {    super.onStart(intent);    super.setUIContent(ResourceTable.Layout_ability_main);    ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_guess);    List list = new ArrayList<>();    list.add(new SongBean("像风一样自由", "许巍", ResourceTable.Media_ic_music1));    list.add(new SongBean("成都", "赵雷", ResourceTable.Media_ic_music2));    list.add(new SongBean("平凡之路", "朴树", ResourceTable.Media_ic_music3));    // 更多数据...    GuessAdapter adapter = new GuessAdapter(list, this);    listContainer.setItemProvider(adapter);    // 设置列表项点击事件（可选）    listContainer.setItemClickedListener((listContainer1, component, i, l) -> {        SongBean bean = list.get(i);        new ToastDialog(this).setText("点击了：" + bean.getSongName()).show();    });}  

至此，一个完整的“猜你喜欢”列表布局就完成了。运行项目，你将看到可滚动列表，每个项目包含图片、文字和按钮，点击按钮会弹出提示。

7. 关键点与优化建议

• 列表复用：在适配器中判断convertComponent是否为null，这是HarmonyOS开发实战中提升性能的关键。
• 数据更新：当列表数据变化时，调用adapter.notifyDataSetChanged()刷新UI。
• 自定义样式：可以通过在listContainer上设置padding和divider来美化列表。
• 网络图片加载：实际开发中，推荐使用PixelMap配合网络请求库加载图片，本示例使用本地资源简化。

—— 本文关键词：鸿蒙5.0开发、黑马云音乐、列表布局、HarmonyOS开发实战 ——