鴻蒙學(xué)習(xí)-ListContainer

ListContainer是用來呈現(xiàn)連續(xù)、多行數(shù)據(jù)的組件，包含一系列相同類型的列表項。

自有XML屬性

rebound_effect：開啟/關(guān)閉回彈效果，boolean類型

shader_color：著色器顏色，color類型

orientation：列表項排列方向

horizontal：表示水平方向列表。

vertical：表示垂直方向列表。


ListContainer的常用接口

設(shè)置響應(yīng)點擊事件。

listContainer.setItemClickedListener((container, component, position, id) -> {

? ? SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(position);

? ? new ToastDialog(this)

? ? ? ? ? ? .setText("you clicked:" + item.getName())

? ? ? ? ? ? // Toast顯示在界面中間

? ? ? ? ? ? .setAlignment(LayoutAlignment.CENTER)

? ? ? ? ? ? .show();

});


ListContainer每一行可以為不同的數(shù)據(jù)，因此需要適配不同的數(shù)據(jù)結(jié)構(gòu)，使其都能添加到ListContainer上。

創(chuàng)建SampleItemProvider.java，繼承自BaseItemProvider。必須重寫的方法如下：

getCount()：返回填充的表項個數(shù)。

getItem(int position)：根據(jù)position返回對應(yīng)的數(shù)據(jù)。

getItemId(int position)：返回某一項的id。

getComponent(int position, Component covertComponent,ComponentContainer componentContainer)：根據(jù)position返回對應(yīng)的界面組件。


設(shè)置響應(yīng)長按事件。

listContainer.setItemLongClickedListener((container, component, position, id) -> {

? ? SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(position);

? ? new ToastDialog(this)

? ? ? ? ? ? .setText("you long clicked:" + item.getName())

? ? ? ? ? ? .setAlignment(LayoutAlignment.CENTER)

? ? ? ? ? ? .show();

? ? return false;

});


在適配ListContainer的數(shù)據(jù)時，無論是新創(chuàng)建的列表項實例，還是從緩存中獲取到的，都需要調(diào)用方法findComponentById()獲取所有子組件并進(jìn)行數(shù)據(jù)填充，大量調(diào)用該方法，會損耗ListContainer的性能。比較好的解決方案是在創(chuàng)建列表項實例時進(jìn)行調(diào)用，將獲取到的所有子組件綁定到列表項的實例中，當(dāng)從緩存中獲取到列表項實例后，直接使用綁定的的子組件填充新數(shù)據(jù)。完整示例代碼如下：

創(chuàng)建數(shù)據(jù)包裝類

public class SettingItem {

? ? private int imageId;

? ? private String settingName;

? ? private boolean isChecked;

? ? public SettingItem(int imageId, String settingName, boolean isChecked) {

? ? ? ? this.imageId = imageId;

? ? ? ? this.settingName = settingName;

? ? ? ? this.isChecked = isChecked;

? ? }

? ? public int getImageId() {

? ? ? ? return imageId;

? ? }


? ? public void setImageId(int imageId) {

? ? ? ? this.imageId = imageId;

? ? }

? ? public String getSettingName() {

? ? ? ? return settingName;

? ? }

? ? public void setSettingName(String settingName) {

? ? ? ? this.settingName = settingName;

? ? }

? ? public boolean isChecked() {

? ? ? ? return isChecked;

? ? }

? ? public void setChecked(boolean checked) {

? ? ? ? isChecked = checked;

? ? }

}


創(chuàng)建列表項布局layout_item_setting.xml

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout

? ? xmlns:ohos="http://schemas.huawei.com/res/ohos"

? ? ohos:height="80vp"

? ? ohos:width="match_parent"

? ? ohos:padding="8vp"

? ? ohos:orientation="horizontal">

? ? <Image

? ? ? ? ohos:id="$+id:ima_setting"

? ? ? ? ohos:height="match_parent"

? ? ? ? ohos:width="0"

? ? ? ? ohos:layout_alignment="vertical_center"

? ? ? ? ohos:weight="2">

? ? </Image>

? ? <Text

? ? ? ? ohos:id="$+id:text_setting"

? ? ? ? ohos:height="match_content"

? ? ? ? ohos:width="0"

? ? ? ? ohos:padding="4fp"

? ? ? ? ohos:text_size="20fp"

? ? ? ? ohos:start_padding="8vp"

? ? ? ? ohos:end_padding="8vp"

? ? ? ? ohos:weight="6"

? ? ? ? ohos:layout_alignment="vertical_center"/>

? ? <Switch

? ? ? ? ohos:id="$+id:switch_setting"

? ? ? ? ohos:height="20vp"

? ? ? ? ohos:width="0vp"

? ? ? ? ohos:weight="1"

? ? ? ? ohos:layout_alignment="vertical_center"/>

</DirectionalLayout>


創(chuàng)建SettingProvider.java

public class SettingProvider extends BaseItemProvider{

? ? // ListContainer的數(shù)據(jù)集合

? ? private List<SettingItem> settingList;

? ? private AbilitySlice slice;

? ? public SettingProvider(List<SettingItem> list, AbilitySlice slice) {

? ? ? ? this.settingList = list;

? ? ? ? this.slice = slice;

? ? }

? ? // 用于保存列表項中的子組件信息

? ? public class SettingHolder {

? ? ? ? Image settingIma;

? ? ? ? Text settingText;

? ? ? ? Switch settingSwitch;

? ? ? ? SettingHolder(Component component) {

? ? ? ? ? ? settingIma = (Image) component.findComponentById(ResourceTable.Id_ima_setting);

? ? ? ? ? ? settingText = (Text) component.findComponentById(ResourceTable.Id_text_setting);

? ? ? ? ? ? settingSwitch = (Switch) component.findComponentById(ResourceTable.Id_switch_setting);

? ? ? ? ? ? settingSwitch.setTrackElement(trackElementInit(

? ? ? ? ? ? ? ? ? ? new ShapeElement(slice, ResourceTable.Graphic_track_on_element),

? ? ? ? ? ? ? ? ? ? new ShapeElement(slice, ResourceTable.Graphic_track_off_element)));

? ? ? ? ? ? settingSwitch.setThumbElement(thumbElementInit(

? ? ? ? ? ? ? ? ? ? new ShapeElement(slice, ResourceTable.Graphic_thumb_on_element),

? ? ? ? ? ? ? ? ? ? new ShapeElement(slice, ResourceTable.Graphic_thumb_off_element)));

? ? ? ? }

? ? ? ? private StateElement trackElementInit(ShapeElement on, ShapeElement off) {

? ? ? ? ? ? StateElement trackElement = new StateElement();

? ? ? ? ? ? trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);

? ? ? ? ? ? trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);

? ? ? ? ? ? return trackElement;

? ? ? ? }

? ? ? ? private StateElement thumbElementInit(ShapeElement on, ShapeElement off) {

? ? ? ? ? ? StateElement thumbElement = new StateElement();

? ? ? ? ? ? thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);

? ? ? ? ? ? thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);

? ? ? ? ? ? return thumbElement;

? ? ? ? }

? ? }

? ? @Override

? ? public int getCount() {

? ? ? ? return settingList == null ? 0 : settingList.size();

? ? }

? ? @Override

? ? public Object getItem(int position) {

? ? ? ? if (settingList != null && position >= 0 && position < settingList.size()){

? ? ? ? ? ? return settingList.get(position);

? ? ? ? }

? ? ? ? return null;

? ? }

? ? @Override

? ? public long getItemId(int position) {

? ? ? ? return position;

? ? }

? ? @Override

? ? public Component getComponent(int position, Component component, ComponentContainer componentContainer) {

? ? ? ? final Component cpt;

? ? ? ? SettingHolder holder;

? ? ? ? SettingItem setting = settingList.get(position);

? ? ? ? if (component == null) {

? ? ? ? ? ? cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_layout_item_setting, null, false);

? ? ? ? ? ? holder = new SettingHolder(cpt);

? ? ? ? ? ? // 將獲取到的子組件信息綁定到列表項的實例中

? ? ? ? ? ? cpt.setTag(holder);

? ? ? ? } else {

? ? ? ? ? ? cpt = component;

? ? ? ? ? ? // 從緩存中獲取到列表項實例后，直接使用綁定的子組件信息進(jìn)行數(shù)據(jù)填充。

? ? ? ? ? ? holder = (SettingHolder) cpt.getTag();

? ? ? ? }

? ? ? ? holder.settingIma.setPixelMap(setting.getImageId());

? ? ? ? holder.settingText.setText(setting.getSettingName());

? ? ? ? holder.settingSwitch.setChecked(setting.isChecked());

? ? ? ? return cpt;

? ? }

}


其中使用到的graphic資源文件如下：

thumb_off_element.xml：

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"

? ? ? ohos:shape="oval">

? ? <solid

? ? ? ? ohos:color="#FFFFFF"/>

? ? <bounds

? ? ? ? ohos:top="0"

? ? ? ? ohos:left="0"

? ? ? ? ohos:right="20vp"

? ? ? ? ohos:bottom="20vp"/>

</shape>


thumb_on_element.xml:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"

? ? ? ohos:shape="oval">

? ? <solid

? ? ? ? ohos:color="#1E90FF"/>

? ? <bounds

? ? ? ? ohos:top="0"

? ? ? ? ohos:left="0"

? ? ? ? ohos:right="20vp"

? ? ? ? ohos:bottom="20vp"/>

</shape>


track_off_element.xml:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"

? ? ? ohos:shape="rectangle">

? ? <solid

? ? ? ? ohos:color="#808080"/>

? ? <corners

? ? ? ? ohos:radius="20vp"/>

</shape>


track_on_element.xml:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"

? ? ? ohos:shape="rectangle">

? ? <solid

? ? ? ? ohos:color="#87CEFA"/>

? ? <corners

? ? ? ? ohos:radius="20vp"/>

</shape>

在layout文件夾下，創(chuàng)建ListContainerSlice對應(yīng)的布局文件layout_listcontainer.xml，并添加ListContainer

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout

? ? xmlns:ohos="http://schemas.huawei.com/res/ohos"

? ? ohos:height="match_parent"

? ? ohos:width="match_parent"

? ? ohos:padding="8vp"

? ? ohos:orientation="vertical">

? ? <ListContainer

? ? ? ? ohos:id="$+id:list_container"

? ? ? ? ohos:height="match_parent"

? ? ? ? ohos:width="match_parent"/>

</DirectionalLayout>

ListContainer添加數(shù)據(jù)

public class ListContainerSlice extends AbilitySlice {


? ? @Override

? ? protected void onStart(Intent intent) {

? ? ? ? super.onStart(intent);

? ? ? ? setUIContent(ResourceTable.Layout_layout_listcontainer);

? ? ? ? ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);

? ? ? ? SettingProvider provider = new SettingProvider(getData(), this);

? ? ? ? listContainer.setItemProvider(provider);

? ? }

? ? private List<SettingItem> getData() {

? ? ? ? ArrayList<SettingItem> data = new ArrayList<>();

? ? ? ? for (int i = 0; i < 100; i++) {

? ? ? ? ? ? data.add(new SettingItem(

? ? ? ? ? ? ? ? ? ? ResourceTable.Media_icon,

? ? ? ? ? ? ? ? ? ? "SettingName" + i,

? ? ? ? ? ? ? ? ? ? i % 3 == 0

? ? ? ? ? ? ));

? ? ? ? }

? ? ? ? return data;

? ? }

}

















?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容