Qtquick qml:如何在Qtquick UI应用程序中将逻辑与UI分离

Question

假设我想将逻辑代码与UI代码分离为myApp。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

可以使用alias属性扩展鼠标区域。以下是修改后的代码:

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