Search code examples
qmlsignals

QML - problem on updating rectangle after valueChanged signal

I want to create a percentage display based on two rectangles.

If I test the display manually (fixed value for p_value) then the percentage bar is displayed correctly.

If I intercept a signal, the bar and the text only change when the maximum value is reached.

The intermediate values are received correctly but the display remains unchanged.

p_value = 0

enter image description here

p_value = 30 (set manually)

enter image description here

p_value = 100

enter image description here

QML - cp_screen is a screen manager with handled the values und signals

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)
        } 
    }
}

Console log

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)
Solution

  • I guess thats because you have x offset. Your bar width is parent.width - 0.2 * frame.height, so your bar width should be (parent.width - 0.2 * frame.height) * p_value / 100

    consider the following:

    Rectangle { 
  id: bar
  anchors.verticalCenter: parent.verticalCenter
  x: parent.height / 10
  width: (parent.width - 0.2 * parent.height) * p_value / 100
  height: 0.8 * parent.height
  color: "white"
  radius: parent.radius
}