QML自定义组件Connection失效：嵌套组件点击无响应

我正在学习QML，目前在多层嵌套组件中开发，尝试通过最内层组件的按钮打开对话框，用console.log()和文本变更调试。单独预览该组件时功能正常，但运行整个窗口时失效。按钮hover始终正常，说明能接收鼠标事件，该组件绘制在ListView中。

按钮/对话框组件（Hurdle.qml） #

Button {
    id: control
    width: control.size
    height: control.size
    text: "T"
    enabled: true
    hoverEnabled: true
    background: Rectangle {
        color: control.hovered ? Constants.colour_background : Constants.colour_backgroundLight
    }
    Dialog {
        id: dialog
        visible: false
        modal: true
        title: "Properties"
        standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel
        anchors.centerIn: Overlay.overlay
        contentItem: Rectangle {
            color: "lightskyblue"
            width: 100
            height: 100
        }
    }
    Connections {
        function onClicked() {
            console.log("test")
            control.text = "C"
        }
    }
}

第一层容器组件 #

Button {
    id: control
    property int size: 64
    property ListModel listModel: listModel
    enabled: true
    hoverEnabled: true
    bottomPadding: 0
    leftPadding: 0
    rightPadding: 0
    topPadding: 0
    implicitWidth: size * listModel.count
    implicitHeight: size * 2
    background: ListView {
        id: listView
        width: size * listModel.count
        height: size * 2
        anchors.left: parent.left
        anchors.top: parent.top
        orientation: ListView.Horizontal
        model: ListModel {
            id: listModel
            ListElement {}
            ListElement {}
            ListElement {}
            ListElement {}
        }
        delegate: Item {
            width: size
            height: size
            Column {
                Hurdle {}
                Button {
                    width: size
                    height: size
                }
            }
        }
    }
}

切换到上层文件Live Preview调试时，控制台无输出、文本也不变，onClicked函数未执行。

• 核心原因：外层容器本身是Button组件，会拦截内部所有鼠标点击事件，优先响应自身的点击逻辑，导致内层Hurdle里的按钮点击事件无法触发。hover正常是因为hover事件不会被外层Button独占拦截。

• 解决方案：

  1. 替换外层容器类型：把外层Button改成Item或Rectangle这类非交互容器组件，因为你只是用它承载ListView，不需要Button的交互特性：

     Item { // 替换原Button
         id: control
         property int size: 64
         property ListModel listModel: listModel
         implicitWidth: size * listModel.count
         implicitHeight: size * 2
         ListView {
             // 原ListView代码保持不变
         }
     }
     

  2. 保留外层Button时传递事件：若必须保留外层Button特性，可在内层Item上添加MouseArea，将点击事件传递给内层按钮：

     delegate: Item {
         width: size
         height: size
         MouseArea {
             anchors.fill: parent
             propagateComposedEvents: true
             onClicked: mouse.accepted = false // 不拦截事件，传递给内层按钮
         }
         Column {
             Hurdle {}
             Button { width: size; height: size }
         }
     }
     

  3. 简化内层按钮信号处理：去掉冗余的Connections组件，直接在Button内部实现onClicked逻辑：

     Button {
         id: control
         // ... 其他属性
         onClicked: {
             console.log("test")
             control.text = "C"
             dialog.visible = true // 直接打开对话框
         }
         Dialog { /* ... */ }
     }
     

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