[C++,QT/Qml]13.Qml프로그래밍 cpp qml 연동2(qml 에서 C++ 함수 호출하기)

[C++,QT/Qml]13.Qml프로그래밍 cpp qml 연동2(qml 에서 C++ 함수 호출하기)

 

 

 

안녕하세요 고급 개발자가 꿈인 코린이 입니다.

 

오늘 포스팅할 내용은 qml에서 c++함수를 호출하는 방법입니다.

 

qml에서 매개변수를 담은 signal을 발생시켜서 c++의 함수에 매개변수를 담아서 넣는 방법으로

 

qml에서 데이터를 c++함수에 보낼때 사용하는 방법 입니다.

 

여기서도 똑같이 connect을 이용해서 signal과 slot들을 등록해 줍니다.

 

등록하는 부분은 이전 포스팅과 같이 cpp클래스 내에서 하면 되고 메인 윈도우의 시그널을 선언해주고

 

cpp클래스의 slot을 선언해서 연결 해주면 됩니다.

 

아래 코드를 보면서 설명 드리겠습니다 코드는 지난 포스팅에서 사용한 코드 그대로 사용하고 

 

추가된 내용에 주석을 넣겠습니다.

 

 

connectEvent.hpp

#ifndef CONNECTEVENT_H
#define CONNECTEVENT_
 
#include <QQuickView>
#include <QObject>
#include <iostream>
using namespace std;
 
class ConnectEvent : public QObject//connection을 사용하기 위해 상속 받아야 하는 클래스
{
public:
    Q_OBJECT//솔직히 왜 추가해야하는지는 모르겠지만 추가를 안하면 connection할때 에러 난다(추후에 알아 보도록 하겠다.)
 
    //그리고 Q_OBJECT 추가한 후 Build->Run qmake를 해주자(중요!!)
public:
    ConnectEvent();
    ~ConnectEvent();
 
    void cppSignaltoQmlSlot();//cpp에서 시그널을 날리고 qml 에서 받기위해 connection을 해두는 함수
 
    void setWindow(QQuickWindow* Window);
private:
 
    QQuickWindow* mMainView;
signals://클래스에서  signal등록 하는 방법
    void cppSignaltestData(QVariant);
public slots://클래스에 slot을 등록 // 추가된 부분
     void cppSlotStringData(QVariant stringData);
     void cppSlotintData(QVariant intData);
};
 
#endif // CONNECTEVENT_H
 
 
 

 

connectEvent.cpp

#include "ConnectEvent.h"
 
ConnectEvent::ConnectEvent()
{
    cout << "ConnectEvent" << endl;
}
 
ConnectEvent::~ConnectEvent()
{
 
}
 
 
void ConnectEvent::cppSignaltoQmlSlot()
{
    //connect 은 연결을 등록해주는 역활을 한다.
    QObject::connect(this, SIGNAL(cppSignaltestData(QVariant)), mMainView, SLOT(qmlSlotTestData(QVariant)));//cpp 시그널과 qml 슬롯을 연결해주는 connection
    QObject::connect(mMainView, SIGNAL(qmlSignalStringData(QVariant)), this, SLOT(cppSlotStringData(QVariant)));//qml 시그널과 cpp 슬롯을 연결해주는 connection // 새로추가
    QObject::connect(mMainView, SIGNAL(qmlSignalintData(QVariant)), this, SLOT(cppSlotintData(QVariant)));//qml 시그널과 cpp 슬롯을 연결해주는 connection//새로 추가
 
    emit cppSignaltestData(3);//cpp에서 시그널을 호출하는 부분 매개변수에 3을 넣어서 3이 qml함수에 전달됨
    emit cppSignaltestData(4);
    emit cppSignaltestData(5);
    emit cppSignaltestData("test");
}
 
void ConnectEvent::setWindow(QQuickWindow* Window)
{
    mMainView = Window;//connection을 해주기 위해 윈도우를 등록
 
    cppSignaltoQmlSlot();//윈도우 등록과 동시에 connection 등록
}
 
void ConnectEvent::cppSlotStringData(QVariant stringData)// 새로추가
{
    cout << "cppSlotTestData call" << endl;
    std::string data_str = stringData.toString().toStdString();//QVariant를 std::string으로 변환
    cout << "cppSlotTestData data_str: " << data_str << endl;
}
 
void ConnectEvent::cppSlotintData(QVariant intData)// 새로추가
{
    cout << "cppSlotintData call" << endl;
    int data = intData.toInt();//QVariant 를 int형으로 변환
    cout << "cppSlotintData data: " << data << endl;
}
 
 
 
 
 
 

 

main.qml

import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import "."
 
Window {
    property bool mbImageClicked : true
    property int mCount : 0
 
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    signal qmlSignalStringData(var stringData); //qml에서 signal을 선언해주는 부분
    signal qmlSignalintData(var intData); //qml에서 signal을 선언해주는 부분
 
    function qmlSlotTestData(data){//slot으로 등록한 함수
        console.log("qmlSlotTestData data:" + data);
    }
 
    StackView
    {
        id:stackView
        anchors.fill: parent
 
 
        initialItem: Item  //제일 첫화면을 설정하는 것으로 설정을 안하면 되돌아오기가 안된다.
        {
            objectName: "mainscreen"//이전화면에 대한 정보를 얻기위해 설정하는 값
            Rectangle//배경 색을 지정하는 부분
            {
                anchors.fill: parent
                color:"red"
            }
            Text
            {
                id:testData
                anchors.horizontalCenter: parent.horizontalCenter
                text:"main screen testData"
                font.pixelSize: 30
                font.bold: true
            }
 
            Text
            {
                id:testText
                anchors.centerIn: parent
                text:"main screen"
                font.pixelSize: 50
                font.bold: true
            }
 
            Button
            {
                id:intButton //int형 데이터를 매개변수에 넣어서 cpp함수를 호출하는 버튼
                anchors.right:strButton.left
                anchors.top:strButton.top
                anchors.rightMargin: 30
                text:"int data"
                onClicked:
                {
                    console.log("qml signal intButton click")
                    qmlSignalintData(1000); //qml 에서 signal을 발생시키는 부분
                }
            }
            Button
            {
                id:strButton //string형 데이터를 매개변수에 넣어서 cpp함수를 호출하는 버튼 
                anchors.right:nextButton.left
                anchors.top:nextButton.top
                anchors.rightMargin: 30
                text:"String Data"
                onClicked:
                {
                    console.log("qml signal strButton click")
                    qmlSignalStringData("this is qml signal data"); //qml 에서 signal을 발생시키는 부분
                }
            }
 
            Button
            {
                id:nextButton
                anchors.top:testText.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                text:"go screen1"
                onClicked:
                {
                     console.log("push screen1")
                     stackView.push(Qt.resolvedUrl("qrc:/screen1.qml"))//다음 화면을 출력하기 위해 stack에 화면을 쌓는 코드
                }
            }
            Button
            {
                anchors.top:testText.bottom
                anchors.left:nextButton.right
                anchors.leftMargin: 30
                text:"go screen2"
                onClicked:
                {
                     console.log("push screen2")
                     stackView.push(Qt.resolvedUrl("qrc:/screen2.qml"))//다음 화면을 출력하기 위해 stack에 화면을 쌓는 코드
                }
            }
        }
    }
}
 
 
 

소스코드 수행 화면

 

 

소스 코드 수행 로그

 

connectEvent.hpp 소스를 먼저 보겠습니다.

 

 

아래와 같이 클래스의 헤더 파일에 slot들을 선언 시킵니다. 매개변수 타입은 QVariant로 선언해 줍니다.

 

public slots://클래스에 slot을 등록 // 추가된 부분

     void cppSlotStringData(QVariant stringData);

     void cppSlotintData(QVariant intData);

 

그리고 connectEvent.cpp의 connect을 등록 시켜 줍니다. 

 

메인 윈도우의 signal이 발생되면 현재 클래스의 slot이 발생되게 아래 처럼 등록을 시켜줍니다.

 

QObject::connect(mMainView, SIGNAL(qmlSignalStringData(QVariant)), this, SLOT(cppSlotStringData(QVariant)));

 

그리고 slot들이 수행해야할 로직들을 작성합니다. 저같은 경우에는 각 로그들을 출력하는 로직을 만들었습니다.

 

그리고 main.qml파일 을 보겠습니다.

 

main.qml을 보시면 아래와 같이 signal들은 선언하는 곳이 있습니다. 먼저 signal들을 아래와 같이 선언 해줍니다.

signal qmlSignalStringData(var stringData);

signal qmlSignalintData(var intData); 

 

그리고  qmlSignalStringData("this is qml signal data"); 와 qmlSignalintData(1000); 처럼 시그널 들을 호출해줍니다.

 

그러면 위의 수행 로그처럼 cpp함수에 this is qml signal data 와 1000 가 출력되는 것을 확인 할수 있습니다.

 

여기까지 qml에서 cpp 함수를 호출하는 방법에 대해서 설명 드렸습니다.

 

다음 시간에는 qml 에서 cpp한수를 호출하는 또하나의 방법을 설명 드리겠습니다.

 

감사합니다.