HarmonyOS ArkTS 实战：实现一个校园实验室设备借用与归还记录应用

2301_80781693

222人浏览 · 2026-07-08 21:30:40

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

项目效果

本文实现一个基于 HarmonyOS 和 ArkTS 的校园实验室设备借用与归还记录应用。应用可以记录实验室设备名称、设备位置、借用时长和设备类型，并支持归还状态切换、超时借用筛选、设备类型展示、平均借用时长统计和已归还数量统计。

最终运行效果如下：

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

页面功能包括：

记录实验室设备名称；
记录设备所在实验室；
记录借用小时数；
选择板卡、传感器、工具、仪器设备类型；
标记借用中或已归还；
按全部、借用中、已归还、超时借用筛选；
统计已归还数量、平均借用时长、超时借用数量；
删除单条设备借用记录。

前言

在计算机、电子信息、嵌入式等课程实验中，学生经常会借用实验室设备，比如开发板、传感器、万用表、螺丝刀套装、调试器和实验仪器。如果没有记录，很容易出现设备借出后忘记归还、借用人不清楚、设备位置混乱等问题。

本文实现的校园实验室设备借用与归还记录应用，就是围绕这个场景设计的。用户可以添加设备借用记录，填写设备名称、实验室位置和借用小时数，并选择设备类型。设备归还后，可以点击按钮切换状态，页面会自动统计已归还数量、平均借用时长和超时借用数量。

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

一、核心数据结构

每一条设备借用记录使用 DeviceRecord 表示：

interface DeviceRecord {
  id: number;
  deviceName: string;
  labName: string;
  borrowHours: number;
  deviceType: string;
  returned: boolean;
}

其中：

deviceName 表示设备名称；
labName 表示设备所在实验室；
borrowHours 表示借用小时数；
deviceType 表示板卡、传感器、工具或仪器；
returned 表示是否已经归还。

二、页面状态设计

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

@State private deviceText: string = '';
@State private labText: string = '';
@State private hoursText: string = '';
@State private deviceType: string = '板卡';
@State private filterType: string = '全部';
@State private nextId: number = 5;

@State private records: DeviceRecord[] = [
  { id: 1, deviceName: 'HiSpark 开发板', labName: '嵌入式实验室 A301', borrowHours: 3, deviceType: '板卡', returned: true },
  { id: 2, deviceName: '温湿度传感器', labName: '物联网实验室 B205', borrowHours: 6, deviceType: '传感器', returned: false },
  { id: 3, deviceName: '螺丝刀套装', labName: '硬件调试室 C102', borrowHours: 2, deviceType: '工具', returned: true },
  { id: 4, deviceName: '数字万用表', labName: '电子实验室 A108', borrowHours: 10, deviceType: '仪器', returned: false }
];

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

三、添加设备借用记录

添加记录时，需要读取设备名称、实验室位置和借用小时数，并把借用小时数从字符串转换成数字：

private addRecord(): void {
  const deviceName: string = this.deviceText.trim();
  const labName: string = this.labText.trim();
  const borrowHours: number = Number(this.hoursText);

  if (deviceName.length === 0 || labName.length === 0 || Number.isNaN(borrowHours) || borrowHours <= 0) {
    return;
  }

  const record: DeviceRecord = {
    id: this.nextId,
    deviceName,
    labName,
    borrowHours,
    deviceType: this.deviceType,
    returned: false
  };

  this.records = [record, ...this.records];
  this.nextId += 1;
  this.deviceText = '';
  this.labText = '';
  this.hoursText = '';
}

这里把新记录放在数组最前面，方便用户优先看到最新添加的设备借用信息。

四、状态切换和删除

点击“标记归还”时，只需要切换当前记录的 returned 状态：

private toggleReturned(id: number): void {
  this.records = this.records.map((item: DeviceRecord) => {
    if (item.id === id) {
      return {
        id: item.id,
        deviceName: item.deviceName,
        labName: item.labName,
        borrowHours: item.borrowHours,
        deviceType: item.deviceType,
        returned: !item.returned
      };
    }
    return item;
  });
}

删除记录使用 filter()：

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

五、筛选和统计

筛选逻辑如下：

private getFilteredRecords(): DeviceRecord[] {
  if (this.filterType === '借用中') {
    return this.records.filter((item: DeviceRecord) => !item.returned);
  }

  if (this.filterType === '已归还') {
    return this.records.filter((item: DeviceRecord) => item.returned);
  }

  if (this.filterType === '超时借用') {
    return this.records.filter((item: DeviceRecord) => item.borrowHours >= 6 && !item.returned);
  }

  return this.records;
}

平均借用时长和超时借用数量也直接从数组计算：

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

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

private getOvertimeCount(): number {
  return this.records.filter((item: DeviceRecord) => item.borrowHours >= 6 && !item.returned).length;
}

六、页面布局说明

页面主要由四部分组成：

顶部标题卡片：展示应用名称和说明；
统计卡片：展示已归还、平均时长、超时借用；
添加表单：输入设备名称、实验室位置和借用小时数；
记录列表：展示每条设备借用记录，并支持归还状态切换和删除。

列表使用 List 和 ForEach 渲染：

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

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

七、Index.ets 完整代码

打开文件：

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

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

interface DeviceRecord {
  id: number;
  deviceName: string;
  labName: string;
  borrowHours: number;
  deviceType: string;
  returned: boolean;
}

@Entry
@Component
struct Index {
  @State private deviceText: string = '';
  @State private labText: string = '';
  @State private hoursText: string = '';
  @State private deviceType: string = '板卡';
  @State private filterType: string = '全部';
  @State private nextId: number = 5;

  @State private records: DeviceRecord[] = [
    { id: 1, deviceName: 'HiSpark 开发板', labName: '嵌入式实验室 A301', borrowHours: 3, deviceType: '板卡', returned: true },
    { id: 2, deviceName: '温湿度传感器', labName: '物联网实验室 B205', borrowHours: 6, deviceType: '传感器', returned: false },
    { id: 3, deviceName: '螺丝刀套装', labName: '硬件调试室 C102', borrowHours: 2, deviceType: '工具', returned: true },
    { id: 4, deviceName: '数字万用表', labName: '电子实验室 A108', borrowHours: 10, deviceType: '仪器', returned: false }
  ];

  private addRecord(): void {
    const deviceName: string = this.deviceText.trim();
    const labName: string = this.labText.trim();
    const borrowHours: number = Number(this.hoursText);

    if (deviceName.length === 0 || labName.length === 0 || Number.isNaN(borrowHours) || borrowHours <= 0) {
      return;
    }

    const record: DeviceRecord = {
      id: this.nextId,
      deviceName,
      labName,
      borrowHours,
      deviceType: this.deviceType,
      returned: false
    };

    this.records = [record, ...this.records];
    this.nextId += 1;
    this.deviceText = '';
    this.labText = '';
    this.hoursText = '';
  }

  private toggleReturned(id: number): void {
    this.records = this.records.map((item: DeviceRecord) => {
      if (item.id === id) {
        return {
          id: item.id,
          deviceName: item.deviceName,
          labName: item.labName,
          borrowHours: item.borrowHours,
          deviceType: item.deviceType,
          returned: !item.returned
        };
      }
      return item;
    });
  }

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

  private getFilteredRecords(): DeviceRecord[] {
    if (this.filterType === '借用中') {
      return this.records.filter((item: DeviceRecord) => !item.returned);
    }

    if (this.filterType === '已归还') {
      return this.records.filter((item: DeviceRecord) => item.returned);
    }

    if (this.filterType === '超时借用') {
      return this.records.filter((item: DeviceRecord) => item.borrowHours >= 6 && !item.returned);
    }

    return this.records;
  }

  private getReturnedCount(): number {
    return this.records.filter((item: DeviceRecord) => item.returned).length;
  }

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

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

  private getOvertimeCount(): number {
    return this.records.filter((item: DeviceRecord) => item.borrowHours >= 6 && !item.returned).length;
  }

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

    if (type === '传感器') {
      return '#059669';
    }

    if (type === '工具') {
      return '#D97706';
    }

    return '#7C3AED';
  }

  @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.deviceType === text ? Color.White : '#344054')
      .backgroundColor(this.deviceType === text ? this.getTypeColor(text) : '#E8EEF7')
      .borderRadius(8)
      .onClick(() => {
        this.deviceType = 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
  DeviceCard(item: DeviceRecord) {
    Column({ space: 10 }) {
      Row() {
        Text(item.deviceName)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#182431')
          .layoutWeight(1)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis });

        Text(item.returned ? '已归还' : '借用中')
          .fontSize(12)
          .fontColor(Color.White)
          .backgroundColor(item.returned ? '#059669' : '#D97706')
          .borderRadius(6)
          .padding({ left: 8, right: 8, top: 4, bottom: 4 });
      }
      .width('100%');

      Text(item.labName)
        .fontSize(13)
        .fontColor('#667085')
        .width('100%');

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

        Text(`${item.borrowHours} 小时`)
          .fontSize(12)
          .fontColor(item.borrowHours >= 6 && !item.returned ? '#D92D20' : '#2563EB')
          .backgroundColor(item.borrowHours >= 6 && !item.returned ? '#FEE4E2' : '#EFF6FF')
          .borderRadius(6)
          .padding({ left: 8, right: 8, top: 4, bottom: 4 });
      }
      .width('100%');

      Row({ space: 10 }) {
        Button(item.returned ? '改为借用中' : '标记归还')
          .height(34)
          .fontSize(13)
          .fontColor('#2563EB')
          .backgroundColor('#EFF6FF')
          .borderRadius(8)
          .padding({ left: 12, right: 12 })
          .onClick(() => {
            this.toggleReturned(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.getReturnedCount()}`, '#059669', '#ECFDF3');
        this.StatCard('平均时长', `${this.getAverageHours()}`, '#2563EB', '#EFF6FF');
        this.StatCard('超时借用', `${this.getOvertimeCount()}`, '#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: '设备名称，例如 HiSpark 开发板', text: this.deviceText })
          .height(42)
          .fontSize(14)
          .backgroundColor('#F5F7FA')
          .borderRadius(8)
          .padding({ left: 12, right: 12 })
          .onChange((value: string) => {
            this.deviceText = value;
          });

        TextInput({ placeholder: '实验室位置，例如 嵌入式实验室 A301', text: this.labText })
          .height(42)
          .fontSize(14)
          .backgroundColor('#F5F7FA')
          .borderRadius(8)
          .padding({ left: 12, right: 12 })
          .margin({ top: 10 })
          .onChange((value: string) => {
            this.labText = value;
          });

        TextInput({ placeholder: '借用小时数', text: this.hoursText })
          .height(42)
          .fontSize(14)
          .backgroundColor('#F5F7FA')
          .borderRadius(8)
          .type(InputType.Number)
          .padding({ left: 12, right: 12 })
          .margin({ top: 10 })
          .onChange((value: string) => {
            this.hoursText = 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: DeviceRecord) => {
            ListItem() {
              this.DeviceCard(item);
            }
          }, (item: DeviceRecord) => 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、模拟器或真机运行页面。测试步骤如下：

输入设备名称；
输入实验室位置；
输入借用小时数；
选择板卡、传感器、工具或仪器；
点击“添加记录”；
点击“标记归还”切换状态；
使用筛选按钮查看不同记录；
删除单条记录；
检查统计卡片是否同步变化。

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

九、总结

本文基于 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