qml 透明度渐变

渐变

qml设置透明度有两个方式，一种是Qt.rgba()方法是：将十六进制转成rgb，每个数值都除以255,另一种是opacity属性值设置，但是这两种是有区别的，Qt.rgba()设置只能当前的Rectangle有效，而opacity的设置会影响到子部件。

结合gradient提供的渐变效果，使用带透明度的颜色渐变，但这种 方式只能实现单一颜色的透明度渐变，不能实现图片的透明度渐变

        gradient: Gradient {
            GradientStop {  position: 0.0;    color: "blue"  }
            GradientStop {  position: 0.5;    color: Qt.rgba(77/255,76/255,167/255, 0.5) } //    //透明度渐变
            GradientStop {  position: 1.0;    color: Qt.rgba(77/255,176/255,67/255, 0.0) }
        }

完整代码

Window {
    id:win
    visible: true
    width: 600
    height: 600


    Image{
        anchors.fill: parent
        source: "https://img.zcool.cn/community/01e6505d2d95f9a801214837166e0c.jpg@1280w_1l_2o_100sh.jpg"
        fillMode: Image.PreserveAspectCrop
    }

    Rectangle {
        id: rect2;
        anchors.top: parent.top
        anchors.topMargin: 100
        anchors.left: parent.left
        anchors.leftMargin: 150
        color: Qt.rgba(77/255,76/255,167/255, 0.5)//设置透明度   每个数值都除以255
        width: 100
        height: 60
        Rectangle {
            anchors{top: parent.top; topMargin: 20; left: parent.left; leftMargin: 30}
            width: 40; height: 30
            color: "red"
        }
    }

    Rectangle{
        id:rect
        anchors.centerIn: parent
        width: 200
        height: 200
        color: "green"
        gradient: Gradient {
            GradientStop {  position: 0.0;    color: "blue"  }
            GradientStop {  position: 0.5;    color: Qt.rgba(77/255,76/255,167/255, 0.5) } //    //透明度渐变
            GradientStop {  position: 1.0;    color: Qt.rgba(77/255,176/255,67/255, 0.0) }
        }


    }
}

效果

参考连接：https://blog.csdn.net/chenyijun/article/details/105947449