最新鸿蒙HarmonyOS 使用Progress、Toggle开发一个接单界面

### 鸿蒙应用开发：创建通知和倒计时提醒功能 #### 应用项目结构概述 在鸿蒙系统的最新版本中，可以通过DevEco Studio创建一个新的HarmonyOS应用项目。项目的入口页面通常是`Index.ets`文件，在此页面中实现所需的功能模块。 --- #### 实现方案 ##### 1. **按钮一：创建公共事件订阅者** 通过点击第一个按钮，可以在应用中初始化并注册一个公共事件订阅者。具体实现方式如下： ```javascript @Entry @Component struct Index { @State isSubscribed: boolean = false; build() { Column() { Button("创建公共事件订阅者") { if (!this.isSubscribed) { EventSubscribe.subscribe("ncwu.harmonytest.event1", (data) => { console.info(`Received event data: ${JSON.stringify(data)}`); }); this.isSubscribed = true; } }.padding(10) // 显示事件详情的Text组件 Text(this.isSubscribed ? "已订阅事件" : "未订阅事件").fontSize(20).margin({ top: 20 }) } } } ``` 此处调用了`EventSubscribe.subscribe()`方法来订阅指定名称的公共事件[^1]。 --- ##### 2. **Toggle组件：切换订阅/取消订阅状态** 使用`Toggle`类型的开关组件（`Switch`），允许用户动态控制是否订阅特定的公共事件。 ```javascript // Toggle组件逻辑 Row() { Switch({ value: this.isSubscribed, onChange: (value) => { if (value && !this.isSubscribed) { EventSubscribe.subscribe("ncwu.harmonytest.event1", (data) => { console.info(`Received event data: ${JSON.stringify(data)}`); }); this.isSubscribed = true; } else if (!value && this.isSubscribed) { EventSubscribe.unsubscribe("ncwu.harmonytest.event1"); this.isSubscribed = false; } }, }).width('80%').height(40) }.margin({ top: 20 }) ``` 当用户操作`Switch`时，会根据其状态决定是否执行订阅或取消订阅的操作[^1]。 --- ##### 3. **按钮二：发布自定义公共事件** 第二个按钮用于触发事件发布机制。点击后向系统广播名为`ncwu.harmonytest.event1`的自定义公共事件。 ```javascript Button("发布自定义公共事件") { const eventData = { message: "这是一个测试消息" }; EventPublish.publish("ncwu.harmonytest.event1", eventData); }.padding(10) ``` 这里利用了`EventPublish.publish()`函数完成事件数据的分发。 --- ##### 4. **按钮三：启动倒计时定时提醒** 最后一个按钮负责配置并激活一个10秒倒计时提醒服务。这通常涉及后台代理提醒的能力。 ```javascript Button("启动倒计时提醒") { let reminderId = ReminderManager.createReminder({ type: 'COUNTDOWN', duration: 10 * 1000, // 单位毫秒 callback: () => { console.log("倒计时结束！"); } }); }.padding(10) ``` 上述代码片段展示了如何借助`ReminderManager.createReminder()`接口安排一次短暂的倒计时任务[^2][^3]。 --- #### 页面布局设计 为了提升用户体验，建议将以上各部分合理排列于同一界面之中。最终效果可能类似于以下形式： ```javascript Column() { // 按钮一 Button("创建公共事件订阅者") {...} // 切换订阅状态 Row() { Text("订阅状态:"); Switch({...}); } // 发布事件按钮 Button("发布自定义公共事件") {...} // 启动倒计时按钮 Button("启动倒计时提醒") {...} // 动态展示区域 Text("事件接收记录:").margin({ top: 20 }) List(...) {} } ``` --- #### 注意事项 - 确保已在`config.json`中声明必要的权限，例如访问公共事件和服务提醒的相关许可。 - 测试阶段需验证不同场景下的行为一致性，比如网络中断、设备休眠等情况对后台任务的影响。 --- ###