qt - 如何在布局中的项目上使用 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"
    }
} 

我想在此布局内的 Image 上应用 ColorOverlay:

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

但是如果我将 ColorOverlay 放在布局之外，那么我就无法使用 anchors.fill: icon。如果我让它成为一个 child

    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 设置效果，您可以使用 Item layers ，在你的情况下是:

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

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