QML矩形进度条接收valueChanged信号后无法实时更新问题

核心原因 #

你的p_value属性绑定了cp_screen.progressValue，但QML不会自动追踪这种绑定的依赖更新——当progressValue变化时，p_value和p_barwidth的绑定未触发UI重绘。虽然Connections能打印出正确的中间值，但QML没感知到属性变化需要刷新界面。

修复方案 #

方案1：直接绑定源属性（推荐） #

去掉自定义的p_value和p_barwidth，直接在UI元素里绑定cp_screen.progressValue，让QML自动处理依赖追踪：

Rectangle {
    Rectangle { id: frame; width: 400; height: 40; color: "grey"; border.width: 1; radius: 0.2 * height
        Rectangle { id: bar
            height: 0.8 * frame.height
            width: Math.round(cp_screen.progressValue * 400 / 100)
            x: 0.1 * frame.height;
            y: 0.1 * frame.height
            color: "white"
            radius: parent.radius
        }
        Label {
            anchors.centerIn: parent;
            text: cp_screen.progressValue + " %";
            color: "black";
            font.bold: true;
        }
    }
}

方案2：手动触发属性更新 #

如果必须保留自定义属性，需在progressValueChanged信号里主动更新p_value，利用QML的属性绑定机制让p_barwidth自动同步：

Rectangle {
    property real p_value: cp_screen.progressValue
    property real p_barwidth: Math.round(p_value * 400 / 100)

    Rectangle { id: frame; width: 400; height: 40; color: "grey"; border.width: 1; radius: 0.2 * height
        Rectangle { id: bar
            height: 0.8 * frame.height
            width: p_barwidth
            x: 0.1 * frame.height;
            y: 0.1 * frame.height
            color: "white"
            radius: parent.radius
        }
        Label {
            anchors.centerIn: parent;
            text: p_value + " %";
            color: "black";
            font.bold: true;
        }
    }

    Connections {
        target: cp_screen;
        onProgressValueChanged: {
            p_value = cp_screen.progressValue // 主动赋值触发属性更新
            console.log("PROGRESSBAR: " + p_value)
            console.log("PROGRESSBAR width: " + p_barwidth)
        }
    }
}

额外检查 #

确保C++端的progressValueChanged信号在每次progressValue变化时都正确发射（包括95、96这类中间值），你的日志显示信号已正常触发，所以上述方案即可解决问题。

原问题及相关信息 #

问题描述 #

基于两个矩形实现百分比进度显示：手动固定p_value测试时，进度条显示正常；但监听信号更新时，进度条和文本仅在达到最大值时变化，中间值虽已被正确接收，但界面始终无更新。

相关信息 #

• p_value为0、30（手动设置）、100时的显示效果截图
• QML代码：

Rectangle {
 
    property real p_value: cp_screen.progressValue
    property real p_barwidth: Math.round(p_value * 400 / 100)

    Rectangle { id: frame; width: 400; height: 40; color: "grey"; border.width: 1; radius: 0.2 * height
        Rectangle { id: bar
            height: 0.8 * frame.height
            width: p_barwidth
            x: 0.1 * frame.height;
            y: 0.1 * frame.height
            color: "white"
            radius: parent.radius
        }
        Label {
            anchors.centerIn: parent;
            text: p_value + " %";
            color: "black";
            font.bold: true;
        }
    }

    Connections {
        target: cp_screen;
        onProgressValueChanged: {
            console.log("PROGRESSBAR: " + p_value)
            console.log("PROGRESSBAR width: " + p_barwidth)
        }
    }
}

• 控制台日志：

qml: PROGRESSBAR: 95
qml: PROGRESSBAR width: 380
qml: PROGRESSBAR: 96
qml: PROGRESSBAR width: 384
qml: PROGRESSBAR: 97
qml: PROGRESSBAR width: 388
qml: PROGRESSBAR: 98
qml: PROGRESSBAR width: 392
qml: PROGRESSBAR: 99
qml: PROGRESSBAR width: 396
qml: PROGRESSBAR: 100
qml: PROGRESSBAR width: 400

• ScreenManager.h代码：

Q_PROPERTY(int progressValue READ getProgressValue NOTIFY progressValueChanged)

内容的提问来源于stack exchange，提问作者user2377283