qt - 在 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:

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

所以，我的问题是如何在我的情况下提供 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在同一文件中或在对象树中向上爬来访问对象。

如果您仔细阅读此内容，您会发现，他们不会通过 it's 访问按钮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()
}