Progressbar only shows single color

Trieu Huynh

Hello all, I am trying to change the color of my progressbar into separated colors between content and background.
I've used this solution in here: https://forum.qt.io/topic/115731/help-me-how-can-i-change-progressbar-s-color-at-qml/2
But the color of progressbar only shows blue. In my expectation, it should show lightgreen and blue colors, isn't it?
It would be greatly appreciated that you could help take a look and give me your suggestions. Many thanks in advance.

Anumas

Hi, it would be great if you could copy and paste your code instead of a screenshot

Trieu Huynh

Dear Anumas,
Here it is

import QtQuick 2.7
import QtQuick.Controls 2.3

Rectangle {
color: "white"
anchors.fill: parent

ProgressBar {
    id: progressBar
    width: parent.width / 2
    height: 50
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottom: parent.bottom
    anchors.bottomMargin: parent.width / 2
    value: 0.3  // 30% progress

    // Custom content item to reflect progress
    contentItem: Rectangle {
        anchors.left: progressBar.left
        anchors.verticalCenter: progressBar.verticalCenter
        height: progressBar.height
        width: progressBar.width * progressBar.value  // Set width based on progress value
        color: "blue"  // Blue when value > 0
        radius: 4
    }

    // Background that always shows lightgreen
    background: Rectangle {
        anchors.fill: progressBar
        color: "lightgreen"  // Lightgreen background
        radius: 4
        border.width: 1
        border.color: "gray"
    }
}

}

Markkyboy

Have a look on this page; https://forum.qt.io/topic/114443/progressbar-how-can-i-change-the-content-item-color-of-an-indeterminate-progres-bar

Always search the forum before posting!

realroot

I think that you need to set padding in ProgressBar:

ProgressBar {
id: progressBar
    width: parent.width / 2
    height: 50
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottom: parent.bottom
    anchors.bottomMargin: parent.width / 2
    value: 0.3  // 30% progress
    padding: 5