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