HarmonyOS：Text + ListDialog实现类似安卓ExpandableListView的效果（简易版）

一、应用场景

  需要显示某些信息：用户一眼就能够看到的是主要信息，点击后显示更加详细的信息。

二、实现效果

三、实现步骤

1.布局

<?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">

    <DirectionalLayout
        ohos:id="$+id:ly_back"
        ohos:width="match_parent"
        ohos:height="40vp"
        ohos:background_element="#6666FF"
        ohos:orientation="horizontal">

        <Image
            ohos:id="$+id:ib_back"
            ohos:width="18vp"
            ohos:height="21vp"
            ohos:layout_alignment="vertical_center"
            ohos:background_element="$media:back_arrow_2" />

    </DirectionalLayout>


    <DirectionalLayout
        ohos:id="$+id:ly_multiply"
        ohos:layout_alignment="vertical_center"
        ohos:width="match_parent"
        ohos:height="40vp"
        ohos:top_margin="8vp"
        ohos:clickable="false"
        ohos:background_element="#ccc"
        ohos:orientation="horizontal">


        <Button
            ohos:id="$+id:school_year"
            ohos:width="0vp"
            ohos:height="38vp"
            ohos:weight="5"
            ohos:padding="5vp"
            ohos:text_color="#808080"
            ohos:text_size="16fp"
            ohos:text="学年"
            ohos:background_element="$graphic:shape_small"
            ohos:layout_alignment="center"/>


        <Button
            ohos:id="$+id:semester"
            ohos:width="0vp"
            ohos:height="38vp"
            ohos:weight="5"
            ohos:padding="5vp"
            ohos:text_color="#808080"
            ohos:text_size="16fp"
            ohos:text="学期"
            ohos:layout_alignment="center"
            ohos:background_element="$graphic:shape_small"/>


        <Button
            ohos:id="$+id:course"
            ohos:width="0vp"
            ohos:height="38vp"
            ohos:weight="5"
            ohos:padding="5vp"
            ohos:text_color="#808080"
            ohos:text_size="16fp"
            ohos:text="课程性质"
            ohos:layout_alignment="center"
            ohos:background_element="$graphic:shape_small"/>

    </DirectionalLayout>


    <Button
        ohos:id="$+id:btn_query"
        ohos:width="match_parent"
        ohos:height="48vp"
        ohos:margin="10vp"
        ohos:text="查 询"
        ohos:background_element="$graphic:selector"
        ohos:text_size="18fp"/>

    <ScrollView
        ohos:height="1000vp"
        ohos:width="match_parent"
        ohos:match_viewport="true"
        ohos:rebound_effect="true">

        <DirectionalLayout
            ohos:id="$+id:cj_view"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:orientation="vertical"
            ohos:background_element="#F0F3F6">

        </DirectionalLayout>

    </ScrollView>
</DirectionalLayout>

  抛开界面最上方的几个Button，核心的布局代码为：

<ScrollView
    ohos:height="1000vp"
    ohos:width="match_parent"
    ohos:match_viewport="true"
    ohos:rebound_effect="true">

    <DirectionalLayout
        ohos:id="$+id:cj_view"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:orientation="vertical"
        ohos:background_element="#F0F3F6">

    </DirectionalLayout>

</ScrollView>

2.动态添加

  当点击查询按钮后，我们利用代码动态地往cj_view中添加TextView，并且对每一个TextView都设置点击监听事件，当其被点击时就打开一个ListDialog。

3.处理逻辑

//查询点击事件
btn_query = (Button) findComponentById(ResourceTable.Id_btn_query);
btn_query.setClickedListener(component -> {
    String year = schoolYear.getText();
    String semester_ = semester.getText();
    String course_nature = course.getText();
    if(year.equals("学年")) {
        ToastUtil.showMessage(this, "请选择学年！");
    }else if(semester_.equals("学期")) {
        ToastUtil.showMessage(this, "请选择学期！");
    }else if(course_nature.equals("课程性质")) {
        ToastUtil.showMessage(this, "请选择课程性质！");
    }else {
        //开始查询成绩并显示
        try {
            if (list[0].size() == 0) {
                ToastUtil.showMessage(this, "没有查到记录！");
            }else {
                //将list中的内容转换为列表显示出来
                //不断添加Text
                directionalLayout = (DirectionalLayout) findComponentById(ResourceTable.Id_cj_view);
                directionalLayout.removeAllComponents();
                for(int i = 0; i < list[0].size(); i++) {
                    Text text = new Text(getContext());
                    String f = list[0].get(i).getCourse_name() + "\t\t\t\t\t\t\t\t\t\t" + list[0].get(i).getMark();
                    text.setText(f);
                    text.setTextAlignment(TextAlignment.LEFT);
                    ShapeElement bg = new ShapeElement();
                    bg.setRgbColor(RgbColor.fromArgbInt(Color.getIntColor("#D8F3D8")));
                    bg.setCornerRadius(30);
                    text.setBackground(bg);
                    text.setWidth(directionalLayout.getWidth());
                    text.setHeight(100);
                    text.setTextSize(60);
                    directionalLayout.addComponent(text);
                    //添加分割线
                    Component line = new Component(getContext());
                    ShapeElement bg_line = new ShapeElement();
                    bg_line.setRgbColor(RgbColor.fromArgbInt(Color.getIntColor("#ffffff")));
                    line.setBackground(bg_line);
                    line.setWidth(directionalLayout.getWidth());
                    line.setHeight(3);
                    directionalLayout.addComponent(line);
                    //设置点击事件，点击后弹出ListDialog
                    final int t = i;
                    text.setClickedListener(component12 -> {
                        ListDialog listDialog = new ListDialog(getContext());
                        String []items = {
                                        "学年:" + list[0].get(t).getXn(),
                                        "学期:" + list[0].get(t).getXq(),
                                        "课程代码:" + list[0].get(t).getCourse_code(),
                                        "课程性质:" + list[0].get(t).getCourse_nature(),
                                        "考试性质:" + list[0].get(t).getGrade_nature(),
                                        "学分:" + list[0].get(t).getCredit(),
                                        "绩点:" + list[0].get(t).getGpa(),
                                        "开课学院:" + list[0].get(t).getCollege(),
                                        "教学班:" + list[0].get(t).getClass_(),
                                        "任课教师:" + list[0].get(t).getTeacher()
                        };
                        listDialog.setItems(items);
                        listDialog.setSize(800, 1100);
                        listDialog.setTitleText("详细信息:");
                        listDialog.setAlignment(LayoutAlignment.CENTER);
                        listDialog.setOnSingleSelectListener(new IDialog.ClickedListener() {
                            @Override
                            public void onClick(IDialog iDialog, int i) {
                                listDialog.destroy();
                            }
                        });
                        listDialog.show();
                    });
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
});

  布局比较粗糙，还能继续美化！

参考

1. 安卓ExpandableListView的详细使用教程（附代码解析过程）
2. HarmonyOS：利用ListDialog实现多选效果