QML간의 fuction 호출(Signal/Slot)

 QML 파일들간에 fuction 호출이 필요한 경우가 있다. 아래의 그림의 경우 Panret(main.qml)에서 ChildA와 ChildB qml파일을 이용하고 있으며, 각 파일들간에 시그널을 이용해서 데이터를 주고 받는 것을 확인해 본다.

 

BasicFunctionCallBetweenQMLs.zip

 

<main.qml>

import QtQuick 2.3 import QtQuick.Controls 1.2 ApplicationWindow { id: applicationWindow1 visible: true width: 400 height: 400 title: qsTr("Hello World") /*시그널 정의부 시그널이 정의된 영역의 id가 ApplicationWindow1이므로 applicationWindow1.sigSay("text")로 시그널을 발생할 수 있음*/ signal sigSay(string msg); /*시그널 수신을 위한 커넥션부 onSignalName(onSigSay)로 시그널을 수신할 수 있음*/ Connections{ target: applicationWindow1 onSigSay:{ textResult.text = msg; } } Rectangle { id: rectangle1 height: 180 color: "#f96f6f" anchors.right: parent.right anchors.left: parent.left anchors.leftMargin: 0 Text { id: text1 text: qsTr("Parent") verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.right: parent.right anchors.rightMargin: 5 anchors.left: parent.left anchors.leftMargin: 5 anchors.top: parent.top anchors.topMargin: 5 font.pixelSize: 15 } Rectangle { id: rectangle2 height: 70 color: "#a7c6e5" anchors.rightMargin: 5 anchors.leftMargin: 5 anchors.top: text1.bottom anchors.right: parent.right anchors.left: parent.left anchors.topMargin: 10 Text { id: text2 text: "Send \"Parent\"" verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.fill: parent font.pixelSize: 12 } // 클릭시 시그널 전송 MouseArea { id: mouseArea1 anchors.fill: parent onClicked: { applicationWindow1.sigSay("Called by Parent"); } } } Rectangle { id: rectangle3 color: "#cfb6db" anchors.topMargin: 10 anchors.rightMargin: 5 anchors.leftMargin: 5 anchors.bottomMargin: 5 anchors.top: rectangle2.bottom anchors.right: parent.right anchors.bottom: parent.bottom anchors.left: parent.left // 시그널 수신 결과를 표시 Text { id: textResult text: qsTr("") verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.fill: parent font.pixelSize: 15 } } } // 자식 qml 파일들을 기술 Rectangle{ x: 0; y:200 width: parent.width id:rootItem ChildA{ x: 0 y: 0 width: 150 height: 200 } ChildB{ y: 0 width: 150 height: 200 anchors.right: parent.right } } }

 

<ChindA.qml>

import QtQuick 2.0 Rectangle { id: rectangle1 color: "#f96f6f" // sigSay시그널을 수신하기 위한 커넥션부 Connections{ target: applicationWindow1 onSigSay:{ // 수신한 테이터를 Text Quick 컴포넌트에 저장 textResult.text = msg; } } Text { id: text1 text: qsTr("ChildA") verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.right: parent.right anchors.rightMargin: 5 anchors.left: parent.left anchors.leftMargin: 5 anchors.top: parent.top anchors.topMargin: 5 font.pixelSize: 15 } Rectangle { id: rectangle2 height: 70 color: "#a7c6e5" anchors.rightMargin: 5 anchors.leftMargin: 5 anchors.top: text1.bottom anchors.right: parent.right anchors.left: parent.left anchors.topMargin: 10 Text { id: text2 text: "Send \"ChildA\"" verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.fill: parent font.pixelSize: 12 } // 시그널 발생부 MouseArea { id: mouseArea1 anchors.fill: parent onClicked: { applicationWindow1.sigSay("called by ChildA"); } } } Rectangle { id: rectangle3 color: "#cfb6db" anchors.topMargin: 10 anchors.rightMargin: 5 anchors.leftMargin: 5 anchors.bottomMargin: 5 anchors.top: rectangle2.bottom anchors.right: parent.right anchors.bottom: parent.bottom anchors.left: parent.left // 시그널 수신에 따른 테스트 변경부 Text { id: textResult text: qsTr("") verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.fill: parent font.pixelSize: 15 } } }

 

<ChindB.qml>

import QtQuick 2.0 Rectangle { id: rectangle1 color: "#f96f6f" Connections{ target: applicationWindow1 onSigSay:{ textResult.text = msg; } } Text { id: text1 text: qsTr("ChildB") verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.right: parent.right anchors.rightMargin: 5 anchors.left: parent.left anchors.leftMargin: 5 anchors.top: parent.top anchors.topMargin: 5 font.pixelSize: 15 } Rectangle { id: rectangle2 height: 70 color: "#a7c6e5" anchors.rightMargin: 5 anchors.leftMargin: 5 anchors.top: text1.bottom anchors.right: parent.right anchors.left: parent.left anchors.topMargin: 10 Text { id: text2 text: "Send \"ChildB\"" verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.fill: parent font.pixelSize: 12 } MouseArea { id: mouseArea1 anchors.fill: parent onClicked: { applicationWindow1.sigSay("called by ChildB"); } } } Rectangle { id: rectangle3 color: "#cfb6db" anchors.topMargin: 10 anchors.rightMargin: 5 anchors.leftMargin: 5 anchors.bottomMargin: 5 anchors.top: rectangle2.bottom anchors.right: parent.right anchors.bottom: parent.bottom anchors.left: parent.left Text { id: textResult text: qsTr("") verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors.fill: parent font.pixelSize: 15 } } }