4.4【HarmonyOS鸿蒙开发】组件ListContainer(下)性能优化_鸿蒙listcontain动态

4.4【HarmonyOS鸿蒙开发】组件ListContainer(下)性能优化

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

在适配ListContainer的数据时，无论是新创建的列表项实例，还是从缓存中获取到的，都需要调用方法findComponentById()获取所有子组件并进行数据填充，大量调用该方法，会损耗ListContainer的性能。比较好的解决方案是在创建列表项实例时进行调用，将获取到的所有子组件绑定到列表项的实例中，当从缓存中获取到列表项实例后，直接使用绑定的的子组件填充新数据。

我们重新写一个例子，预期效果图如下：

这里说明一下，文档接上一篇，项目我也没有重新创建，还是在上一篇文档中的项目基础上来写的。

完整示例代码如下：

1、首先我们先在layout下新建一个布局文件。listcontainer_layout2.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_container3"
        ohos:height="match_parent"
        ohos:width="match_parent"/>
</DirectionalLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13

然后继续创建xml文件，用于表示ListContainer中每个Item的布局样式，list_item_demo3_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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2、graphic目录下，我们创建好资源文件，因为这里用到了switch开关按钮，我们设计几个样式：

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>
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8

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>
1
2
3
4
5
6
7
8

到此关于页面布局部分，我们已经准备完毕。

3、在provider包下，新建一个文件SettingItem.java。该类中的属性，就是对应ListContainer中每个Item条目对应的数据。

package com.example.hanrulistcontainer.provider;

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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

4、在该包下继续创建java文件，创建SettingProvider.java

package com.example.hanrulistcontainer.provider;

import com.example.hanrulistcontainer.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.components.element.StateElement;

import java.util.List;

public class SettingProvider extends BaseItemProvider {
    // ListContainer的数据集合
    private List<SettingItem> settingList;
    private AbilitySlice slice;

    public SettingProvider(List<SettingItem> list, AbilitySlice slice) {
        this.settingList = list;
        this.slice = slice;
    }


    @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_list_item_demo3_setting, null, false);
            holder = new SettingHolder(cpt);
            // 将获取到的子组件信息绑定到列表项的实例中
            cpt.setTag(holder);
        } else {
            cpt = component;
            // 从缓存中获取到列表项实例后，直接使用绑定的子组件信息进行数据填充。
            holder = (SettingHolder) cpt.getTag();
        }
        holder.settingIma.setPixelMap(setting.getImageId());
        holder.settingText.setText(setting.getSettingName());
        holder.settingSwitch.setChecked(setting.isChecked());
        return cpt;
    }

    
    // 用于保存列表项中的子组件信息
    // 使用该内部类，目的是为了减少findComponentById被调用的次数，从而优化性能。
    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);
            // 设置switch的开关
            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;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

说明：这里使用了SettingHolder这个内部类，目的是为了减少findComponentById被调用的次数。

5、在slice目录下创建一个新的AbilitySlice文件：ThirdAbilitySlice.java

package com.example.hanrulistcontainer.slice;

import com.example.hanrulistcontainer.ResourceTable;
import com.example.hanrulistcontainer.provider.SettingItem;
import com.example.hanrulistcontainer.provider.SettingProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ListContainer;

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

public class ThirdAbilitySlice extends AbilitySlice {

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        setUIContent(ResourceTable.Layout_listcontainer_layout2);
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container3);
        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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

6、修改一下程序的 入口：

package com.example.hanrulistcontainer;

import com.example.hanrulistcontainer.slice.MainAbilitySlice;
import com.example.hanrulistcontainer.slice.SecondAbilitySlice;
import com.example.hanrulistcontainer.slice.ThirdAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
//        super.setMainRoute(MainAbilitySlice.class.getName());
//        super.setMainRoute(SecondAbilitySlice.class.getName());
        super.setMainRoute(ThirdAbilitySlice.class.getName());
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

到此代码部分结束，运行程序即可。

目前为止，我们写的数据都是假数据，等到我们学习了网络，就可以从网络上获取数据，然后解析，通过ListContainer展示出来了。

更多内容：

1、社区：鸿蒙巴士https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交流QQ群：714518656

4、视频课：https://www.chengxuka.com