HarmonyOS：ListContainer实现表格_鸿蒙开发实现excel表格

作者：很楠不爱3 | 2024-03-24 02:12:06

踩

鸿蒙开发实现excel表格

一、场景

需要一个表格展示一下成绩信息。

二、实现效果

在这里插入图片描述

三、实现步骤

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_pdf"
        ohos:width="match_parent"
        ohos:height="40vp"
        ohos:background_element="#6666FF"
        ohos:orientation="horizontal">

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

    <Text
        ohos:id="$+id:pdf_info"
        ohos:width="match_parent"
        ohos:height="30vp"
        ohos:text_alignment="center"
        ohos:text_size="24fp"
        ohos:text_color="#000000"
        ohos:text="华北电力大学学业成绩表">
    </Text>

    <Component
        ohos:width="match_parent"
        ohos:height="1.5vp"
        ohos:background_element="#B4B3B3"/>

    <include
        ohos:height="match_content"
        ohos:layout="$layout:credit_item"
        ohos:width="match_parent">
    </include>

    <Component
        ohos:width="match_parent"
        ohos:height="1.5vp"
        ohos:background_element="#B4B3B3"/>

    <include
        ohos:height="match_content"
        ohos:layout="$layout:pdf_list_item"
        ohos:width="match_parent">
    </include>

    <Component
        ohos:width="match_parent"
        ohos:height="1.5vp"
        ohos:background_element="#B4B3B3"/>

    <ListContainer
        ohos:id="$+id:cj_list"
        ohos:height="600vp"
        ohos:width="match_parent">

    </ListContainer>

</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
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

在这里插入图片描述
其中上方的credit_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="horizontal">

    <Text
        ohos:id="$+id:text_total_credit"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:multiple_lines="true"
        ohos:weight="1"
        ohos:max_text_lines="10"
        ohos:layout_alignment="center"
        ohos:text_alignment="center"
        ohos:bottom_padding="10vp"
        ohos:top_padding="10vp"
        ohos:text_color="#000000"
        ohos:text_size="15fp"
        ohos:text="总学分"/>

    <Component
        ohos:width="1.5vp"
        ohos:height="70vp"
        ohos:background_element="#B4B3B3"/>

    <Text
        ohos:id="$+id:text_major_credit"
        ohos:multiple_lines="true"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:max_text_lines="10"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        ohos:bottom_padding="10vp"
        ohos:top_padding="10vp"
        ohos:text_color="#000000"
        ohos:text_size="15fp"
        ohos:text="必修" />

    <Component
        ohos:width="1.5vp"
        ohos:height="70vp"
        ohos:background_element="#B4B3B3"/>

    <Text
        ohos:id="$+id:text_spec_credit"
        ohos:multiple_lines="true"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:text_alignment="center"
        ohos:weight="1"
        ohos:max_text_lines="10"
        ohos:layout_alignment="center"
        ohos:bottom_padding="10vp"
        ohos:top_padding="10vp"
        ohos:text_color="#000000"
        ohos:text_size="15fp"
        ohos:text="专选" />

    <Component
        ohos:width="1.5vp"
        ohos:height="70vp"
        ohos:background_element="#B4B3B3"/>

    <Text
        ohos:id="$+id:text_practice_credit"
        ohos:multiple_lines="true"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:max_text_lines="10"
        ohos:layout_alignment="center"
        ohos:text_alignment="center"
        ohos:bottom_padding="10vp"
        ohos:top_padding="10vp"
        ohos:text_color="#000000"
        ohos:text_size="15fp"
        ohos:text="实践" />

    <Component
        ohos:width="1.5vp"
        ohos:height="70vp"
        ohos:background_element="#B4B3B3"/>

    <Text
        ohos:id="$+id:text_sch_credit"
        ohos:multiple_lines="true"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:text_alignment="center"
        ohos:weight="1"
        ohos:max_text_lines="10"
        ohos:layout_alignment="center"
        ohos:bottom_padding="10vp"
        ohos:top_padding="10vp"
        ohos:text_color="#000000"
        ohos:text_size="15fp"
        ohos:text="校选"/>

    <Component
        ohos:width="1.5vp"
        ohos:height="70vp"
        ohos:background_element="#B4B3B3"/>

    <Text
        ohos:id="$+id:text_avg"
        ohos:multiple_lines="true"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:text_alignment="center"
        ohos:weight="1.5"
        ohos:max_text_lines="10"
        ohos:layout_alignment="center"
        ohos:bottom_padding="10vp"
        ohos:top_padding="10vp"
        ohos:text_color="#000000"
        ohos:text_size="15fp"
        ohos:text="平均学分绩"/>

</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
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

在这里插入图片描述
下方的pdf_list_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">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

    <Text
        ohos:id="$+id:text_course_name"
        ohos:multiple_lines="true"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:weight="4"
        ohos:max_text_lines="10"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        ohos:bottom_padding="10vp"
        ohos:top_padding="10vp"
        ohos:text_color="#000000"
        ohos:text_size="15fp"
        ohos:text="课程名称"/>

    <Component
        ohos:width="1.5vp"
        ohos:height="70vp"
        ohos:background_element="#B4B3B3"/>

    <Text
        ohos:id="$+id:text_course_nature"
        ohos:multiple_lines="true"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:weight="1.5"
        ohos:max_text_lines="10"
        ohos:bottom_padding="10vp"
        ohos:text_alignment="center"
        ohos:top_padding="10vp"
        ohos:text_color="#000000"
        ohos:text_size="15fp"
        ohos:layout_alignment="center"
        ohos:text="课程性质" />

    <Component
        ohos:width="1.5vp"
        ohos:height="70vp"
        ohos:background_element="#B4B3B3"/>

    <Text
        ohos:id="$+id:text_year_semester"
        ohos:multiple_lines="true"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:weight="2.5"
        ohos:max_text_lines="10"
        ohos:bottom_padding="10vp"
        ohos:text_alignment="center"
        ohos:text_color="#000000"
        ohos:top_padding="10vp"
        ohos:text_size="15fp"
        ohos:layout_alignment="center"
        ohos:text="学年/学期" />

    <Component
        ohos:width="1.5vp"
        ohos:height="70vp"
        ohos:background_element="#B4B3B3"/>

    <Text
        ohos:id="$+id:text_credit"
        ohos:multiple_lines="true"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:max_text_lines="10"
        ohos:text_alignment="center"
        ohos:bottom_padding="10vp"
        ohos:top_padding="10vp"
        ohos:text_color="#000000"
        ohos:text_size="15fp"
        ohos:layout_alignment="center"
        ohos:text="学分" />

    <Component
        ohos:width="1.5vp"
        ohos:height="70vp"
        ohos:background_element="#B4B3B3"/>

    <Text
        ohos:id="$+id:text_grade"
        ohos:multiple_lines="true"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:max_text_lines="10"
        ohos:bottom_padding="10vp"
        ohos:text_alignment="center"
        ohos:text_color="#000000"
        ohos:top_padding="10vp"
        ohos:text_size="15fp"
        ohos:layout_alignment="center"
        ohos:text="成绩"/>

    <Component
        ohos:width="1.5vp"
        ohos:height="70vp"
        ohos:background_element="#B4B3B3"/>

    <Text
        ohos:id="$+id:text_gpa"
        ohos:multiple_lines="true"
        ohos:width="0vp"
        ohos:height="match_content"
        ohos:text_alignment="center"
        ohos:weight="1"
        ohos:max_text_lines="10"
        ohos:bottom_padding="10vp"
        ohos:text_color="#000000"
        ohos:top_padding="10vp"
        ohos:text_size="15fp"
        ohos:layout_alignment="center"
        ohos:text="绩点"/>

    </DirectionalLayout>

    <Component
        ohos:width="match_parent"
        ohos:height="1.5vp"
        ohos:background_element="#B4B3B3"/>

</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
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

在这里插入图片描述

2.适配器

与安卓类似，很多鸿蒙的组件也需要适配器，据此来适应不同类型的数据。

package com.example.ncepu.provider;

import com.example.ncepu.ResourceTable;
import com.example.ncepu.Student.Query.ScorePdfAbility;
import com.example.ncepu.Student.Query.slice.ScorePdfAbilitySlice;
import com.example.ncepu.Utils.Grade;
import ohos.agp.components.*;
import ohos.app.Context;

import java.util.List;

public class ListItemProvider extends BaseItemProvider {

    private List<Grade> list;
    private Context context;

    public ListItemProvider(List<Grade> list, Context context) {
        this.list = list;
        this.context = context;
    }

    @Override
    public int getCount() {
        return list == null ? 0 : list.size();
    }

    @Override
    public Object getItem(int i) {
        if (list != null && i >= 0 && i < list.size()){
            return list.get(i);
        }
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        final Component cpt;
        LayoutScatter layoutScatter = LayoutScatter.getInstance(context);
        if (component == null) {
            cpt = layoutScatter.parse(ResourceTable.Layout_pdf_list_item, null, false);
        } else {
            cpt = component;
        }
        Grade item = list.get(i);
        Text courseName = (Text) cpt.findComponentById(ResourceTable.Id_text_course_name);
        courseName.setText(item.getCourse_name());
        Text courseNature = (Text) cpt.findComponentById(ResourceTable.Id_text_course_nature);
        courseNature.setText(item.getCourse_nature());
        Text nq = (Text) cpt.findComponentById(ResourceTable.Id_text_year_semester);
        nq.setText(item.getXn() + "/" + item.getXq());
        Text credit = (Text) cpt.findComponentById(ResourceTable.Id_text_credit);
        credit.setText(item.getCredit());
        Text mark = (Text) cpt.findComponentById(ResourceTable.Id_text_grade);
        mark.setText(item.getMark());
        Text gpa = (Text) cpt.findComponentById(ResourceTable.Id_text_gpa);
        gpa.setText(item.getGpa());
        return cpt;
    }
}

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

3.主界面逻辑

package com.example.ncepu.Student.Query;

import com.example.ncepu.ResourceTable;
import com.example.ncepu.Student.Query.slice.ScorePdfAbilitySlice;
import com.example.ncepu.Utils.Grade;
import com.example.ncepu.provider.ListItemProvider;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.Image;
import ohos.agp.components.ListContainer;
import ohos.agp.components.Text;

import java.text.DecimalFormat;
import java.util.ArrayList;

import static com.example.ncepu.MainAbility.connectJWGL;

public class ScorePdfAbility extends Ability {

    private ListContainer listContainer;
    private Image back;
    private Text total_tv, major_tv, spec_tv, practice_tv, sch_tv, gpa_tv;
    private Text epu;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(ScorePdfAbilitySlice.class.getName());
        super.setUIContent(ResourceTable.Layout_ability_score_pdf);
        initViews();
    }

    private void initViews() {
        listContainer = (ListContainer) findComponentById(ResourceTable.Id_cj_list);
        back = (Image) findComponentById(ResourceTable.Id_ib_back_pdf);
        back.setClickedListener(component -> onBackPressed());
        //上方
        total_tv = (Text) findComponentById(ResourceTable.Id_text_total_credit);
        major_tv = (Text) findComponentById(ResourceTable.Id_text_major_credit);
        spec_tv = (Text) findComponentById(ResourceTable.Id_text_spec_credit);
        practice_tv = (Text) findComponentById(ResourceTable.Id_text_practice_credit);
        sch_tv = (Text) findComponentById(ResourceTable.Id_text_sch_credit);
        gpa_tv = (Text) findComponentById(ResourceTable.Id_text_avg);
        epu = (Text) findComponentById(ResourceTable.Id_pdf_info);

        final ArrayList<Grade>[] list = new ArrayList[]{new ArrayList()};
        Thread thread = new Thread(() -> {
            try {
                list[0] = connectJWGL.getStudentGrade("", "", "全部");
            } catch (Exception e) {
                e.printStackTrace();
            }
            //计算已获得总学分，其中包括必修、专选、实践、校选以及平均学分绩
            double total = 0, major = 0, spec = 0, practice = 0, sch = 0;
            double sum = 0, credits = 0;
            for(Grade grade : list[0]) {
                String credit = grade.getCredit();
                String nature = grade.getCourse_nature();
                String gpa = grade.getGpa();
                String gradeNature = grade.getGrade_nature();
                double temp = Double.parseDouble(credit);

                if(Double.parseDouble(gpa) < 1) {
                    continue;
                }
                total += temp;
                if(nature.equals("必修课")) {
                    major += temp;
                }else if(nature.equals("专选课")) {
                    spec += temp;
                }else if(nature.equals("实践课")) {
                    practice += temp;
                }else if(nature.equals("校选修课")) {
                    sch += temp;
                }
                double mark = Double.parseDouble(gpa) * 10 + 50;
                sum += temp * mark;
                credits += temp;
            }
            double avg = sum / credits;
            DecimalFormat df = new DecimalFormat("#.00");
            String avgs = df.format(avg);
            total_tv.setText("总学分\n" + total);
            major_tv.setText("必修\n" + major);
            spec_tv.setText("专选\n" + spec);
            practice_tv.setText("实践\n" + practice);
            sch_tv.setText("校选\n" + sch);
            gpa_tv.setText("平均学分绩\n" + avgs);
        });
        thread.start();
        try {
            thread.join();
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        ListItemProvider provider = new ListItemProvider(list[0], this);
        listContainer.setItemProvider(provider);
    }
}
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

获取到数据后对其进行处理，得到我们想要的结果，然后将其传入自定义的Provider中进行处理。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】