QML ProgressBar Qt 5.7 has no style and color property



  • Hi to all
    I have problem with ProgressBar component

    import QtQuick.Controls 2.0
    
    ProgressBar {
            id: pbLife
            value: 0.5
            color: "red" // run time error 
            style:  ProgressBarStyle {}  // run time error 
            height: iLifeIcon.height
            anchors.right: parent.right
            anchors.left: iLifeIcon.right
            anchors.verticalCenter: iLifeIcon.verticalCenter
        }
    


  • Hi, @Galbarad,

    Unless I am mistaken, QtQuick.Controls 2.0 are not style proporty. But you can use background property inherited from Control

    Hope this helps



  • Hello @Galbarad ,

    You have an example in the documentation Customizing ProgressBar.



  • Hi @CharlieG,
    yes style property not available in 2.0 but according documentation property "color" should be available, but it's not available too
    hm can't found doc with "color", but see that "style" still in doc
    http://doc.qt.io/qt-5/qml-qtquick-controls-progressbar.html#style-prop

    @Julien-B thanks I'll check



  • @Galbarad ,

    The link you provided is for Quick Controls 1.4. but in List of All Members for ProgressBar (1.4) there is style but not color.

    The proper links for Quick Controls 2.0 are ProgressBar QML Type (2.0) and List of All Members for ProgressBar (2.0) and neither color nor style appears in it.



  • @Julien-B thanks for proper documentation
    yep my fault, looks like I see color property in other place ((
    thank for help



  • Hi all
    I found that example from documentation Customizing ProgressBar has problem in case ProgressBar located in other place than left top corner
    please check working example

    import QtQuick 2.6
    import QtQuick.Controls 2.0
    
    Rectangle {
        width: 400
        height: 600
    
        ProgressBar {
            id: control
            value: 0.5
            padding: 2
    
            width: 100
            height: 8
            z: 100
    
            anchors.centerIn: parent
    
            background: Rectangle {
                anchors.left: control.left
                anchors.verticalCenter: control.verticalCenter
                implicitWidth: 50
                implicitHeight: 6
                color: "#e6e6e6"
                radius: 3
            }
    
            contentItem: Rectangle {
                anchors.left: control.left
                anchors.verticalCenter: control.verticalCenter
                width: control.visualPosition * control.width
                height: control.height
                radius: 2
                color: "#17a81a"
                z:101
            }
        }
    }
    


  • @Galbarad ,

    It looks like a bug but I cannot confirm, I checked with console.log and it seems contentItem Rectangle width is overriden when you use anchors.centerIn: parent in your ProgressBar, even if control.visualPosition * control.width provide the right result and I don't know why.

    Anyway you can try this temporary workaround (tested on linux).

    Replace in ProgressBar

    anchors.centerIn: parent
    

    by

    x: parent.width/2 - control.width/2
    y: parent.height/2 - control.height/2
    


  • Hi @Julien-B
    I try workaround, but with no success, may I ask your full test file?

    I found another problem when I use ProgressBar with background and contentItem I get qml runtime error
    qrc:///qml/GameField.qml: Object destroyed during incubation

    ProgressBar {
                id: pbLife
                value: 0.5
    
                height: 0.8 * iLifeIcon.height
                anchors.right: parent.right
                anchors.left: iLifeIcon.right
                anchors.verticalCenter: iLifeIcon.verticalCenter
    
                background: Rectangle {
                    anchors.fill: pbLife
                    color: "transparent"
                    radius: 3
                    border.color: "#000000"
                    border.width: 1
                }
    
                contentItem: Rectangle {
                    anchors.left: pbLife.left
                    anchors.verticalCenter: pbLife.verticalCenter
                    width: pbLife.visualPosition * pbLife.width
                    height: pbLife.height
                    radius: 2
                    color: "#FF0000"
                    //z: 10
                }
            }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.