项目实训第二周第三篇

---

鸿蒙前端ListContainer的运用

---

1.在member_management.xml中添加ListContainer元素。

 <ListContainer
                ohos:width="match_parent"
                ohos:height="match_content"
                ohos:background_element="#FFFFFFFF"
                ohos:id="$+id:list_container_member"
                >

            </ListContainer>

2.SampleItemProvider.java，用于给listContainer提供实体类对象。

SampleItemProvider.java代码：

import com.chinasofti.smartclassroomtv.ResourceTable;
import com.chinasofti.smartclassroomtv.data.SampleItem;
import com.chinasofti.smartclassroomtv.data.SampleItemProvider;
import com.chinasofti.smartclassroomtv.demain.Question;
import ohos.aafwk.ability.fraction.Fraction;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.*;
import ohos.agp.window.dialog.ToastDialog;

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

public class Member_management extends Fraction {
    private ListContainer listContainer;
    private Button aft;
    private Button pre;
    private Button search_btn;
    private Button return_btn;
    private Button show_add_student_frame;
    private Button close_add_student_frame;
    private Button add_student_btn;
    private TextField id_input;
    private DependentLayout add_student_frame;
    private TextField search_tf;
    private int page = 1;
    private Text page_text;
    private Button delete_btn;
    List<SampleItem> list;
    SampleItemProvider sampleItemProvider;

    @Override
    protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
        Component component=scatter.parse(ResourceTable.Layout_menber_management,container,false);
        return  component;
    }

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        listContainer= (ListContainer)
                getFractionAbility().findComponentById(ResourceTable.Id_list_container_member);
        list = getData(page);
        sampleItemProvider = new SampleItemProvider(getPageData(page), getFractionAbility());
        listContainer.setItemProvider(sampleItemProvider);

        add_student_frame = (DependentLayout)
                getFractionAbility().findComponentById(ResourceTable.Id_add_student_frame);

        close_add_student_frame = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_cancle);

        close_add_student_frame.setClickedListener(lis->{
            //显示添加学生界面
            add_student_frame.setVisibility(1);

        });

        show_add_student_frame = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_btn_add_student);

        show_add_student_frame.setClickedListener(lis->{
            //显示添加学生界面
            add_student_frame.setVisibility(0);

        });

        return_btn = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_btn_return);

        return_btn.setClickedListener(lis->{
            sampleItemProvider = new SampleItemProvider(getPageData(page), getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
        });

        add_student_btn = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_add_btn);

        id_input = (TextField)
                getFractionAbility().findComponentById(ResourceTable.Id_id_input);

        //在这里添加学生
        add_student_btn.setClickedListener(lis->{
            String id = id_input.getText();
            if(id.equals(null))
                return;
            SampleItem sampleItem = new SampleItem("name",id);
            list.add(sampleItem);
            sampleItemProvider = new SampleItemProvider(getPageData(page), getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
            add_student_frame.setVisibility(1);
        });


        search_btn = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_btn_search);

        search_tf = (TextField)
                getFractionAbility().findComponentById(ResourceTable.Id_search);

        search_btn.setClickedListener(lis->{
            String nameOrId = search_tf.getText();
            ArrayList<SampleItem> search_result = new ArrayList<>();
            for (int i=0;i<list.size();i++){
                SampleItem sampleItem = list.get(i);
                if (sampleItem.getId().equals(nameOrId)||sampleItem.getName().equals(nameOrId)){
                    search_result.add(sampleItem);
                }
            }

//            if (search_result.size()==0){
                new ToastDialog(getContext()).setText("无搜索结果").show();
//                return;
//            }

            sampleItemProvider = new SampleItemProvider(search_result, getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
        });

        delete_btn = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_delete);

        delete_btn.setClickedListener(lis->{
            int len = (Math.min(list.size(),page*14) - (page-1)*14);
            int count = 0;
            for (int i = 0; i< len ; i++ ){
                Checkbox cb = (Checkbox) listContainer.getComponentAt(i).findComponentById(ResourceTable.Id_item_name);
                if (cb.isChecked()){
                    list.remove((page-1)*14 + (i-count));
                    count++;
                }
            }
            sampleItemProvider = new SampleItemProvider(getPageData(page), getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
        });


        page_text = (Text)
                getFractionAbility().findComponentById(ResourceTable.Id_page);
        page_text.setText(""+page);

        aft = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_aft);

        aft.setClickedListener(lis->{
            if ((page)*14 >= list.size())
                return;
            sampleItemProvider = new SampleItemProvider(getPageData(++page), getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
            page_text.setText(""+page);
        });

        pre = (Button)
                getFractionAbility().findComponentById(ResourceTable.Id_pre);

        pre.setClickedListener(lis->{
            if (page<=1)
                return;
            sampleItemProvider = new SampleItemProvider(getPageData(--page), getFractionAbility());
            listContainer.setItemProvider(sampleItemProvider);
            page_text.setText(""+page);
        });

    }

    //从后端数据库获得所有学生信息，保存到list
    private ArrayList<SampleItem> getData(int page) {
        ArrayList<SampleItem> list = new ArrayList<>();
        for (int i = 1; i <= 45; i++) {
            list.add(new SampleItem("姓名"+i,"id"+i));
        }
        return list;
    }

    //从list获取一页的学生信息，不连接后端
    private ArrayList<SampleItem> getPageData(int page) {
        ArrayList<SampleItem> list2 = new ArrayList<>();
        for (int i = (page-1)*14; i < Math.min(list.size(),page*14); i++) {
            list2.add(list.get(i));
        }
        return list2;
    }

}

初始化ListContainer：

listContainer= (ListContainer)getFractionAbility().findComponentById(ResourceTable.Id_list_container_member);
list = getData(page);
sampleItemProvider = new SampleItemProvider(getPageData(page), getFractionAbility());
listContainer.setItemProvider(sampleItemProvider);

3.SampleItem.java,是ListContainer中要添加的实体类。

public class SampleItem {
    private String name;
    private String Id;

    public SampleItem(String name,String Id) {
        this.name = name;
        this.Id = Id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getId() {
        return Id;
    }
    public void setId(String Id) {
        this.Id = Id;
    }
}

4.item_sample.xml文件，实体类SampleItem的布局文件

<?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="horizontal"
    ohos:background_element="#FF00FF04">

    <Checkbox
        ohos:id="$+id:item_name"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:width="0vp"
        ohos:text="Name"
        ohos:left_margin="16vp"
        ohos:text_size="10fp" />


    <Text
        ohos:id="$+id:item_id"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:width="0vp"
        ohos:padding="4vp"
        ohos:text="Id"
        ohos:text_size="10fp"
        ohos:left_margin="10vp"
        ohos:text_alignment="center"/>

    <Button
        ohos:id="$+id:item_oprate"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:width="0vp"
        ohos:padding="4vp"
        ohos:text="Op"
        ohos:left_margin="10vp"
        ohos:text_size="10fp"
        ohos:text_alignment="center"/>


</DirectionalLayout>

5.演示

图中绿色部分即为ListContainer实现，数据是自动生成的，翻页会用新数据重新加载ListContainer：

---