QML ProgressBar Qt 5.7 has no style and color property

[Galbarad]

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
    }

[CharlieG]

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

[Julien B]

Hello @Galbarad ,

You have an example in the documentation Customizing ProgressBar.

[Galbarad]

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

[Julien B]

@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.

[Galbarad]

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

[Galbarad]

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

[Julien B]

@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

[Galbarad]

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