Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. help me!!!!!!!!!!!!!!!!! how can I change ProgressBar's color at qml
QtWS25 Last Chance

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

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
5 Posts 4 Posters 3.1k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    mingo
    wrote on 10 Jun 2020, 01:35 last edited by
    #1

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

    }

    J 1 Reply Last reply 10 Jun 2020, 07:18
    0
    • Q Offline
      Q Offline
      Quang Phu
      wrote on 10 Jun 2020, 04:07 last edited by
      #2

      @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

      M 1 Reply Last reply 10 Jun 2020, 07:44
      1
      • M mingo
        10 Jun 2020, 01:35

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

        }

        J Offline
        J Offline
        jsulm
        Lifetime Qt Champion
        wrote on 10 Jun 2020, 07:18 last edited by
        #3

        @mingo Please use one "!"

        https://forum.qt.io/topic/113070/qt-code-of-conduct

        1 Reply Last reply
        2
        • Q Quang Phu
          10 Jun 2020, 04:07

          @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

          M Offline
          M Offline
          mingo
          wrote on 10 Jun 2020, 07:44 last edited by
          #4

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

          1 Reply Last reply
          0
          • M Offline
            M Offline
            Markkyboy
            wrote on 10 Jun 2020, 11:35 last edited by
            #5

            Duplicate?

            Already answered here; https://forum.qt.io/topic/114443/progressbar-how-can-i-change-the-content-item-color-of-an-indeterminate-progres-bar/2

            Don't just sit there standing around, pick up a shovel and sweep up!

            I live by the sea, not in it.

            1 Reply Last reply
            1
            • M Markkyboy referenced this topic on 25 Jul 2024, 17:18
            • T Trieu Huynh referenced this topic on 30 Sept 2024, 07:19

            3/5

            10 Jun 2020, 07:18

            • Login

            • Login or register to search.
            3 out of 5
            • First post
              3/5
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved