[QT]example3-QML+C++(1)

👉 QML을 통해서 입력된 내용을 직접 화면에 출력 할 수 있습니다.
You can directly display the content entered through QML on the screen.

👉 이 부분은 출력은 C++이 수행하고 C++코드를 QML에 연결하는 것에 대한 설명입니다.
This part explains how the output is done in C++ and how to connect the C++ code to QML.

1.프로젝트 / Project

2.코드 / Code

Myconnection.h

#ifndef MYCONNECTOR_H
#define MYCONNECTOR_H

// MyConnector.h

#include <QObject>
#include <QString>

class MyConnector : public QObject {
    Q_OBJECT

public:
    explicit MyConnector(QObject *parent = nullptr);

    Q_INVOKABLE void updateText(const QString &text1, const QString &text2);

signals:
    void resultReady(const QString &result);
};

#endif // MYCONNECTOR_H

✔️ 헤더가 다른 클래스 파일에 두번 삽입되면 컴파일 오류가 납니다.
If a header is inserted twice in different class files, a compilation error occurs.

✔️ 위의 코드에서 아래와 같이 작성하면 중복 삽입 오류가 발생하지 않습니다.
If you write the code above as follows, a duplicate insertion error will not occur.

✔️ 이미 헤더가 C++ 클래스 파일에 포함되어 있으면 무시합니다.
If the header is already included in the C++ class file, it is ignored.

 #ifndef MYCONNECTOR_H
 #define MYCONNECTOR_H

  코드 / CODE

 #endif // MYCONNECTOR_H 

qml/Screen01.qml

✔️복잡해서 이 파일에서 플레이스홀더 기능은 제거했습니다.
I removed the placeholder function from this file because it was complicated.

/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls


Rectangle {
    // id: rectangle
    // width: Constants.width
    // height: Constants.height

    // color: Constants.backgroundColor

    // 상수 직접 선언
    property int widthConst: 1920
    property int heightConst: 1080
    property color backgroundColorConst: "#EAEAEA"

    width: widthConst
    height: heightConst
    color: backgroundColorConst

    Column {
        id: column
        width: 200
        anchors.centerIn: parent
        spacing: 10

        Rectangle {
            width: 180
            height: 30
            color: "white"
            border.color: "black"

            TextEdit {
                id: textEdit
                anchors.fill: parent
                width: 80
                height: 20
                text: qsTr("입력1/input1")
                font.pixelSize: 12
            }
        }

        Rectangle {
            width: 180
            height: 30
            color: "white"
            border.color: "black"

            TextEdit {
                id: textEdit2
                width: 80
                height: 20
                text: qsTr("입력2/input2")
                font.pixelSize: 12
            }
        }

        Text {
            id: text1
            text: qsTr("값출력/Print Value")
            font.pixelSize: 12
        }

        Button {
            id: button
            text: qsTr("Button")
            // === 코드추가:클릭 이벤트 ===
            // === Add code:Click Event ===
            onClicked: myConnector.updateText(textEdit.text, textEdit2.text)

        }
        // === 코드추가:연결 ===
        // === Add code:connection ===
        Connections {
            target: myConnector
            function onResultReady(result) {
                text1.text = result
            }
        }

    }
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

// QML에 C++ 객체를 등록하기 위해 필요
// Required to register C++ objects in QML
#include <QQmlContext>

// MyConnector 클래스 선언 포함
// Include MyConnector class declaration
#include "MyConnector.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreationFailed,
        &app,
        []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);

    // === 코드 추가 / Add code ===
    MyConnector connector;
    engine.rootContext()->setContextProperty("myConnector", &connector);

    // === 여기까지 / Up to here ===
    engine.loadFromModule("example3", "Main");

    return app.exec();
}

main.qml

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Example3")

    // UI 파일 로딩 / UI file loading
    Loader {
        anchors.fill: parent
        source: "qml/Screen01.qml"
    }
}

Myconnector.cpp

// MyConnector.cpp
#include "MyConnector.h"

MyConnector::MyConnector(QObject *parent) : QObject(parent) {}

void MyConnector::updateText(const QString &text1, const QString &text2) {
    QString combined = text1 + " " + text2;
    emit resultReady(combined);
}

CmakeLists.txt

✔️ 아래의 굵은 글씨가 파일 추가된 부분입니다.
The bold text below is the added portion of the file.

✔️ 바로 아래의 코드는 직접 추가한 코드 입니다.
The code right below is the code I added myself.

qml/Screen01.qml

✔️바로 아래의 코드는 자동으로 수정된 내용입니다
The code directly below is automatically corrected.

✔️QT Creator의 Souce Files에서 마우스 오른쪽 클릭,Add New를 사용한 경우 자동으로 아래의 내용이 추가됩니다.
If you right-click on Source Files in QT Creator and use Add New, the following will be added automatically.

✔️여기서는 클래스 파일과 헤더파일을 추가했습니다.
Here we have added the class file and header file.

SOURCES MyConnector.h
SOURCES MyConnector.cpp

✔️ CmakeLists전체 코드 / CmakeLists Full Code

cmake_minimum_required(VERSION 3.16)

project(example3 VERSION 0.1 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(Qt6 REQUIRED COMPONENTS Quick)

qt_standard_project_setup(REQUIRES 6.8)

qt_add_executable(appexample3
    main.cpp
)

qt_add_qml_module(appexample3
    URI example3
    VERSION 1.0
    QML_FILES
        Main.qml
        qml/Screen01.qml
        SOURCES MyConnector.h
        SOURCES MyConnector.cpp
)

# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
# If you are developing for iOS or macOS you should consider setting an
# explicit, fixed bundle identifier manually though.
set_target_properties(appexample3 PROPERTIES
#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.appexample3
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

target_link_libraries(appexample3
    PRIVATE Qt6::Quick
)

include(GNUInstallDirs)
install(TARGETS appexample3
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

3.실행 / Run