动态创建QML组件时MouseArea点击事件失效问题求助

登录成功后通过动态创建Application.qml的方式加载自定义标签栏，组件能正常显示，但自定义按钮CustomTabButton内MouseArea的onClicked信号完全无法触发。静态直接引用Application.qml时按钮功能一切正常。

相关代码 #

CustomTabButton.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()
    }

}

CustomTab.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是main.qml中的Window，初始仅包含Login
        var application = component.createObject(appWindow,{ width: 
                         appWindow.width, height:appWindow.height});

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

        login.destroy();
    }
}

Application.qml #

import QtQuick 6.2
import QtQuick.Controls

Item {
    id: applicationItem

    visible: true

    CustomTab{
        enabled: true
    }

}

问题核心是CustomTabButton.qml的信号连接逻辑完全错误：

• 当前代码里buttonRect.buttonClicked.connect(mouseArea.onClicked)是把自定义信号绑定到鼠标点击函数，逻辑颠倒——应该是鼠标点击时触发自定义信号。
• 动态创建组件时，这种反向绑定会导致点击事件完全无法正常传递。

修改CustomTabButton.qml：

1. 删除Component.onCompleted中的错误信号连接代码
2. 在MouseArea的onClicked回调里直接触发自定义信号

修改后的CustomTabButton.qml：

import QtQuick 6.2

Rectangle{
    id: buttonRect

    width: 100
    height: 20
    radius: 2

    color: "#B2BEB5"

    signal buttonClicked

    Text{
        id: buttonText

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

    MouseArea{
        id: mouseArea

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

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

额外优化：确保动态创建的组件占满父窗口，避免点击区域被截断，修改Application.qml：

import QtQuick 6.2
import QtQuick.Controls

Item {
    id: applicationItem

    visible: true
    width: parent.width
    height: parent.height

    CustomTab{
        enabled: true
        anchors.top: parent.top
        anchors.left: parent.left
    }
}

修改后，动态创建组件内的按钮点击信号即可正常触发，同时能正确传递自定义信号给父组件。

内容的提问来源于stack exchange，提问作者dizarc