qt Rectangle 使用Gradient设置渐变方向制作渐变进度条

最新推荐文章于 2024-05-04 15:29:43 发布

置顶会飞的芦苇

最新推荐文章于 2024-05-04 15:29:43 发布

阅读量134

点赞数

文章标签： c++ QML qt5

本文链接：https://blog.csdn.net/qq_29789057/article/details/134446684

版权

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

        }
    }