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：构建响应式表单与数据验证

• 创建响应式表单组件
• 使用协程处理表单输入与验证
• 实现异步提交与结果反馈