Qml 在几个矩形上跨越渐变

我想要一个

LinearGradient

用作背景，跨入多个同级

矩形

s。在每个

矩形中

，可以看到渐变的不同部分。 我使用一个

OpacityMask

来«填充»带有渐变的

矩形。
线性半径
宽度
是每个
矩形
宽度
的总和

如果我使用一个
矩形
，它可以工作。从2开始，无论我尝试什么，它都不能正常工作（我在下面的代码中留下一些位来想象）。到目前为止，我得到的最好结果是在每个
矩形中重复使用
LinearGradient
的相同部分。
我想我可以使用一个
LinearGradient
每个
Rectangle
，更改
GradientStop
值，但它看起来很复杂，我想有一个简单而优雅的解决方案

矩形
{
id:第1页
//锚定。填充：父级
//id:masqCont
anchors.centerIn:父对象
边框颜色：“蓝色”
宽度：childrenRect.width
身高：childrenRect.height
可见：假
矩形
{
id:masq1
y:0
边框颜色：“红色”
边框宽度：10
宽度：100
身高：100
半径：40
文本{文本：“联合国”}
可见：正确
}
矩形
{
x：宽度
id:masq2
边框颜色：“红色”
边框宽度：10
宽度：100
身高：100
半径：40
文本{Text:“deux”}
文本{Text:“deux”}
可见：正确
}
}
线性梯度{
id:毕业生
宽度：200//masqCont.childrenRect.width
高度：100//masqCont.childrenRect.height
//锚。填充物：马斯康
开始：Qt.点（0,0）
结束：Qt.point（200100）//masqCont.width，masqCont.height）
梯度：梯度{
渐变停止{位置：0.0；颜色：“白色”}
渐变停止{位置：1.0；颜色：“黑色”}
}
可见：假
}
不透明膜{
id:om21
锚固件填充：第1页；
资料来源：格拉德
maskSource:page1；
}
//不透明膜{
//id:om21
//锚。填料：masq1；
//资料来源：格拉德
//maskSource:masq1；
//            }
//不透明膜{
//id:om22
//锚。填料：masq2；
//资料来源：格拉德
//maskSource:masq2；
//            }
//      }
//    }
你就快到了

主要问题是您选择了一个白色矩形作为子矩形的容器。这会导致显示整个LinearGradient，因为遮罩完全不透明（无alpha）

请参见下面的工作示例（可以通过拖动矩形来移动矩形）

导入QtQuick 2.7
导入QtQuick.Window 2.0
导入QtQuick.Controls 2.0
导入QtGraphicalEffects 1.0
应用程序窗口
{
可见：正确
宽度：500
身高：400
项目
{
id:第1页
锚定。填充：父级
不透明度：0
中继器
{
型号：20
矩形
{
id:masq1
x:Math.random（）*（第1页宽度）
y:Math.random（）*（第1页高度）
宽度：50
身高：50
半径：5
鼠耳
{
锚定。填充：父级
drag.target:父对象
}
}
}
}
线性梯度{
id:毕业生
锚固件。填充：第1页
开始：Qt.点（0,0）
结束：Qt.点（第1页宽度，0）
梯度：梯度{
渐变停止{位置：0.0；颜色：“白色”}
渐变停止{位置：1.0；颜色：“黑色”}
}
可见：假
}
不透明膜{
锚固件填充：第1页；
资料来源：格拉德
maskSource:page1；
}
}
你就快到了

主要问题是您选择了一个白色矩形作为子矩形的容器。这会导致显示整个LinearGradient，因为遮罩完全不透明（无alpha）

请参见下面的工作示例（可以通过拖动矩形来移动矩形）

导入QtQuick 2.7
导入QtQuick.Window 2.0
导入QtQuick.Controls 2.0
导入QtGraphicalEffects 1.0
应用程序窗口
{
可见：正确
宽度：500
身高：400
项目
{
id:第1页
锚定。填充：父级
不透明度：0
中继器
{
型号：20
矩形
{
id:masq1
x:Math.random（）*（第1页宽度）
y:Math.random（）*（第1页高度）
宽度：50
身高：50
半径：5
鼠耳
{
锚定。填充：父级
drag.target:父对象
}
}
}
}
线性梯度{
id:毕业生
锚固件。填充：第1页
开始：Qt.点（0,0）
结束：Qt.点（第1页宽度，0）
梯度：梯度{
渐变停止{位置：0.0；颜色：“白色”}
渐变停止{位置：1.0；颜色：“黑色”}
}
可见：假
}
不透明膜{
锚固件填充：第1页；
资料来源：格拉德
maskSource:page1；
}
}
如果它只是您想要的
矩形，
O
import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    id: win
    visible: true
    width: 400
    height: 400

    Rectangle {
        id: grad
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0; color: 'blue' }
            GradientStop { position: 0.33; color: 'red' }
            GradientStop { position: 0.66; color: 'yellow' }
            GradientStop { position: 1; color: 'blue' }
        }

        visible: false
    }

    ShaderEffectSource {
        sourceItem: grad
        x: 50
        y: 50
        height: 100
        width: 200
        sourceRect: Qt.rect(x, y, width, height)
    }

    ShaderEffectSource {
        sourceItem: grad
        x: 280
        y: 80
        height: 150
        width: 70
        sourceRect: Qt.rect(x, y, width, height)
    }
}