技術標籤：HarmonyOS鴻蒙

一 概述

ListContainer用來呈現連續、多行資料的元件，包含一系列相同型別的列表項

• ListContainer的使用方法
• ListContainer的常用設定
• ListContainer的樣式設定

二 ListContainer的使用方法

2.1 在layout目錄下的xml檔案中建立ListContainer

<ListContainer
    ohos:id="$+id:list_container"
    ohos:height="200vp"
    ohos:width="300vp"
    ohos:layout_alignment="horizontal_center"/>
 

2.2 ListContainer的子佈局(item_sample.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:left_margin="16vp"
    ohos:right_margin="16vp"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:item_index"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="4vp"
        ohos:text="Item0"
        ohos:text_size="20fp"
        ohos:layout_alignment="center"/>
</DirectionalLayout>
 

2.3 ListContainer的資料包裝類(類似於Android bean類)

public class SampleItem {
    private String name;
    public SampleItem(String name) {
        this.name = name;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

2.4 ListContainer資料適配類(類似於Android中adater類)

ListContainer常用方法

SampleItemProvider

import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;
import java.util.List;
public class SampleItemProvider extends RecycleItemProvider {
    private List<SampleItem> list;
    private AbilitySlice slice;
    public SampleItemProvider(List<SampleItem> 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) {
        Component cpt = convertComponent;
        if (cpt == null) {
            cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_sample, null, false);
        }
        SampleItem sampleItem = list.get(position);
        Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index);
        text.setText(sampleItem.getName());
        return cpt;
    }
}

在Java程式碼中新增ListContainer的資料，並適配其資料結構

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_page_listcontainer)
        initListContainer();
    }
    private void initListContainer() {
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
        List<SampleItem> list = getData();
        SampleItemProvider sampleItemProvider = new SampleItemProvider(list,this);
        listContainer.setItemProvider(sampleItemProvider);
    }
    private ArrayList<SampleItem> getData() {
        ArrayList<SampleItem> list = new ArrayList<>();
        for (int i = 0; i <= 8; i++) {
            list.add(new SampleItem("Item"+i));
        }
        return list;
    }

ListContainer的介面顯示效果

三 ListContainer的常用設定

3.1 設定響應點選事件

程式碼

listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
            @Override
            public void onItemClicked(ListContainer listContainer, Component component, int position, long id) {
                SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(position);
                new ToastDialog(getContext())
                        .setText("clicked:"+item.getName())
                        // Toast顯示在介面中間
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();
            }
        });

響應點選事件效果

3.2 設定響應長按事件

程式碼

listContainer.setItemLongClickedListener(new ListContainer.ItemLongClickedListener() {
            @Override
            public boolean onItemLongClicked(ListContainer listContainer, Component component,int position, long id) {
                SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(position);
                new ToastDialog(getContext())
                        .setText("long clicked:" + item.getName())
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();
                return false;
            }
        });

響應長按事件效果

四 ListContainer的樣式設定

ListContainer的樣式設定相關的介面如下

4.1 設定ListContainer的佈局方向

orientation設定為“horizontal”，表示橫向佈局；

orientation設定為“vertical”，表示縱向佈局。

預設為縱向佈局。

在xml中設定

<ListContainer
    ...
    ohos:orientation="horizontal"/>

Java程式碼中設定

listContainer.setOrientation(Component.HORIZONTAL);

佈局方向為horizontal的效果

4.2 設定ListContainer的開始和結束偏移量

java程式碼中設定

listContainer.setContentOffSet(32,16);

為了便於觀察，設定背景顏色

在item_sample.xml的

<DirectionalLayout
    ...
    ohos:background_element="#FAEBD7">
    ...
</DirectionalLayout>

ListContainer佈局檔案中新增背景色

<ListContainer
    ...
    ohos:background_element="#FFDEAD"/>

列表容器的開始偏移量為32，結束偏移量為16效果

4.3 設定回彈效果

在xml中設定

<ListContainer
    ...
    ohos:rebound_effect="true"/>

在Java程式碼中設定

listContainer.setReboundEffect(true);

回彈效果

調整回彈效果

在開啟回彈效果後，可以呼叫setReboundEffectParams()方法調整回彈效果。

listContainer.setReboundEffectParams(40,0.6f,20);

4.4 設定著色器顏色

在xml中設定

<ListContainer
    ...
    ohos:shader_color="#90EE90"/>

Java程式碼中設定

listContainer.setShaderColor(new Color(Color.getIntColor("#90EE90")));

設定著色器效果