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

Posted 2023-02-16

【中文标题】如何从 QML 组件调用自定义信号？

【英文标题】：How can I call a custom signal from a QML Component?

【发布时间】：2018-09-08 13:10:55

【问题描述】：

有没有办法从加载到其他地方的组件中的 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 应该可以工作。

【问题讨论】：

请提供实际运行的代码。

在你的情况下添加一个你想要触发的信号到根项目，rect。例如signal mySignal()，然后从您需要的地方调用它root.mySignal()

只要MouseArea 不可见，因此没有收到事件，这将不起作用。

设法通过 layer.enabled 和 layer.effect 做到这一点。 @Mitch 您想添加解决方案，因为您指出了它。谢谢:)

好的，如果我做对了，请告诉我。我没有效果所以答案不用那个。

【参考方案1】：

当我点击矩形时，没有输入下例中的onClicked。

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

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

不用隐藏源项并使用ShaderEffectSource，您可以直接在mainRectangle上设置opacity并使用item layers（链接有类似示例），以确保不因透明度而重叠：

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
                
            
        
    

【讨论】：

我已经编辑了代码。还有一个需要应用的阴影，如果我不使用着色器设置不透明度，颜色将被混合（阴影将在加载的组件后面可见）。