圖解鴻蒙列表組件ListContainer

一、什麼是ListContainer

    ListContainer是用來呈現連續、多行數據的列表組件,包含一系列相同類型的列表項。如下圖所示:

二、ListContainer的架構視圖

    ListContainer的架構視圖如下所示:

ListContainer作爲列表,其中的列表項數據是由適配器Adapter提供的,適配器Adapter作爲ListContainer和數據源之間的中介&橋樑,將數據源中的數據映射到要展示的ListContainer中,ListContainer負責以列表的形式顯示適配器Adapter提供的數據。

三、ListContainer的使用步驟

    ListContainer的使用步驟主要包括:

1、創建ListContainer

2、創建列表項的佈局

3、使用POJO類封裝數據源中與每個列表項對應的數據

4、構造數據源

5、構造適配器Adapter

6、將數據源關聯到適配器Adapter

7、將適配器Adapter應用到ListContainer

四、ListContainer的使用示例

    示例的運行效果如下圖所示:

    開發步驟如下:

1、創建ListContainer(ability_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<ListContainer
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:list_container"
    ohos:height="match_parent"
    ohos:width="match_parent"/>

2、創建列表項的佈局(item.xml)

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

    <Text
        ohos:id="$+id:name"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:padding="5vp"
        ohos:auto_font_size="true"
        ohos:text_alignment="center"/>

    <Component
        ohos:height="1vp"
        ohos:width="match_parent"
        ohos:background_element="#CCCCCC"/>
</DirectionalLayout>

3、使用POJO類封裝數據源中與每個列表項對應的數據(Item.java)

    POJO類指的是:只包含屬性和相應的getter和setter,而沒有業務邏輯的類。

public class Item {
    private String name;

    public Item(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

4、構造數據源(MainAbilitySlice.java)

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

        List<Item> list = getData();
    }

    private List<Item> getData() {
        List<Item> list = new ArrayList<>();
        for (int i = 1; i <= 100; i++) {
            list.add(new Item("Item " + i));
        }
        return list;
    }
}

5、構造適配器Adapter(MyItemProvider.java)

    常用的適配器類是RecycleItemProvider,繼承該類時需要重寫四個方法:getCount()、getItem()、getItemId()和getComponent()。其中,對於方法getComponent(),當某個列表項從不可見變爲可見時會自動調用該方法,在該方法中適配器Adapter會從數據源取數據,並將返回的數據封裝在一個Component對象中,以便將該對象返回給ListContainer,從而將數據映射到對應的列表項。

public class MyItemProvider extends RecycleItemProvider {
    private List<Item> list;
    private AbilitySlice slice;

    public MyItemProvider(List<Item> 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 getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
        convertComponent = LayoutScatter.getInstance(slice)
                .parse(ResourceTable.Layout_item, null, false);
        Text text = (Text) convertComponent.findComponentById(ResourceTable.Id_name);
        text.setText(list.get(position).getName());
        return convertComponent;
    }
}

6、將數據源關聯到適配器Adapter(MainAbilitySlice.java)

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ......

        List<Item> list = getData();
        MyItemProvider myItemProvider = new MyItemProvider(list, this);
    }
    ......
}

7、將適配器Adapter應用到ListContainer(MainAbilitySlice.java)

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ......
        MyItemProvider myItemProvider = new MyItemProvider(list, this);
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
        listContainer.setItemProvider(myItemProvider);
    }
    ......
}


五、適配器Adapter的優化


文章後續內容和附件可以點擊下面的原文鏈接前往學習
原文鏈接:  https://harmonyos.51cto.com/posts/2168#bkwz


想了解更多內容,請訪問:

51CTO和華爲官方戰略合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#bkwz


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章