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

您可以 "pack" 在某些自定义项目中叠加图像，例如：

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

Answer 2

要在 Item 上设置效果，您可以使用 Item layers，在您的情况下为：

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

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

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

How to use ColorOverlay on item in layout?

qt

qml

qt-quick

qt5

qtquick2