임베디드 관련 카테고리/Qt

Qt Creator로 버튼 클릭 예제 만들기

CBJH 2024. 10. 23.
728x90
반응형

이 예제에서는 Qt Creator버튼 클릭 시 메시지 박스를 표시하는 간단한 GUI 프로그램을 만들어 봅니다.
"Click Me" 버튼을 누르면 "Hello, World!" 메시지 박스가 두 번 표시됩니다.


1. 새로운 프로젝트 생성하기

  1. Qt Creator를 실행합니다.
  2. File > New File or Project를 클릭합니다.
  3. Application > Qt Widgets Application을 선택하고 Next를 클릭합니다.
  4. 프로젝트 이름을 입력합니다:
    예) ButtonClickExample
  5. 프로젝트 경로를 설정합니다. (원하는 위치에 프로젝트를 생성하세요.)
  6. Build System은 기본값인 qmake를 선택한 후 Next를 누릅니다.
  7. Kit 선택 화면에서 Desktop Qt 6.5.3 MinGW 64-bit를 선택하고 Next를 클릭합니다.
  8. Class Information 설정:
    • Base ClassQMainWindow로 설정합니다.
    • Next를 누르고 Finish를 클릭합니다.

2. 기본 UI 구성

  1. 화면 왼쪽 상단에 있는 Projects 패널에서 Forms 폴더를 클릭합니다.
    • 이곳에 mainwindow.ui 파일이 있습니다. 이 파일을 더블 클릭하여 엽니다.
  2. 왼쪽 도구 패널에서 Widget Box를 찾습니다.
    • Widget Box에서 Push Button을 중앙에 드래그하여 **메인 창(MainWindow)**에 추가합니다.
  3. 버튼 속성(Property Editor) 설정:
    • 버튼을 클릭하면 오른쪽에 속성(Property Editor) 패널이 표시됩니다.
    • 속성(Property Editor)에서 다음과 같이 설정합니다:
      • Object Name: pushButton1
      • Text: Click Me

  4. Ctrl + S를 눌러 변경 사항을 저장합니다.
  5. 버튼을 우클릭해서 Go to slot을 누르면 헤더와 cpp에 버튼 슬롯이 추가된다. 

3. 버튼 이벤트 연결 코드 작성

이제 버튼이 클릭되었을 때 "Hello, World!" 메시지를 표시하는 코드를 작성해보겠습니다.

 

1. mainwindow.h 파일에 슬롯(Slot) 함수를 선언합니다:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QPushButton>
#include <QMessageBox>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_pushButton1_clicked();  // 버튼 클릭 시 호출되는 함수

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

 

2. mainwindow.cpp 파일에 버튼 이벤트를 연결하는 코드를 작성합니다:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QMessageBox>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 버튼 클릭 이벤트 연결, 이 코드를 지우면 Hello, World!를 한 번만 출력한다.
    connect(ui->pushButton1, &QPushButton::clicked, this, &MainWindow::on_pushButton1_clicked);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_pushButton1_clicked()
{
    // 메시지 박스 표시
    QMessageBox::information(this, "Hello", "Hello, World!");
}
  • connect(ui->pushButton1, &QPushButton::clicked, this, &MainWindow::on_pushButton1_clicked); 코드를 지우면 Hello, World!가 한번 출력된다.

4. 코드 설명

  • connect() 함수:
    • 버튼의 clicked() 시그널을 **슬롯 함수 on_pushButton1_clicked()**와 연결합니다.
connect(ui->pushButton1, &QPushButton::clicked, this, &MainWindow::on_pushButton1_clicked);
  • QMessageBox:
    • 버튼이 클릭되면 "Hello, World!" 메시지 박스가 표시됩니다.
QMessageBox::information(this, "Hello", "Hello, World!");

5. 프로젝트 실행

  1. Ctrl + R을 눌러 프로젝트를 빌드 및 실행합니다.
  2. 프로그램이 실행되면 메인 창에 "Click Me" 버튼이 표시됩니다.
  3. "Click Me" 버튼을 클릭하면 "Hello, World!" 메시지 박스가 두 번 표시됩니다.

6. 최종 프로젝트 구조

ButtonClickExample/
├── ButtonClickExample.pro  # 프로젝트 파일
├── main.cpp                # 메인 함수
├── mainwindow.ui           # UI 파일
├── mainwindow.h            # 헤더 파일 (슬롯 함수 선언)
└── mainwindow.cpp          # 소스 파일 (슬롯 함수 구현)

7. 결론

이제 Qt Creator에서 버튼 클릭 이벤트를 처리하고 메시지 박스를 표시하는 프로그램을 완성했습니다! 🎉
초보 개발자도 쉽게 따라 할 수 있는 간단한 예제를 통해 Qt의 GUI 개발 원리를 익힐 수 있습니다.


응용 아이디어

  • 버튼을 클릭하면 텍스트를 변경하거나, 이미지를 표시해보세요.
  • 여러 개의 버튼을 추가하고 각 버튼마다 다른 메시지를 표시해보세요.

댓글