1.Gradient方向可查看官网

Gradient.Horizontal

a horizontal gradient

Gradient.Vertical

a vertical gradient

   

​​    ProgressBar {
        id: battery
        value: 0.5
        width: 150
        height: 20
        anchors.centerIn: parent
        background: Rectangle {
            implicitWidth: battery.width
            implicitHeight: battery.height
            color: "#CEDDED"
            radius: 10
        }
        contentItem: Item {
            Rectangle {
                width: battery.visualPosition * battery.width
                height: battery.height
                radius: 10
                gradient: Gradient{
                  orientation: Gradient.Horizontal //渐变方向Vertical
                  GradientStop{position:0.0;color:"#47C42C"}
                  GradientStop{position:1.0;color:"#FFFFFF"}
               }
            }

        }
    }