Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

help me!!!!!!!!!!!!!!!!! how can I change ProgressBar's color at qml



  • it's my code... i was try change QtQuick.Controls and QtQuick.Controls.Styles's version
    then it works rightly but 'from' and 'to' command's are not worked...

    how can i change ProgressBar's color using that latest version.

    thank you for your help...

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Controls.Material 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls.Styles 1.4

    import QtQml 2.12

    //import QtQuick.Window 2.1

    //import QtQuick.Controls 1.2

    //import QtQuick.Controls.Styles 1.2

    Item {
    id: rootPage
    anchors.fill:parent
    property int gaugeBarState

    width: 800
    
        Image {
            id: imgPercent
            x: 59
            y: 93
            width: 120
            height: 61
            fillMode: Image.PreserveAspectFit
            source: "jpg/charging.png"
    
            ProgressBar {
                id: id_progress
                x: 46
                y: 26
                width: 15
                height: 6
                value: gaugeBarState
    
                from: 0
                to: 100
                scale: 5.6
    

    // palette: "red" // <- is' not working ......

    // is' not working too......
    // style: ProgressBarStyle {
    // background: Rectangle {
    // radius: 2
    // color: "lightgray"
    // border.color: "gray"
    // border.width: 1
    // implicitWidth: 200
    // implicitHeight: 24
    // }
    // progress: Rectangle {
    // border.color: "steelblue"
    // color: "lightsteelblue"
    // }
    // }

                background: Rectangle{
                    color: "white"
                }
    
            }
    
        }
    

    }



  • @mingo ,
    This is my code for progress bar color

                            ProgressBar {
                                id: progressBar
                                width: parent.width - 10
                                height: 8
                                anchors.horizontalCenter: parent.horizontalCenter
                                background: Rectangle {
                                    anchors.fill: progressBar
                                    color: "lightgreen"
                                    radius: 4
                                    border.width: 1
                                    border.color: Style.appBackgroundColor
                                }
                                anchors.bottom: parent.bottom
                                anchors.bottomMargin: 4
                                value: currentProgress
                                contentItem: Rectangle {
                                    anchors.left: progressBar.left
                                    anchors.bottom: progressBar.bottom
                                    height: progressBar.height
                                    width: progressBar.width * progressBar.value
                                    color: progressBar.value === 0.0 ? "lightgreen" : Style.appBackgroundColor
                                    radius: 4
                                }
                            }
    

    And this is actual result, you can refer it:
    Screenshot from 2020-06-10 11-06-59.png


  • Lifetime Qt Champion

    @mingo Please use one "!"



  • @Quang-Phu wow..... GOD BLESS YOU really thank you!!!!!!!!!!!!!!!!!!!!!!!!! i love you Thank you very much




Log in to reply