HarmonyOS ArkTS 实战：实现一个校园教室卫生检查与值日记录应用

2301_80781693

148人浏览 · 2026-07-08 21:30:59

2301_80781693 · 2026-07-08 21:30:59 发布

项目效果

本文实现一个基于 HarmonyOS 和 ArkTS 的校园教室卫生检查与值日记录应用。应用可以记录不同教室或区域的值日小组、卫生评分、检查类型和检查状态，并支持检查状态切换、待整改筛选、平均卫生分统计和已检查数量统计。

最终运行效果如下：

【在这里插入项目运行截图】

页面功能包括：

记录检查区域名称；
记录值日小组；
记录卫生评分；
选择教室、宿舍、实验室、公共区检查类型；
标记待检查或已检查；
按全部、待检查、已检查、待整改筛选；
统计已检查数量、平均卫生分、待整改数量；
删除单条卫生检查记录。

前言

校园日常管理中，教室卫生、宿舍卫生、实验室卫生和公共区域卫生检查都比较常见。如果只是靠纸质表格记录，后续统计不太方便，也很难快速知道哪些区域还没检查、哪些区域分数较低、哪些区域需要整改。

本文实现的校园教室卫生检查与值日记录应用，就是围绕这个场景设计的。用户可以添加卫生检查记录，填写检查区域、值日小组和卫生评分，并选择检查类型。完成检查后，可以点击按钮切换状态，页面会自动统计已检查数量、平均卫生分和待整改数量。

这个项目不依赖后端接口，也不需要数据库，但包含表单输入、数组新增、状态切换、条件筛选、列表渲染和动态统计等典型 ArkTS 练习内容。

一、核心数据结构

每一条卫生检查记录使用 CleanRecord 表示：

interface CleanRecord {
  id: number;
  areaName: string;
  groupName: string;
  score: number;
  cleanType: string;
  checked: boolean;
}

其中：

areaName 表示检查区域名称；
groupName 表示负责值日的小组；
score 表示卫生评分；
cleanType 表示教室、宿舍、实验室或公共区；
checked 表示是否已经完成检查。

二、页面状态设计

页面使用 @State 保存输入内容、筛选条件和记录列表：

@State private areaText: string = '';
@State private groupText: string = '';
@State private scoreText: string = '';
@State private cleanType: string = '教室';
@State private filterType: string = '全部';
@State private nextId: number = 5;

@State private records: CleanRecord[] = [
  { id: 1, areaName: '教学楼 A203', groupName: '第一小组', score: 92, cleanType: '教室', checked: true },
  { id: 2, areaName: '实验楼 B401', groupName: '第二小组', score: 76, cleanType: '实验室', checked: true },
  { id: 3, areaName: '三号楼 305 宿舍', groupName: '宿舍成员', score: 85, cleanType: '宿舍', checked: false },
  { id: 4, areaName: '教学楼走廊', groupName: '公共区值日组', score: 68, cleanType: '公共区', checked: false }
];

这些状态变化后，ArkUI 会自动刷新页面。

三、添加卫生检查记录

添加记录时，需要读取检查区域、值日小组和卫生评分，并把卫生评分从字符串转换成数字：

private addRecord(): void {
  const areaName: string = this.areaText.trim();
  const groupName: string = this.groupText.trim();
  const score: number = Number(this.scoreText);

  if (areaName.length === 0 || groupName.length === 0 || Number.isNaN(score) || score < 0 || score > 100) {
    return;
  }

  const record: CleanRecord = {
    id: this.nextId,
    areaName,
    groupName,
    score,
    cleanType: this.cleanType,
    checked: false
  };

  this.records = [record, ...this.records];
  this.nextId += 1;
  this.areaText = '';
  this.groupText = '';
  this.scoreText = '';
}

这里把新记录放在数组最前面，方便用户优先看到最新添加的检查内容。

四、状态切换和删除

点击“完成检查”时，只需要切换当前记录的 checked 状态：

private toggleChecked(id: number): void {
  this.records = this.records.map((item: CleanRecord) => {
    if (item.id === id) {
      return {
        id: item.id,
        areaName: item.areaName,
        groupName: item.groupName,
        score: item.score,
        cleanType: item.cleanType,
        checked: !item.checked
      };
    }
    return item;
  });
}

删除记录使用 filter()：

private deleteRecord(id: number): void {
  this.records = this.records.filter((item: CleanRecord) => item.id !== id);
}

五、筛选和统计

筛选逻辑如下：

private getFilteredRecords(): CleanRecord[] {
  if (this.filterType === '待检查') {
    return this.records.filter((item: CleanRecord) => !item.checked);
  }

  if (this.filterType === '已检查') {
    return this.records.filter((item: CleanRecord) => item.checked);
  }

  if (this.filterType === '待整改') {
    return this.records.filter((item: CleanRecord) => item.score < 80);
  }

  return this.records;
}

平均卫生分和待整改数量也直接从数组计算：

private getAverageScore(): number {
  if (this.records.length === 0) {
    return 0;
  }

  let total: number = 0;
  this.records.forEach((item: CleanRecord) => {
    total += item.score;
  });
  return Math.round(total / this.records.length);
}

private getProblemCount(): number {
  return this.records.filter((item: CleanRecord) => item.score < 80).length;
}

六、页面布局说明

页面主要由四部分组成：

顶部标题卡片：展示应用名称和说明；
统计卡片：展示已检查、平均卫生分、待整改；
添加表单：输入检查区域、值日小组和卫生评分；
记录列表：展示每条卫生检查记录，并支持检查状态切换和删除。

列表使用 List 和 ForEach 渲染：

List() {
  ForEach(this.getFilteredRecords(), (item: CleanRecord) => {
    ListItem() {
      this.CleanCard(item);
    }
  }, (item: CleanRecord) => item.id.toString());
}

当筛选结果为空时，页面显示空状态提示，避免列表区域空白。

七、Index.ets 完整代码

打开文件：

entry/src/main/ets/pages/Index.ets

将其中内容替换为下面代码：

interface CleanRecord {
  id: number;
  areaName: string;
  groupName: string;
  score: number;
  cleanType: string;
  checked: boolean;
}

@Entry
@Component
struct Index {
  @State private areaText: string = '';
  @State private groupText: string = '';
  @State private scoreText: string = '';
  @State private cleanType: string = '教室';
  @State private filterType: string = '全部';
  @State private nextId: number = 5;

  @State private records: CleanRecord[] = [
    { id: 1, areaName: '教学楼 A203', groupName: '第一小组', score: 92, cleanType: '教室', checked: true },
    { id: 2, areaName: '实验楼 B401', groupName: '第二小组', score: 76, cleanType: '实验室', checked: true },
    { id: 3, areaName: '三号楼 305 宿舍', groupName: '宿舍成员', score: 85, cleanType: '宿舍', checked: false },
    { id: 4, areaName: '教学楼走廊', groupName: '公共区值日组', score: 68, cleanType: '公共区', checked: false }
  ];

  private addRecord(): void {
    const areaName: string = this.areaText.trim();
    const groupName: string = this.groupText.trim();
    const score: number = Number(this.scoreText);

    if (areaName.length === 0 || groupName.length === 0 || Number.isNaN(score) || score < 0 || score > 100) {
      return;
    }

    const record: CleanRecord = {
      id: this.nextId,
      areaName,
      groupName,
      score,
      cleanType: this.cleanType,
      checked: false
    };

    this.records = [record, ...this.records];
    this.nextId += 1;
    this.areaText = '';
    this.groupText = '';
    this.scoreText = '';
  }

  private toggleChecked(id: number): void {
    this.records = this.records.map((item: CleanRecord) => {
      if (item.id === id) {
        return {
          id: item.id,
          areaName: item.areaName,
          groupName: item.groupName,
          score: item.score,
          cleanType: item.cleanType,
          checked: !item.checked
        };
      }
      return item;
    });
  }

  private deleteRecord(id: number): void {
    this.records = this.records.filter((item: CleanRecord) => item.id !== id);
  }

  private getFilteredRecords(): CleanRecord[] {
    if (this.filterType === '待检查') {
      return this.records.filter((item: CleanRecord) => !item.checked);
    }

    if (this.filterType === '已检查') {
      return this.records.filter((item: CleanRecord) => item.checked);
    }

    if (this.filterType === '待整改') {
      return this.records.filter((item: CleanRecord) => item.score < 80);
    }

    return this.records;
  }

  private getCheckedCount(): number {
    return this.records.filter((item: CleanRecord) => item.checked).length;
  }

  private getAverageScore(): number {
    if (this.records.length === 0) {
      return 0;
    }

    let total: number = 0;
    this.records.forEach((item: CleanRecord) => {
      total += item.score;
    });
    return Math.round(total / this.records.length);
  }

  private getProblemCount(): number {
    return this.records.filter((item: CleanRecord) => item.score < 80).length;
  }

  private getTypeColor(type: string): ResourceColor {
    if (type === '教室') {
      return '#2563EB';
    }

    if (type === '宿舍') {
      return '#059669';
    }

    if (type === '实验室') {
      return '#7C3AED';
    }

    return '#D97706';
  }

  @Builder
  HeaderCard() {
    Column({ space: 8 }) {
      Text('校园卫生检查')
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.White)
        .width('100%');

      Text('记录值日区域、卫生评分和检查状态')
        .fontSize(14)
        .fontColor('#E0F2FE')
        .width('100%');
    }
    .width('100%')
    .padding(20)
    .backgroundColor('#2563EB')
    .borderRadius(8);
  }

  @Builder
  StatCard(title: string, value: string, color: ResourceColor, bgColor: ResourceColor) {
    Column({ space: 4 }) {
      Text(value)
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .fontColor(color);

      Text(title)
        .fontSize(12)
        .fontColor('#475467');
    }
    .width('31%')
    .height(76)
    .justifyContent(FlexAlign.Center)
    .backgroundColor(bgColor)
    .borderRadius(8);
  }

  @Builder
  TypeButton(text: string) {
    Button(text)
      .height(34)
      .layoutWeight(1)
      .fontSize(13)
      .fontColor(this.cleanType === text ? Color.White : '#344054')
      .backgroundColor(this.cleanType === text ? this.getTypeColor(text) : '#E8EEF7')
      .borderRadius(8)
      .onClick(() => {
        this.cleanType = text;
      });
  }

  @Builder
  FilterButton(text: string) {
    Button(text)
      .height(34)
      .layoutWeight(1)
      .fontSize(13)
      .fontColor(this.filterType === text ? Color.White : '#344054')
      .backgroundColor(this.filterType === text ? '#2563EB' : '#E8EEF7')
      .borderRadius(8)
      .onClick(() => {
        this.filterType = text;
      });
  }

  @Builder
  CleanCard(item: CleanRecord) {
    Column({ space: 10 }) {
      Row() {
        Text(item.areaName)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#182431')
          .layoutWeight(1)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis });

        Text(item.checked ? '已检查' : '待检查')
          .fontSize(12)
          .fontColor(Color.White)
          .backgroundColor(item.checked ? '#059669' : '#D97706')
          .borderRadius(6)
          .padding({ left: 8, right: 8, top: 4, bottom: 4 });
      }
      .width('100%');

      Text(`值日小组：${item.groupName}`)
        .fontSize(13)
        .fontColor('#667085')
        .width('100%');

      Row({ space: 8 }) {
        Text(item.cleanType)
          .fontSize(12)
          .fontColor(Color.White)
          .backgroundColor(this.getTypeColor(item.cleanType))
          .borderRadius(6)
          .padding({ left: 8, right: 8, top: 4, bottom: 4 });

        Text(`${item.score} 分`)
          .fontSize(12)
          .fontColor(item.score < 80 ? '#D92D20' : '#059669')
          .backgroundColor(item.score < 80 ? '#FEE4E2' : '#ECFDF3')
          .borderRadius(6)
          .padding({ left: 8, right: 8, top: 4, bottom: 4 });
      }
      .width('100%');

      Row({ space: 10 }) {
        Button(item.checked ? '改为待检查' : '完成检查')
          .height(34)
          .fontSize(13)
          .fontColor('#2563EB')
          .backgroundColor('#EFF6FF')
          .borderRadius(8)
          .padding({ left: 12, right: 12 })
          .onClick(() => {
            this.toggleChecked(item.id);
          });

        Blank();

        Button('删除')
          .height(34)
          .fontSize(13)
          .fontColor('#D92D20')
          .backgroundColor('#FEE4E2')
          .borderRadius(8)
          .padding({ left: 12, right: 12 })
          .onClick(() => {
            this.deleteRecord(item.id);
          });
      }
      .width('100%');
    }
    .width('100%')
    .padding(16)
    .margin({ bottom: 12 })
    .backgroundColor(Color.White)
    .borderRadius(8)
    .shadow({ radius: 10, color: '#10000000', offsetX: 0, offsetY: 4 });
  }

  @Builder
  EmptyState() {
    Column({ space: 8 }) {
      Text('暂无卫生记录')
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .fontColor('#344054');

      Text('添加检查区域后，这里会显示卫生检查列表。')
        .fontSize(13)
        .fontColor('#667085')
        .textAlign(TextAlign.Center);
    }
    .width('100%')
    .padding(26)
    .backgroundColor(Color.White)
    .borderRadius(8);
  }

  build() {
    Column() {
      this.HeaderCard();

      Row() {
        this.StatCard('已检查', `${this.getCheckedCount()}`, '#059669', '#ECFDF3');
        this.StatCard('平均分', `${this.getAverageScore()}`, '#2563EB', '#EFF6FF');
        this.StatCard('待整改', `${this.getProblemCount()}`, '#D97706', '#FFFBEB');
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({ top: 14 });

      Column() {
        Text('添加卫生记录')
          .fontSize(17)
          .fontWeight(FontWeight.Bold)
          .fontColor('#182431')
          .width('100%')
          .margin({ bottom: 12 });

        TextInput({ placeholder: '检查区域，例如 教学楼 A203', text: this.areaText })
          .height(42)
          .fontSize(14)
          .backgroundColor('#F5F7FA')
          .borderRadius(8)
          .padding({ left: 12, right: 12 })
          .onChange((value: string) => {
            this.areaText = value;
          });

        TextInput({ placeholder: '值日小组，例如 第一小组', text: this.groupText })
          .height(42)
          .fontSize(14)
          .backgroundColor('#F5F7FA')
          .borderRadius(8)
          .padding({ left: 12, right: 12 })
          .margin({ top: 10 })
          .onChange((value: string) => {
            this.groupText = value;
          });

        TextInput({ placeholder: '卫生评分 0-100', text: this.scoreText })
          .height(42)
          .fontSize(14)
          .backgroundColor('#F5F7FA')
          .borderRadius(8)
          .type(InputType.Number)
          .padding({ left: 12, right: 12 })
          .margin({ top: 10 })
          .onChange((value: string) => {
            this.scoreText = value;
          });

        Text('检查类型')
          .fontSize(14)
          .fontColor('#667085')
          .width('100%')
          .margin({ top: 14, bottom: 10 });

        Row({ space: 8 }) {
          this.TypeButton('教室');
          this.TypeButton('宿舍');
          this.TypeButton('实验室');
          this.TypeButton('公共区');
        }
        .width('100%');

        Button('添加记录')
          .height(44)
          .fontSize(16)
          .fontColor(Color.White)
          .backgroundColor('#2563EB')
          .borderRadius(8)
          .width('100%')
          .margin({ top: 16 })
          .onClick(() => {
            this.addRecord();
          });
      }
      .width('100%')
      .padding(16)
      .backgroundColor(Color.White)
      .borderRadius(8)
      .margin({ top: 16 })
      .shadow({ radius: 10, color: '#10000000', offsetX: 0, offsetY: 4 });

      Text('卫生检查列表')
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .fontColor('#182431')
        .width('100%')
        .margin({ top: 20, bottom: 12 });

      Row({ space: 8 }) {
        this.FilterButton('全部');
        this.FilterButton('待检查');
        this.FilterButton('已检查');
        this.FilterButton('待整改');
      }
      .width('100%')
      .margin({ bottom: 12 });

      if (this.getFilteredRecords().length === 0) {
        this.EmptyState();
      } else {
        List() {
          ForEach(this.getFilteredRecords(), (item: CleanRecord) => {
            ListItem() {
              this.CleanCard(item);
            }
          }, (item: CleanRecord) => item.id.toString());
        }
        .width('100%')
        .layoutWeight(1)
        .scrollBar(BarState.Off);
      }
    }
    .width('100%')
    .height('100%')
    .padding({ left: 18, right: 18, top: 16 })
    .backgroundColor('#F3F6FB');
  }
}

八、运行测试

在 DevEco Studio 中打开项目，进入：

entry/src/main/ets/pages/Index.ets

使用 Preview、模拟器或真机运行页面。测试步骤如下：

输入检查区域名称；
输入值日小组；
输入 0 到 100 的卫生评分；
选择教室、宿舍、实验室或公共区；
点击“添加记录”；
点击“完成检查”切换状态；
使用筛选按钮查看不同记录；
删除单条记录；
检查统计卡片是否同步变化。

经过测试，添加记录、状态切换、筛选、删除和统计功能均可正常运行。

九、总结

本文基于 HarmonyOS 和 ArkTS 实现了一个校园教室卫生检查与值日记录应用。项目通过 @State 管理页面数据，使用 ArkUI 完成页面布局，并实现了卫生记录添加、检查状态切换、检查类型选择、筛选展示和动态统计等功能。

这个项目虽然是单页面应用，但业务场景具体，交互逻辑完整，适合用来练习 ArkTS 中的表单输入、数组操作、条件渲染和列表渲染。后续可以继续扩展本地存储、检查日期、整改备注、班级排行榜和卫生趋势统计等功能。

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

HarmonyOS 7 更新亮点实录1：Ability Kit 深度剖析 AgentCard 与动态脚本引

深度剖析 HarmonyOS 7.0 引入的 AgentCard 智能体卡片与基于 ArkTS 脚本的动态 Skill 管理引擎，探讨如何解耦核心业务，构建多维上下文感知的轻量级服务架构。

HarmonyOS开发者社区

HarmonyOS 应用开发《掌上英语》第1篇：HarmonyOS 多模块工程实践：从零搭建多模块应用

本文详细介绍了 HarmonyOS 多模块工程的四层架构设计，从的模块声明到的依赖管理，再到每个模块的具体职责。更好的团队协作：不同团队可以并行开发不同模块更高的代码复用率：commonLib 和 components 模块可被多个 feature 复用更快的构建速度：增量编译时只需重新编译变更的模块更清晰的架构边界：依赖规则强制执行，防止架构腐化在下一篇《ArkTS 模块化开发：Index.et