해커를 꿈꾸는 개발자

QT qml의 TextField, Button을 이용한 문구 출력

QML을 이용해 GUI 프로그램을 만들기 위해 프로젝트 생성은 아래 링크를 참고하시면 됩니다.

https://zidarn87.tistory.com/9?category=415008 

Button을 눌렀을 때 TextField에 입력된 text를 label에 업데이트하는 것을 구현해 봅니다.

Qt의 Cpp 쪽으로 데이터를 보내지 않고, qml에 내에서만 코드를 작성해 볼게요.

"Name : " 문구를 표시한 Label과 TextField로부터 받아온 문구를 표시할 Label을 생성하였습니다. 

displayname Label의 위치는 namelabel의 아래 쪽에 위치하도록 하였습니다.  

    Label{
        id : namelabel
        x: parent.x
        font.pointSize: 20
        text : "Name : "
    }

    Label{
        id : displayname
        y: namelabel.height + 30
        font.pointSize: 20
        text : "No input"
    }

text를 입력받을 TextField를 생성하였습니다. 

위치는 namelabel의 오른쪽에 위치하도록 하였습니다. 

    TextField {
        id:textfield
        x:namelabel.width
        width: 200
        placeholderText: qsTr("Enter name")
        font.pointSize: 20
    }

Buttom 컴포넌트를 생성하였습니다. 

위치는 textfield의 오른쪽에 위치하도록 하였고, button을 클릭하였을 때, displayname Label의 문구를 업데이트 하도록 구현하였습니다. 

    Button{
        x: textfield.x + textfield.width + 10
        text: "Button"
        onClicked: buttonClickProcess()

        function buttonClickProcess(){
            displayname.text = "my name is " + textfield.text
        }
    }

전체 qml의 코드는 아래와 같습니다. 

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

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

    Label{
        id : namelabel
        x: parent.x
        font.pointSize: 20
        text : "Name : "
    }

    Label{
        id : displayname
        y: namelabel.height + 30
        font.pointSize: 20
        text : "No input"
    }

    TextField {
        id:textfield
        x:namelabel.width
        width: 200
        placeholderText: qsTr("Enter name")
        font.pointSize: 20
    }

    Button{
        x: textfield.x + textfield.width + 10
        text: "Button"
        onClicked: buttonClickProcess()

        function buttonClickProcess(){
            displayname.text = "my name is " + textfield.text
        }
    }
}

QT - Widget, Console, Quick 프로젝트 생성하여 Hello world 출력하기

1. Qt Widgets Application으로 Hello world 출력하기

Qt Widgets Application을 만들고 계속 Next를 누른다.

프로젝트를 생성하면 아래와 같이 파일이 생성된다.

Test1.pro : project에 대한 정보를 가지고 있음

main.cpp : 프로그램 진입점

mainwindow.h / mainwindow.cpp : 위젯

mainwindow.ui : ui 디자인 파일이고, 실제로는 xml 파일 형식으로 되어 있다. 

main.cpp

QApplication과 MainWindow를 생성하고, 윈도우를 표시한다.

mainwindow.h / mainwindow.cpp

QMainWindow를 상속한 MainWindow 클래스에서 widget을 만든다.

mainwindow.ui 

디자인 도구를 사용하여 Hello World! 를 찍도록 Label을 추가한다.

코드를 빌드하여, RUN하면 아래와 같이 Hello world!가 출력된다. 

2. Qt Console Application으로 Hello world 출력하기

Qt Console Application으로 프로젝트를 생성하면, 프로젝트 정보를 담고 있는 pro 파일과 main.cpp만 생성된다.

간단하게 printf만 작성하여 hello world!를 출력해보자.

#include <QCoreApplication>

int main(int argc, char *argv[])
{
    QCoreApplication a(argc, argv);
    printf("hello world!");

    return a.exec();
}

빌드하고 실행하면 아래와 같이 Console로 출력된다.

3. Qt Quick Application - Empty 로 Hello world 출력하기

프로젝트가 생성되면, 프로젝트 정보를 가지고 있는 pro 파일과 main. cpp 그리고 main.qml 파일이 생성된다. 

main.qml에 hello world!를 출력할 Label을 생성하여, 문구를 출력해 본다.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

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

    Label {
        id: hello
        text: "Hello world!"
        color: Black
    }
}

실행해보면 아래와 같이 출력된다. 

Widget, Console, Quick 프로젝트를 생성하고, 간단하게 hello world를 출력해 보았다. 

QT Creator 설치하기

윈도우 용 Creator를 설치해 보겠습니다. 

먼저 아래 링크로 들어가서 최신 Creator를 받아 보겠습니다. 

개인용으로 사용한다면, 아래 링크에서 다운로드 하면 됩니다. 

https://download.qt.io/archive/qt/

아직 5.15 버전은 정식으로 나오지 않아, 5.14.2 버전을 다운로드 해보겠습니다. 

용량은 2.3G 정도이고, 다운로드한 다음에 실행파일만 실행시켜 주면 바로 설치로 들어갑니다. 

필요한 Components를 선택하여 설치합니다. 

Component에 따라 설치할 파일들의 용량이 달라질 수 있어요. 

모두 설치하게 되면 10G 넘게 되더라구요. 

이제 Qt Creator가 설치되었습니다. 

Finish를 눌러 실행이 잘 되는지 볼 수 있습니다. 

실행되면 아래와 같이 보여집니다. 

다음엔 프로젝트를 생성해 간단한 hello world를 찍는 프로그램을 만들어 보겠습니다.