c++ - Qt5-QML : How to modify bindings to change Text after ProgressBar finishes loop

Question

我正在尝试在 ProgressBar 完成其循环后更改文本，如下所示。

我得到的实际结果如下:

预期的结果如下:

在最小可验证示例的代码下方。我将 ProgressBar 作为外部 C++ 类处理。如果需要，可以找到可验证的小示例 here以备不时之需:

ma​​in.qml

import QtQuick 2.4
import QtQuick.Controls 2.12
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.12
import QtQuick.Controls.impl 2.12  // for IconLabel

ApplicationWindow {
    id: window
    width: 640
    height: 480
    visible: true

//    property var changeText
//    color: changeText ? changeText.color : "green"

    function buttonClick(button)
    {
        button.text = qsTr(" YES Connecting").arg(button.text);
        button.enabled = false;
        if (button.background && button.background instanceof Rectangle) {
            button.background.color = "green";
            button.background.gradient = null;
            button.background.visible = true;
        }
        if (button.contentItem && button.contentItem instanceof IconLabel) {
            button.contentItem.color = "white";
            button.contentItem.font.bold = true;
            button.contentItem.font.pointSize = 20;
        }
    }
    function textConnectedChange(textChange1)
    {
        textChange1.text = qsTr("Connecting...");
        textChange1.color = "blue";
        textChange1.content = "Connected";
        textChange1.font.bold = true;
        textChange1.font.pointSize = 15;
    }

    QtObject {
            id: test
            property color color: "grey"
        }

    ColumnLayout {
        Button {
            id: dialogA
            text: pBar.running ? "Connecting..." : "Not - Connected"
            Layout.fillWidth: true
            font.pointSize: 20
            spacing: 10
            onClicked: {
                buttonClick(this)
                pBar.startComputation()
            }
        }
        ColumnLayout {
            id: layout
            Layout.fillWidth: true
            spacing: 10
            GroupBox {
                id: box1
                width: parent.width
                title: "Connection"
                font.pointSize: 20
                Layout.fillWidth: parent
                spacing: 10

                GridLayout {
                    width: parent.width
                    columns: 1
                    RowLayout {
                        id: row1
                        spacing: 200
                        Layout.fillWidth: true
                        Layout.fillHeight: false
                        Label {
                            id: textField
                            text: "Connection:"
                            font.pointSize: 15
                            Layout.fillWidth: true
                        }
                        Text {
                            id: connected
                            text: pBar.running ? textConnectedChange(this) : "Not-Connected"
                            color: "red"
                            font.pointSize: 15
                            horizontalAlignment: Text.AlignRight
                            Layout.fillWidth: true
                            onTextChanged: {
                                text: parent.changeText = test
                            }
                        }
                    }
                }
            }
            GroupBox {
                id: boxprogress
                title: "Connection Progress"
                font.pointSize: 20
                Layout.fillWidth: parent
                width: parent.width
                spacing: 10
                GridLayout {
                    width: parent.width
                    columns: 1
                    RowLayout {
                        Layout.fillWidth: true
                        Layout.fillHeight: false
                        ProgressBar {
                            id: progressbar_id
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            width: parent.width
                            from: 0
                            to: 40
                            value: pBar.progress
                        }
                    }
                }
            }
        }
    }
}

progressbar.h

#ifndef PROGRESSBAR_H
#define PROGRESSBAR_H
#include <QObject>
#include <QFutureWatcher>
class ProgressBar : public QObject
{
    Q_OBJECT
    Q_PROPERTY(float progress READ progress NOTIFY progressChanged)
    Q_PROPERTY(bool running READ running NOTIFY runningChanged)
    Q_PROPERTY(bool finished READ finished NOTIFY finishedChanged)
public:
    ProgressBar();
    float progress();
    bool running();
    bool finished();

public Q_SLOTS:
    void startComputation();
    void cancelComputation();
    void finishComputation();
private Q_SLOTS:
    void updateProgress(int value);
signals:
    void progressChanged();
    void runningChanged();
    void finishedChanged();
private:
    bool m_running = false;
    int m_progressValue = 0;
    int m_finished = true;
    QVector<int> vector;
    QObject m_Model;
    QFutureWatcher<void> m_futureWatcher;
};

#endif // PROGRESSBAR_H

main.cpp

#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "progressbar.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    ProgressBar pBar;
    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    engine.rootContext()->setContextProperty("pBar",   &pBar);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

到目前为止我做了什么:

1) 以下source有助于理解问题，但没有带来任何有益的修正。

2)这个post我发现这对于修改必要的绑定(bind)以更改文本很有用，但没有用

3) 我咨询了official documentation关于 QML 绑定(bind)并尝试直接从那里应用，但有些地方不正确。

4) 您在代码中看到了 QObject，那是因为来自 here我以为我必须使用它。我将它留在代码中是为了向您展示我尝试进行的其他试验，但没有奏效。

请指出正确的方向来解决这个问题。

Answer 1

QML 有一个 State 对象，它非常适合处理这类问题，我的意思是，您需要在不同的“状态”下进行不同的绑定(bind)。

下面的示例应该让您有所了解，但是，我不是 100% 我从您的示例中正确提取了所有内容:

Text {
    id: connected
    text: qsTr("Not-Connected")
    color: "red"
    font.pointSize: 15
    horizontalAlignment: Text.AlignRight
    Layout.fillWidth: true

    states: [
        State {
            name: "connecting"
            when: pBar.running
            PropertyChanges {
                target: connected
                text: qsTr("Connecting...")
                color: "blue"
                font.bold: true
            }
        },
        State {
            name: "connected"
            when: pBar.finished
            PropertyChanges {
                target: connected
                text: qsTr("Yes! Connected...")
                color: "green"
                font.bold: true
            }
        }
    ]
}