qt - Qtquick qml：如何在 Qtquick UI 应用程序中将逻辑与 UI 分离？

Question

假设，我想将逻辑代码与 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' 
        } 
    }
}

显然，上面的方法是行不通的。我在问如何做类似的事情。

谢谢。

Answer 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' 
    } 
    //}
}