QML 中的进度条实现以显示 C++ 中循环的进度

Question

我的 QML UI 与我的 C++ 代码一起使用。我需要展示其进度的循环是用 C++ 开发的，如下所示：

for(unsigned int j = 0; j < Count; ++j) {
    // Do stuff
}

在我的 QML 代码中，我需要这样的进度条：

ProgressBar {
    value: j  // Should come from C++ loop
              // It is "j" on C++ loop
    from: 0   // C++ loop starts out with 0
    to: Count // C++ loop ends with "Count"
}

我不知道我的 C++ 循环和我的 QML 进度条需要如何相互链接。我找不到任何相关示例。谁能给我一个提示。

---

我的 C++ 和 QML 之间的通信是通过像这样使用Q_PROPERTY 完成的，但我不知道如何使用它：

Q_PROPERTY(float j READ j WRITE setJ NOTIFY jChanged)

Answer 1

这很容易！让我们一步一步来。

1. 您的 C++ 类应该扩展 QObject 并在内部使用 Q_OBJECT 宏。例如，我称之为Worker。

   class Worker : public QObject
   {
       Q_OBJECT
       Q_PROPERTY(float progress READ progress NOTIFY progressChanged)
   public:
       Q_INVOKABLE void start() {
           // start the worker thread in which your loop spins
       }
       float progress(); // progress getter
   signals:
       void progressChanged(float progress);
   };
   

2. 启动后台线程并定义自己的progressChanged 信号。

   for(unsigned int j = 0; j < Count; ++j) {
       // Do stuff
       emit progressChanged(/*current progress*/);
   }
   

3. 将后台线程的progressChanged 连接到主线程活动对象Worker 的progressChanged 信号（排队连接）。需要此步骤将信号从后台线程中继到 QML。

4. 将 C++ 类链接到 QML：

   int main(int argc, char *argv[]) {
       QGuiApplication app(argc, argv);
   
       QQuickView view;
       Worker w;
       view.engine()->rootContext()->setContextProperty("worker", &w);
       view.setSource(QUrl::fromLocalFile("MyItem.qml"));
       view.show();
   
       return app.exec();
   }
   

5. 在QML端监听信号：

   ProgressBar {
       id: prg
       from: 0   // C++ loop starts out with 0
       to: Count // C++ loop ends with "Count"
   
       Connections {
           target: worker
           onProgressChanged: prg.value = progress;
       }
   }