HarmonyOS ListContainer 实现列表

本是古典何须时尚 2022-10-12 00:49 6阅读 0赞

先看下实现的效果如下:

![20210701231030205.gif][]

ListContainer 是用来实现列表的

学习ListContainer 这个属性看实现的源码是少不了的,

在里面看到setItemProvider 应该是用来记载item的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70][]

它里面是 BaseItemProvider 在跳进去看看

这个里面有获取item ,以及布局,刷新等,(不过我看的第一次看到getCount,getItem,getItemId,还以为是andriod的viewpage呢,开个玩笑,这里大致能想到,继承这个抽象类的时候,会生成四个方法,getComponent 是加载list的item布局的,getItem是用来获取item内容的,)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1][]

看到这,我们要想使用setItemProvider 就要创建一个类来继承这个抽象的BaseItemProvider

明白了大致的思路下面开始,

首先在主界面的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:orientation="vertical">
    
        <ListContainer
            ohos:id="$+id:list"
            ohos:height="match_parent"
            ohos:width="match_parent"/>
    
    </DirectionalLayout>

我这里创建了一个 BaseProvider 来继承 BaseItemProvider

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 2][]

生成之后就是往里面添加内容了,具体的如下,

package com.example.myapplication.slice;
    
    import com.example.myapplication.ResourceTable;
    import ohos.aafwk.ability.AbilitySlice;
    import ohos.agp.components.BaseItemProvider;
    import ohos.agp.components.Component;
    import ohos.agp.components.ComponentContainer;
    import ohos.agp.components.LayoutScatter;
    
    import java.util.List;
    
    public class BaseProvider extends BaseItemProvider {
        // 定义一个list
        private List<String> list;
        // 定义一个上下文
        private AbilitySlice content;
    
        public BaseProvider(List<String> list,AbilitySlice content) {
            super();
            this.list = list;
            this.content = content;
        }
    
        @Override
        public int getCount() {
            return list == null ? 0 : list.size();
        }
    
        @Override
        public Object getItem(int i) {
            return list.get(i);
        }
    
        @Override
        public long getItemId(int i) {
            return i;
        }
    
        @Override
        public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
            component = LayoutScatter.getInstance(content).parse(ResourceTable.Layout_item_sample, null, false);
            return component;
        }
    }

这里插入的一个item的如下

<?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:item"
            ohos:height="60fp"
            ohos:width="match_content"
            ohos:text="HarmonyOS"
            ohos:layout_alignment="center"
            ohos:text_size="20fp"/>
        <Text
            ohos:height="1fp"
            ohos:width="match_parent"
            ohos:background_element="#00d8a0"/>
    </DirectionalLayout>

写好之后就去java里面去试试

下面先写100个数据看看

package com.example.myapplication.slice;
    
    import com.example.myapplication.ResourceTable;
    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 MainAbilitySlice extends AbilitySlice {
        private ListContainer listContainer;
    
        @Override
        public void onStart(Intent intent) {
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_main_layout);
    
            listContainer = (ListContainer) findComponentById(ResourceTable.Id_list);
    
            List<String> list = new ArrayList<>();
            for (int i = 0; i < 100; i++) {
                list.add("");
            }
            BaseProvider baseProvider = new BaseProvider(list, this);
            listContainer.setItemProvider(baseProvider);
    
            listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
                @Override
                public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
                    new ToastDialog(getContext()).setText("点击了第" + i  + "个").show();
                }
            });
    
        }
    
    
        @Override
        public void onActive() {
            super.onActive();
        }
    
        @Override
        public void onForeground(Intent intent) {
            super.onForeground(intent);
        }
    }

今天写实现一个简单的list ,list里面的要学习的内容挺多的,后续在更新一些,添加item 和删除item

[20210701231030205.gif]: /images/20221005/27641de29e7a4a3495f8f87c538a6770.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70]: /images/20221005/8ee2b8d144d049b09556b28d7224386c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1]: /images/20221005/6e3c809aebc043a2bae5fa9c5e088351.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 2]: /images/20221005/61e4e92b1ae64b778688a4ce57e069f8.png