如何从 QML 组件调用自定义信号？

Question

有没有办法从加载到其他地方的组件中包含的 mouseArea 调用信号？

下例中的onClicked在点击矩形时没有进入

结构需要保持定义。能够定义将阴影应用于任何源的 qml 组件

代码如下：

Window{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item
    {
        id: mainRectangle
        anchors.centerIn: parent
        width: loaderId.width + 60
        height: loaderId.height + 60

        Rectangle {
            id: rect2
            anchors.right: mainRectangle.right
            anchors.top: mainRectangle.top
            anchors.rightMargin: -30
            anchors.topMargin: -30
            width: 100
            height: 100
            color: "red"
            opacity: 0.5
        }

        Loader {
            id: loaderId
            anchors.centerIn: parent
            sourceComponent: component
            active:true
        }
        visible: false
    }

    ShaderEffectSource {
        id: shader
        anchors.fill: mainRectangle
        anchors.margins: -30
        sourceItem: mainRectangle
        opacity: 0.5
        visible: true
    }

    Component {
        id: component
        Rectangle {
            id: rect
            width: 100
            height: 100
            color: "black"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Clicked!")
                    // call a signal from here
                }
            }
        }
    }
}

最后应该显示它现在做了什么并且 mouseArea 应该工作。

Answer 1

onClicked in the example below is not entered when i click on the rectangle.

mainRectangle 不可见，不可见的项目不会获得输入事件。由于 MouseArea 是 mainRectangle 的子项，它也不会获得事件。

In the end the should show what it does now and the mouseArea should work.

您可以直接在 mainRectangle 上设置 opacity 并使用 item layers（link 有一个类似的例子）以确保没有因透明度而重叠：

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item {
        id: mainRectangle
        anchors.centerIn: parent
        width: loaderId.width + 60
        height: loaderId.height + 60
        opacity: 0.5
        layer.enabled: true

        Rectangle {
            id: rect2
            anchors.right: mainRectangle.right
            anchors.top: mainRectangle.top
            anchors.rightMargin: -30
            anchors.topMargin: -30
            width: 100
            height: 100
            color: "red"
        }

        Loader {
            id: loaderId
            anchors.centerIn: parent
            sourceComponent: component
            active: true
        }
    }

    Component {
        id: component
        Rectangle {
            id: rect
            width: 100
            height: 100
            color: "black"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Clicked!")
                    // call a signal from here
                }
            }
        }
    }
}

如何从 QML 组件调用自定义信号？

How can I call a custom signal from a QML Component?

qt

loader

qml