MouseArea 单击在动态创建的 QML 组件上不起作用

Question

我正在尝试创建一个带有按钮的自定义选项卡，该按钮是在用户成功登录后创建的。动态组件的创建效果很好，但我似乎对自定义按钮的鼠标区域内的 onClicked 信号有问题。

如果我不动态创建 Application.qml，自定义按钮可以完美工作。 我似乎找不到问题，因为我是 qt 编码的新手，所以我确信我错过了一些东西。这是代码：

自定义TabButton.qml

import QtQuick 6.2

Rectangle{
    id: buttonRect

    width: 100
    height: 20
    radius: 2

    color: "#B2BEB5"

    signal buttonClicked

    Component.onCompleted:{
        buttonRect.buttonClicked.connect(mouseArea.onClicked);
    }

    Text{
        id: buttonText

        anchors.centerIn: parent
        text: qsTr("TESTING")
    }

    MouseArea{
        id: mouseArea

        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        hoverEnabled: true

        onClicked: { console.log("NOT WORKING"); } //buttonRect.buttonClicked()
    }

}

自定义选项卡.qml

import QtQuick 6.2

Row{
    id: tabRow

    spacing: 2
    anchors.top: parent.top
    anchors.left: parent.left

    property int tabIndex

    CustomTabButton{
        id: firstButton

        onButtonClicked: {

            tabIndex = 0;
            console.log("first button clicked");

        }

    }
    CustomTabButton{
        id: secondButton

        onButtonClicked: {
            tabIndex = 1;
            console.log("second button clicked");

        }

    }

    Rectangle{
        id: underline

        width: 100
        height: 2
        color:"cyan"
        anchors.top: parent.bottom
        property real targetX: tabRow.tabIndex * underline.width

        NumberAnimation on x{
            duration: 200;
            to: underline.targetX;
            running: underline.x !== underline.targetX;
        }
    }

}

Login.qml 中用于创建的代码

Connections{
        target: db

        function onWrongLogin() {
            wrongLoginText = true
        }

        function onRightLogin(){

            var component = Qt.createComponent("Application.qml");
            //appWindow is the Window in main.qml  it only has Login in it
            var application = component.createObject(appWindow,{ width: 
                             appWindow.width, height:appWindow.height});

            if(application === null)
                console.log("Error creating object");

            login.destroy();

        }
    }

应用程序.qml

import QtQuick 6.2
import QtQuick.Controls

Item {
    id: applicationItem

    visible: true

    CustomTab{
        enabled: true
    }

}

Answer 1

感谢 JarMan 的评论让我大开眼界，我解决了这个问题。您需要将来自 MouseArea 的单击信号连接到一个插槽（函数），并在发出信号时调用该函数。

自定义选项卡.qml

import QtQuick 6.2

Rectangle{
   id: buttonRect

   width: 100
   height: 20
   radius: 2

   color: "#B2BEB5"

   function showClicked(){
       console.log("WORKING")
   }

   //signal buttonClicked

   Text{
       id: buttonText

       anchors.centerIn: parent
       text: qsTr("TESTING")
   }

   MouseArea{
       id: mouseArea

       anchors.fill: parent
       cursorShape: Qt.PointingHandCursor
       hoverEnabled: true

       Component.onCompleted:{
           mouseArea.clicked.connect(showClicked);
       }
       
       onClicked: { console.log("NOT WORKING"); } //buttonRect.buttonClicked()
   }

}