Как использовать 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"
        }
    }
}

Обратите внимание, что вам не нужно устанавливатьисточник или размер эффекта, это делается автоматически.

Answer 2

Вы можете «упаковать» изображение с наложением в какой-нибудь пользовательский элемент, например:

MyImage.qml

import QtQuick 2.11
import QtGraphicalEffects 1.0

Item {        
    Image {
        id: icon
        source: "http://placeimg.com/200/200/any"
        visible: false
    }
    ColorOverlay {
        anchors.fill: icon
        source: icon
        color: "#8000ff00"
    }
}

и использовать его вместо этогоизображения:

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Layouts 1.11

Window {
    visible: true
    width: 640
    height: 480

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

        MyImage {
            Layout.preferredWidth: parent.width / 2
        }

        Text {
            id: caption
            fontSizeMode: Text.Fit
            font.pointSize: 14
            text: "Some caption here"
            Layout.preferredWidth: parent.width / 2
        }
    }
}