How to use ColorOverlay on item in layout?

Question

I have a RowLayout with some items

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"
    }
} 

and I want to apply ColorOverlay on Image inside this layout:

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

But if I put ColorOverlay outside of the layout, then I can't use anchors.fill: icon. And if I make it a 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"
        }
    }

it seems to work but I get warnings in console ShaderEffectSource: 'recursive' must be set to true when rendering recursively.

Answer 1

To set an effect on an Item you can use Item layers, in your case it would be :

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

Note that you don't have to set the source or the size of the effect, it is done automatically.