完成第四章“异步任务执行”这一节内容

Author: Mq-b

md/04同步操作.md

@@ -1005,3 +1005,102 @@ void task(){
 ![进度条](../image/第四章/进度条.png)
 
 在启动进度条后，能够正常点击“**测试**”按钮然后触发弹窗，就是没有问题，你也可以尝试不创建线程，那么界面将会卡主，你点击不了“**测试**”按钮，也移动不了这个窗口。
+
+我们的项目是使用 visual studio 编写的，你可以直接安装 Qt 插件后使用它打开。此项目很小，为了简洁，所有的的界面与设置均是代码控制，而没有进行别的 ui 操作，也就是说，你只需要注意 `async_progress_bar.h`、`async_progress_bar.cpp`、`main.cpp` 这三个文件即可。它们存放在仓库以及目录 **`code`** 文件夹中。
+
+```cpp
+class async_progress_bar : public QMainWindow{
+    Q_OBJECT
+
+public:
+    async_progress_bar(QWidget *parent = nullptr);
+    ~async_progress_bar();
+
+    void task(){
+        future = std::async(std::launch::async, [=] {
+            QMetaObject::invokeMethod(this, [this] {
+                // 这里显示的线程 ID 就是主线程，代表这些任务就是在主线程，即 UI 线程执行
+                QMessageBox::information(nullptr, "线程ID", std::to_string(_Thrd_id()).c_str());
+                button->setEnabled(false);
+                progress_bar->setRange(0, 1000);
+                button->setText("正在执行...");
+            });
+            for (int i = 0; i <= 1000; ++i) {
+                std::this_thread::sleep_for(10ms);
+                QMetaObject::invokeMethod(this, [this, i] {
+                    progress_bar->setValue(i);
+                });
+            }
+            QMetaObject::invokeMethod(this, [this] {
+                button->setText("start");
+                button->setEnabled(true);
+            });
+            // 不在 invokeMethod 中获取线程 ID，这里显示的是子线程的ID
+            auto s = std::to_string(_Thrd_id());
+            QMetaObject::invokeMethod(this, [=] {
+                QMessageBox::information(nullptr, "线程ID", s.c_str());
+            });
+        });
+    }
+private:
+    QString progress_bar_style =
+        "QProgressBar {"
+        "    border: 2px solid grey;"
+        "    border-radius: 5px;"
+        "    background-color: lightgrey;"
+        "    text-align: center;"  // 文本居中
+        "    color: #000000;"      // 文本颜色
+        "}"
+        "QProgressBar::chunk {"
+        "    background-color: #7FFF00;"
+        "    width: 10px;"         // 设置每个进度块的宽度
+        "    font: bold 14px;"     // 设置进度条文本字体
+        "}";
+    QString button_style =
+        "QPushButton {"
+        "    text-align: center;"  // 文本居中
+        "}";
+    QProgressBar* progress_bar{};
+    QPushButton* button{};
+    QPushButton* button2{};
+    Ui::async_progress_barClass ui{};
+    std::future<void>future;
+};
+// 创建控件 设置布局、样式 连接信号
+async_progress_bar::async_progress_bar(QWidget *parent)
+    : QMainWindow{ parent }, progress_bar{ new QProgressBar(this) },
+    button{ new QPushButton("start",this) },button2{ new QPushButton("测试",this) } {
+    ui.setupUi(this);
+
+    progress_bar->setStyleSheet(progress_bar_style);
+    progress_bar->setRange(0, 1000);
+
+    button->setMinimumSize(100, 50);
+    button->setMaximumWidth(100);
+    button->setStyleSheet(button_style);
+    button->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Fixed);
+
+    button2->setMinimumSize(100, 50);
+    button2->setMaximumWidth(100);
+    button2->setStyleSheet(button_style);
+    button2->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Fixed);
+
+    QVBoxLayout* layout = new QVBoxLayout;
+    layout->addWidget(progress_bar);
+    layout->addWidget(button, 0, Qt::AlignHCenter);
+    layout->addWidget(button2, 0, Qt::AlignHCenter);
+    // 设置窗口布局为垂直布局管理器
+    centralWidget()->setLayout(layout);
+
+    connect(button, &QPushButton::clicked, this, &async_progress_bar::task);
+    connect(button2, &QPushButton::clicked, []{
+        QMessageBox::information(nullptr, "测试", "没有卡界面！");
+    });
+}
+```
+
+为了展示 `QMetaObject::invokeMethod` 中的 lambda 是在主线程运行，我们打印了线程 ID，因为 C++11 的 `std::this_thread::get_id()` 返回的那个内部类型没办法直接转换为 `unsigned int`，我们就直接使用了 win32 的 API *`_Thrd_id()`* 了。如果您是 Linux 之类的环境，使用 [POSIX](https://pubs.opengroup.org/onlinepubs/9699919799/) 接口 [*`pthread_self()`*](https://pubs.opengroup.org/onlinepubs/009696699/functions/pthread_self.html)。
+
+这个例子其实很好的展示了多线程异步的作用，因为有 UI，所以很直观，毕竟如果你不用线程，那么不就卡界面了，用了就没事。
+
+建议打开此项目自己编译运行，并尝试修改，如有必要，建议自己也写一遍，代码较为简单，就不再介绍了。