C++每日训练 Day 17:构建响应式加载动画与异步数据处理
📘 本篇目标是:在 GUI 信号机制基础上,构建一个完整的“点击按钮 → 显示加载动画 → 异步加载数据 → 显示结果”的响应式界面流程。通过协程挂起/恢复机制,实现清晰的异步逻辑,避免回调地狱。
🔁 回顾 Day 16:GUI 响应式信号机制
在 Day 16 中,我们学习了如何使用协程和信号机制处理 GUI 事件。主要内容包括:
- 按钮点击事件的处理:通过协程挂起,等待按钮点击事件的发生,然后恢复协程执行相应的逻辑。
- 信号机制的实现:使用
SignalHub
类管理不同的事件类型,实现事件的订阅和触发。 - 协程与 Dispatcher 的结合:确保协程的恢复在正确的线程中执行,避免线程安全问题。
这些基础为我们今天的内容打下了坚实的基础。
✅ 一、模拟加载动画组件
我们首先创建一个简单的加载动画组件,用于在数据加载期间显示加载状态。
struct LoadingSpinner {void show() {std::cout << "🔄 显示加载动画...\n";}void hide() {std::cout << "✅ 隐藏加载动画\n";}
};
✅ 二、构建异步数据加载器
接下来,创建一个模拟异步加载数据的函数,使用协程实现。
Task<std::string> loadDataAsync() {co_await std::suspend_always{}; // 模拟异步等待std::this_thread::sleep_for(std::chrono::seconds(2)); // 模拟加载时间co_return "数据加载完成";
}
✅ 三、构建按钮点击事件处理协程
我们创建一个协程函数,处理按钮点击事件,显示加载动画,加载数据,并在加载完成后更新界面。
Task<void> onButtonClick(LoadingSpinner& spinner) {spinner.show(); // 显示加载动画std::string data = co_await loadDataAsync(); // 异步加载数据spinner.hide(); // 隐藏加载动画std::cout << "📦 加载结果: " << data << "\n";co_return;
}
✅ 四、主函数模拟用户点击按钮
在主函数中,模拟用户点击按钮,触发上述协程。
int main() {LoadingSpinner spinner;std::cout << "🖱️ 用户点击按钮\n";auto task = onButtonClick(spinner); // 启动协程处理按钮点击事件// 模拟事件循环while (!task.done()) {task.resume(); // 恢复协程执行}return 0;
}
输出:
🖱️ 用户点击按钮
🔄 显示加载动画...
✅ 隐藏加载动画
📦 加载结果: 数据加载完成
✅ 总结
通过以上步骤,我们实现了一个完整的响应式界面流程,使用协程清晰地表达了异步逻辑,避免了传统回调方式带来的复杂性。
🧠 巩固练习题
Q1:如何确保协程 resume 在主线程执行?
A:使用主线程的 Dispatcher,在协程挂起时记录 Dispatcher,resume 时通过 Dispatcher 调度回主线程。
Q2:如何处理多个按钮点击事件?
A:为每个按钮创建独立的协程处理函数,分别处理各自的点击事件。
Q3:如何处理加载失败的情况?
A:在 loadDataAsync
中添加异常处理逻辑,在协程中使用 try-catch
捕获异常,进行相应的错误处理。
🔭 下一步 Day 18:构建响应式表单与数据验证
- 创建响应式表单组件
- 使用协程处理表单输入与验证
- 实现异步提交与结果反馈