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

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