一、應用場景

??需要顯示某些資訊：用戶一眼就能夠看到的是主要資訊，點擊后顯示更加詳細的資訊，

二、實作效果

三、實作步驟

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實作多選效果