在 ui.qml 文件中的组件上添加业务逻辑

Question

我有一个 QML 快速表单，其中有一个图像和一个关联的鼠标区域，如下所示：

// StatusBarForm.ui.qml
Image {
    id: exitButton
    width: 24
    height: 24
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    anchors.leftMargin: 5
    source: "images/exit.png"

    MouseArea {
        id: exitButtonMouseArea
        anchors.fill: parent
    }
}

现在，根据文档，我应该分离业务逻辑，设计师创建了一个StatusBar.qml 表单，然后我添加了：

exitButtonMouseArea.onClicked: {
    Qt.quit()
}

现在问题是我在 Mac 上使用 Qt 5.9 对其进行了测试，它可以正常工作（尽管 Qt 创建者强调了 onClicked 处理程序抱怨 exitButtonMouseArea identifier was not valid。我也尝试了 exitButton.exitButtonMouseArea.onClicked:

现在我在 Linux 上使用 Qt 5.8 进行了尝试，但应用程序没有初始化。如果我删除事件处理程序，那很好，当然我不能与图像交互。

所以，我的问题是如何在我的情况下提供 UI 文件之外的业务逻辑。

编辑 在@derM 回答之后，我做了以下事情：

// StatusBarForm.ui.qml
Image {
    id: exitButton
    width: 24
    height: 24
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    anchors.leftMargin: 5
    source: "images/exit.png"    
}

// StatusBar.qml
StatusBarForm {
    property alias exitButton: exitButton

    Image {
        id: exitButton
        MouseArea {
            id: exitButtonMouseArea
            anchors.fill: parent
            onClicked: {
                Qt.quit()
            }
        }
    }
}

当我的组件初始化时，我从未收到onClicked 事件。

Answer 1

问题是，您只能通过对象的id 访问同一文件中的对象或在对象树中向上爬。

如果您仔细阅读this，您会发现，他们不会通过id 访问按钮，而是将按钮导出为属性

这是通过这一行完成的：

property alias button: button

导出后，您可以使用属性名称从外部访问它。

---

来自文档：

属性别名将按钮导出到使用表单的 QML 代码。 您可以使用导航器中的（导出）按钮将项目导出为属性：
_{（来源：doc.qt.io）}

---

在您的代码中如下所示：

// StatusBarForm.ui.qml

Image {
    id: exitButton
    width: 24
    height: 24
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    anchors.leftMargin: 5
    source: "images/exit.png"

    // export the MouseArea as a property here
    property alias exitButtonMouseArea: exitButtonMouseArea

    MouseArea {
        id: exitButtonMouseArea
        anchors.fill: parent
    }
}

//main.qml

StatusBarExitForm {
    // access the MouseArea via the property here
    exitButtonMouseArea.onClicked: Qt.quit()
}