QML创建横向渐变条方法

本文长期连接，转发请先点赞留言

起源：

因为刚开始学QML，刚好学到渐变这一张，发现渐变是从上到下的，也就是说垂直方向的渐变。于是想试着做一下水平，也就是横着的渐变。结果网上什么奇葩都有。还碰上一个哥们，说是要加入会员还是订阅啥的才能看，关键要给19.9一月。我只想说：你以为你是什么青瓜萝卜皮。

实现方式：

比如我先画一个Rectangle，定义好位置，边框啥的，代码如下：

Rectangle{
   
        id:rectDraw
        x:root.width-textCenter.x
        y:textCenter.y
        width:root.width/5
        height: root.height/5
        border.color: "blue"
        border.width: 10
        radius: rectDraw.height/3
    }

效果如图：

因为没有设置color属性，所以默认是白色的。

如果我直接使用gradient: Gradient的话，代码在如下：

Rectangle{
   
        id:rectDraw
        x:root.width-textCenter.x
        y:textCenter.y
        width:root.width/5
        height: root.height/5
        border.color: "blue"
        border.width: 10
        radius: rectDraw.height/3
        gradient: Gradient{
   
            GradientStop{
   position: 0.0;color:"blue"}
            GradientStop{
   position: 0.33