如何在布局中的项目上使用 ColorOverlay？

Question

我有RowLayout一些物品

RowLayout {
    anchors.fill: parent
    anchors.leftMargin: 3

    Image {
        id: icon
        source: imgSource
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
    }

    Text {
        id: caption
        height: parent.height
        fontSizeMode: Text.Fit
        font.pointSize: textSize
        verticalAlignment: Text.AlignVCenter
        text: captionText
        color: "white"
    }
} 

我想ColorOverlay在Image这个布局中应用：

ColorOverlay {
    id: overlay
    anchors.fill: icon
    source: icon
    color: "#ff0000ff"
}

但如果我把它放在ColorOverlay布局之外，那么我就不能使用anchors.fill: icon. 如果我把它变成一个孩子

    Image {
        id: icon
        source: imgSource
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true  
        ColorOverlay {
            id: overlay
            anchors.fill: icon
            source: icon
            color: "#ff0000ff"
        }
    }

它似乎有效，但我在控制台中收到警告ShaderEffectSource: 'recursive' must be set to true when rendering recursively.

Answer 1

要设置效果，Item您可以使用项目图层，在您的情况下它将是：

Image {
    source: imgSource
    sourceSize: Qt.size(parent.width, parent.height)
    smooth: true  
    layer {
        enabled: true
        effect: ColorOverlay {
            color: "#ff0000ff"
        }
    }
}

请注意，您不必设置效果的源或大小，它是自动完成的。