Qtquick qml：如何在 Qt Quick UI 应用程序中将逻辑与 UI 分离？答案

【问题标题】：Qtquick qml : How to seperate Logic from UI in Qtquick UI Application?Qtquick qml：如何在 Qt Quick UI 应用程序中将逻辑与 UI 分离？
【发布时间】：2016-09-13 07:06:38
【问题描述】：

假设，我想将逻辑代码与 UI 代码分开为 myApp.qml 和 myAppForm.ui.qml。

ui.qml 不支持 javascript 逻辑，例如鼠标事件。

假设，以下问题。

//myAppForm.ui.qml
import QtQuick 2.4

Item {

Rectangle {
    id: rectangle1
    color: "#a0ebfb"
    anchors.fill: parent
        MouseArea {
            id: mouse1
            anchors.fill: parent
        }
    }
}

以上是UI代码。我需要将逻辑代码分隔为，

//myApp.qml
import QtQuick 2.4

myAppForm {
    mouse1{
        onClicked: { 
            rectangle1.color = 'red' 
        } 
    }
}

显然，上述方法不起作用。我在问如何做类似的事情。

谢谢。

【问题讨论】：

附言。我正在使用 Qt 5.7

标签： qt qml qt5 qtquick2 qt5.7

【解决方案1】：

您可以使用别名属性扩展鼠标区域。这是修改后的代码。

//myAppForm.ui.qml
Item {
Property alias rectMouseArea: mouse1
Rectangle {
    id: rectangle1
    color: "#a0ebfb"
    anchors.fill: parent
       MouseArea {
            id: mouse1
            anchors.fill: parent
        }
    }

}

//myApp.qml
import QtQuick 2.4

myAppForm {
   //mouse1{
        rectMouseArea.onClicked: { 
            rectangle1.color = 'red' 
    } 
    //}
}

【讨论】：