[Qt] Visual Studio에서 Qt Designer Button 이벤트 연결하기

소개

Qt Creator를 사용하면 MFC보다 더 쉽고 더 예쁜 UI 작업이 가능합니다.

만약, MFC로 멋있는 Application을 만들려고 하면 작업이 끝도 없을 것입니다.

기본으로 제공되는 UI 컨트롤의 한계점이 크기 때문이죠.

그렇다고 Qt로 넘어가자니 새로운 툴을 배우기가 부담스러울 수도 있습니다.

그래서 지난 번에 Visual Studio & Qt Add-in에 대한 소개를 한 적이 있습니다.

[Qt] Visual Studio 2015에서 Qt 사용하기

이번에는 Visual Studio 2017에서 Qt Designer를 사용하여 UI 작업하는 방법을 소개하고자 합니다.

※ 예제 파일은 하단에 첨부되어 있습니다.

따라하기

Visual Studio를 실행하고 Qt GUI Application 프로젝트를 생성합니다.

Qt GUI Application 프로젝트 생성 화면

그러면 아래 그림 처럼 Qt GUI Application Wizard가 생성되는데요.

'Next'를 클릭합니다.

Qt GUI Application Wizard

다음은 Qt Module을 선택하는 화면입니다.

이번 예제에서는 버튼 컨트롤(Button control)만 사용할 것이기 때문에 따로 선택은 하지 않겠습니다.

'Next'를 클릭합니다.

Qt GUI Module 선택 화면

Base class 항목에 QMainWindow / QWidget / QDialog 세 가지가 있습니다.

Qt GUI Application Base class

각 항목의 간단한 설명은 다음과 같습니다.

QMainWindow 는 어플리케이션의 사용자 인터페이스를 만들기 위한 프레임워크를 제공합니다.

또한, QToolBars, QDockWidgets, QMenuBar 그리고 QStatusBar를 추가할 수 있습니다.

일반적인 메인 어플리케이션을 생성할 때 사용한다고 이해하시면 될 것 같습니다.

QMainWindow Layout

QWidget 은 모든 GUI 요소에 대한 기본 클래스(base class)입니다.

독립적인 윈도우(top-level widget)로 생성될 수도 있고, 대부분 하위 위젯(child widget)으로 생성하여 사용합니다.

이것은 QDialog와 같은 다른 위젯에 button을 추가하는 것과 같은 형태를 의미합니다.

즉, 아래와 같이 윈도우가 아닌 Widget은 Dialog에 붙여서 사용한다는 의미입니다.

QWidget

QDialog 는 QWidget을 기반으로 사용자 입력이 필요할 때 대화상자를 표시하기 위해 사용됩니다.

일반적으로 Modal / Modeless Dialog로 생성하는 객체입니다.

즉, 메인 어플리케이션은 QMainWindow를 사용하고, 일반적인 대화상자는 Dialog를 사용한다고 보시면 될 것 같습니다.

위와 같이 Base class를 QMainWindow로 생성하면 아래와 같은 화면이 표시됩니다.

QMainWindow으로 프로젝트 생성된 모습

파일명이 xxx.ui인 파일을 더블 클릭하면 Qt Designer가 실행됩니다.

Qt Designer가 실행된 모습

이곳에서 MFC 혹은 C#처럼 UI 배치를 적용하면 되겠습니다.

예시로 Push Button을 추가해 보겠습니다.

참고로 Qt Designer에서는 UI Control 추가 시, 컨트롤을 선택한 후 Drag & Drop으로 배치할 수 있습니다.

Push Button을 추가한 모습

Button의 변수 이름, 텍스트, 색상, 크기 등의 설정은 우측의 '속성 편집기'에서 설정이 가능합니다.

일단, 이번 예시는 Button Click 이벤트를 연동하는 것이므로 자세한 속성 편집은 넘어가기로 하겠습니다.

이제 버튼을 추가했으니 왼쪽 상단의  버튼을 클릭하여 저장하고, 다시 Visual Studio로 돌아옵니다.

Qt에서 중요한 개념중에 하나가 Signal 과 Slot 입니다.

갑자기 왜 이 얘기를 하냐면, MFC에서 버튼 클릭 이벤트를 생성하면 Message Map에 버튼 리소스와 실행될 함수가 ON_BN_CLICKED 에 등록됩니다.

BEGIN_MESSAGE_MAP(CMFCApplication1Dlg, CDialogEx)
	ON_WM_SYSCOMMAND()
	ON_WM_PAINT()
	ON_WM_QUERYDRAGICON()
	ON_BN_CLICKED(IDC_BUTTON1, &CMFCApplication1Dlg::OnBnClickedButton1) // 버튼 클릭 이벤트
END_MESSAGE_MAP()

Qt도 마찬가지 입니다.

버튼이 클릭됐다는 이벤트(Signal) 가 발생하면 연결된 함수(Slot) 가 실행이 되는 방식입니다.

얘기가 길어졌습니다. 헤더에 아래와 같이 Slot 함수를 정의합니다.

#pragma once

#include <QtWidgets/QMainWindow>
#include <QMessageBox>
#include "ui_QtGuiApplication1.h"

class QtGuiApplication1 : public QMainWindow
{
	Q_OBJECT

public:
	QtGuiApplication1(QWidget *parent = Q_NULLPTR);

private:
	Ui::QtGuiApplication1Class ui;

public slots:
	void ButtonClicked();
};

그리고 소스 파일에는 아래와 같이 connect 함수를 사용한 버튼 이벤트 연결과, 버튼 이벤트가 실행될 함수를 정의합니다.

그 외 Push Button 이벤트는 아래 링크를 참고해 주세요.

링크: https://wiki.qt.io/How_to_Use_QPushButton

#include "QtGuiApplication1.h"

QtGuiApplication1::QtGuiApplication1(QWidget *parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);

	connect(ui.pushButton, SIGNAL(clicked()), this, SLOT(ButtonClicked()));
}

void QtGuiApplication1::ButtonClicked()
{
	QMessageBox::information(this, "Title", "Hello");
}

빌드하고 실행하면 다음과 같은 결과를 얻을 수 있습니다.

Button Event 예제 실행 화면

PushButton Example.zip