Harmony应用开发之ListContainer

ListContainer是鸿蒙应用开发中常用的一种列表控件，类似于Android中的ListView，其用法和ListView用法也是极其相似，Android开发者很容易上手使用。

ListContainer的使用方法

1.在layout文件中声明ListContainer控件

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                   ohos:width="match_parent"
                   ohos:height="match_parent"
                   ohos:orientation="vertical">

    <ListContainer
            ohos:id="$+id:listText"
            ohos:height="match_parent"
            ohos:width="match_parent"
            />
</DirectionalLayout>

很简单，和Android中的声明控件很相似。

2.定义列表控件的适配器RecycleItemProvider

在Android中我们用ListView肯定会用到适配器Adapter，当然在鸿蒙中也有类似的适配器RecycleItemProvider，其用发和Android中的适配器极其相似：

public class ListProvider extends RecycleItemProvider {
    private List<String> data;
    LayoutScatter layoutScatter;

    public ListProvider(Context context, List<String> data) {
        this.data = data;
        this.layoutScatter = LayoutScatter.getInstance(context);
    }

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

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

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        ViewHolder viewHolder = null;
        //component相当于Android中的view，其他的和Android中ListView的适配器adapter差不多。
        // 名字区别也不大，不过Android中ListView基本被淘汰了。
        if (component == null) {
            component = layoutScatter.parse(ResourceTable.Layout_item_layout, null, false);
            viewHolder = new ViewHolder((ComponentContainer) component);
            component.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) component.getTag();
        }
        viewHolder.tvItemName.setText(data.get(i));
        return component;
    }

    /**
     * 类似于Android中的listView缓存。
     * 将已经显示在屏幕上的item缓存在ViewHolder中，下次再次出现直接从缓存中读取
     */
    static class ViewHolder {
        Text tvItemName;
        public ViewHolder(ComponentContainer componentContainer) {
            tvItemName = (Text) componentContainer.findComponentById(ResourceTable.Id_tvItemName);
        }
    }
}

其中ViewHolder是用来实现ListContainer的缓存的，这个和Android中是一摸一样的。注释也有写。

3.在Ability中给ListContainer设置数据

先在Ability中声明ListContainer对象，然后将ListProvider 对象设置进ListContainer中，显示列表数据：

package com.caojing.harmonyfrist.slice;

import com.caojing.harmonyfrist.ResourceTable;
import com.caojing.harmonyfrist.provider.ListProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.ListContainer;
import ohos.agp.window.dialog.ToastDialog;

import java.util.ArrayList;
import java.util.List;

public class TwoAbilitySlice extends AbilitySlice {

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        setUIContent(ResourceTable.Layout_second_layout);
        //根据findById从布局中获取ListContainer控件。
        ListContainer listText = (ListContainer) findComponentById(ResourceTable.Id_listText);
        //拿到ListProvider的对象
        ListProvider listProvider=new ListProvider(this,getList());
        //将ListProvider的对象设置给ListContainer控件。展示数据
        listText.setItemProvider(listProvider);
        listText.setItemClickedListener(new ListContainer.ItemClickedListener() {
            @Override
            public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
                new ToastDialog(TwoAbilitySlice.this).setContentText(String.format("你点击了第%d行", i)).show();
            }
        });
    }

    /**
     * 添加本地数据集合
     *
     * @return List<String>  数据集合
     */
    private List<String> getList() {
        List<String> list = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            list.add(String.format("我是第%d行", i));
        }
        return list;
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

我们在TV模拟器上来看看效果吧

鸿蒙模拟器运行效果图