튜토리얼: Qt Widgets 애플리케이션

이 자습서에서는 VS 코드용 Qt 익스텐션을 사용해 Qt Widgets 애플리케이션을 만드는 방법을 설명합니다. 프로젝트 마법사를 사용하여 프로젝트를 생성하고 Qt Widgets 디자이너를 사용하여 위젯 기반 UI를 디자인합니다.

완성된 프로젝트는 Code: 주소록에서 다운로드할 수 있습니다.

시작하기 전에

시작하기 전에 다음을 수행해야 합니다:

• VS 코드용 Qt 익스텐션 설치
• Qt 설치 등록

Qt Widgets 애플리케이션 프로젝트 만들기

Qt 애플리케이션을 개발하려면 코드가 있는 프로젝트 폴더와 프로젝트 빌드 지침이 있는 프로젝트 구성 파일(CMakeLists.txt)이 필요합니다.

AddressBook 프로젝트에는 헤더, 소스 및 UI 양식이 각각 있는 두 개의 클래스가 있습니다:

• AddressBook ( QWidget 기준)
• AddDialog ( QDialog 기준)

Visual Studio Code에서 Qt Widgets 애플리케이션 프로젝트를 만들려면 다음과 같이 하세요:

1. Command Palette 로 이동한 다음 Qt: Create a new project or file 을 선택합니다.
2. Project 에서 Qt Widgets project.

   

3. Base class 에서 QWidget 를 기본 클래스 유형으로 선택합니다.
4. UI form 을 선택하여 UI 양식을 생성합니다.
5. Name 에 AddressBook 을 입력합니다.
6. Create in 에 프로젝트 파일의 경로를 입력합니다. 예: C:\Qt\Examples.
7. Create 을 선택하여 프로젝트 파일을 생성합니다.
8. 프로젝트에 대한 CMake 키트를 선택합니다.

마법사가 지정한 경로의 AddressBook 폴더에 필요한 프로젝트 파일을 생성합니다. 파일 이름을 바꿀 수 있습니다. 이 튜토리얼에서는 addressbook.cpp, addressbook.h, addressbook.ui 이라고 합니다.

다음으로 애플리케이션의 메인 보기를 만듭니다.

메인 보기 디자인하기

Qt Widgets 디자이너를 사용하여 레이아웃에 몇 가지 위젯이 배치된 애플리케이션의 기본 보기를 디자인합니다:

Qt Widgets 디자이너 사용에 대한 자세한 내용은 Qt Widgets 디자이너 매뉴얼을 참조하세요.

위젯 추가하기

UI에 위젯을 추가하고 위젯에 대한 속성을 설정합니다:

1. VS 코드 Explorer 에서 addressbook.ui 을 선택한 다음 Open this file with Qt Widgets Designer 을 선택하여 Qt Widgets 디자이너에서 엽니다.

   

2. Qt Widgets 디자이너의 Widget Box 에서 List Widget 을 선택하고 양식으로 드래그하여 QListWidget 을 추가합니다.
3. Property Editor 에서 objectName 속성을 addressList 로 설정합니다.
4. Push Button 위젯 두 개를 양식의 오른쪽 상단 모서리로 드래그하여 Add 및 Delete 버튼에 대한 QPushButton 개체를 추가합니다.
5. 버튼의 objectName 속성을 addButton 및 deleteButton 로 설정하고 text 속성 값을 Add 및 Delete 로 설정합니다.
6. 두 개의 Label 위젯을 양식으로 드래그하여 선택한 항목을 목록에 표시하기 위한 QLabel 개체를 추가합니다.
7. 첫 번째 레이블의 이름을 nameLabel 로 바꾸고 text 속성을 <No item selected> 로 변경합니다.
8. 두 번째 레이블의 이름을 emailLabel 로 바꾸고 text 속성을 비워 둡니다.

위 스크린샷에 표시된 대로 위젯을 배치합니다. 위젯을 올바르게 배치하고 양식의 크기가 조정될 때 위젯의 크기를 자동으로 조정하려면 양식에 레이아웃을 추가해야 합니다.

레이아웃에 위젯 추가하기

버튼에 대한 세로 레이아웃과 버튼을 레이아웃의 맨 위로 밀어 넣을 스페이서가 필요합니다. 또한 버튼 레이아웃뿐만 아니라 다른 위젯의 위치를 관리하려면 두 번째 레이아웃이 필요합니다.

레이아웃에 위젯을 추가하려면 다음과 같이 하세요:

1. Vertical Spacer 항목을 양식으로 드래그하여 스페이서를 추가합니다.
2. 버튼과 스페이서를 선택한 다음 Form > Lay Out Vertically 을 선택하여 세로 레이아웃을 추가합니다(QVBoxLayout).
3. 목록 위젯, 두 개의 레이블 및 버튼 레이아웃을 선택한 다음 Form > Lay Out in a Grid 을 선택하여 그리드 레이아웃을 추가합니다(QGridLayout).

   참고: 레이블이 양식과 거의 같은 너비인지 확인하세요. 그렇지 않으면 그리드 레이아웃으로 인해 주소 목록만큼만 넓어집니다.

4. 양식을 컴파일하지 않고 미리 보려면 Form > Preview 을 선택합니다.
5. File > Save 으로 이동하여 양식을 저장합니다.

애플리케이션을 빌드하고 실행하여 기본 보기를 확인합니다.

대화 상자 추가하기

이제 기본 보기가 준비되었으므로 애플리케이션에 기능을 추가합니다. 사용자가 Add 버튼을 클릭할 때 애플리케이션에서 대화 상자를 열도록 하려면 Add Address 대화 상자를 만들고 Add 버튼에 연결한 슬롯에서 대화 상자를 호출합니다.

대화 상자를 추가하려면 다음과 같이 하세요:

1. Qt Widgets 디자이너에서 File > New 로 이동하여 Dialog without Buttons 을 선택합니다.
2. Create 을 선택하여 대화 상자를 만듭니다.
3. Property Editor 에서 ObjectName 속성을 AddDialog 로 설정합니다.
4. File > Save 으로 이동하여 파일을 adddialog.ui 으로 저장합니다.

프로젝트 소스의 CMakeLists.txt 파일에 UI 파일을 추가합니다:

set(PROJECT_SOURCES
        main.cpp
        addressbook.cpp
        addressbook.h
        addressbook.ui
        adddialog.cpp
        adddialog.h
        adddialog.ui
)

대화 상자 디자인하기

대화 상자를 디자인합니다:

1. Qt Widgets 디자이너에서 Add Address 을 windowTitle 으로 설정합니다.
2. 양식에 Label 를 추가하고 objectName 속성을 nameText 로 설정하고 text 속성을 Name: 로 설정합니다.
3. 또 다른 Label 을 추가하고 objectName 속성을 emailText 으로 설정하고 text 속성을 Email: 으로 설정합니다.
4. Line Edit (QLineEdit)를 추가하고 objectName 속성을 nameEdit 으로 설정합니다. text 속성은 비워둡니다.
5. Line Edit 을 하나 더 추가하고 objectName 속성을 emailEdit 으로 설정합니다. text 속성은 비워 둡니다.
6. 레이블 및 줄 편집을 선택한 다음 Form > Lay Out in a Grid 으로 이동하여 그리드 레이아웃을 추가합니다.
7. Push Button 를 추가하고 objectName 속성을 okButton 로 설정하고 text 속성을 OK 로 설정합니다.
8. 버튼 왼쪽에 가로 스페이서를 추가합니다.
9. 스페이서와 버튼에 가로 레이아웃을 추가합니다.
10. 레이블과 버튼 사이에 세로 스페이서를 추가합니다.
11. 레이블과 스페이서에 세로 레이아웃을 추가합니다.
12. 두 레이아웃에 그리드 레이아웃을 추가합니다.
13. Form > Preview 로 이동하여 양식을 컴파일하지 않고 미리 봅니다.
14. File > Save 으로 이동하여 양식을 저장합니다.

대화 상자의 확인 버튼에 연결

OK 버튼이 QDialog::accept() 슬롯을 호출하도록 하려면 Edit Signals/Slots 툴바 버튼을 클릭하여 Qt Widgets 디자이너의 신호 및 슬롯 편집 모드로 들어갑니다.

OK 버튼을 클릭하고 마우스 커서를 양식의 빈 영역으로 드래그한 다음 마우스 버튼을 놓습니다. Configure Connection 대화 상자에서 버튼의 QPushButton::clicked() 신호를 양식의 QDialog::accept() 슬롯에 연결합니다.

기본 보기에서 대화 상자 열기

사용자가 기본 보기에서 Add 을 선택할 때 대화 상자를 호출하려면 AddressBook 클래스에 슬롯을 추가하고 이 슬롯에서 AddDialog 을 호출해야 합니다.

Qt Widgets 디자이너를 사용하여 만든 양식은 QMetaObject::connectSlotsByName()을 호출하여 양식의 하위 위젯이 방출하는 신호와 명명 규칙 on_<sender>_<signal>() 을 따르는 슬롯 간의 연결을 설정합니다. 사용자가 Add 버튼을 클릭할 때 애플리케이션이 적절하게 반응하도록 하려면 on_addButton_clicked() 이라는 슬롯을 구현해야 합니다.

슬롯을 구현하려면 VS 코드에서 addressbook.h 파일을 열고 슬롯에 대한 선언을 추가합니다:

private slots:
    void on_addButton_clicked();

그런 다음 addressbook.cpp 을 열고 슬롯 정의를 추가합니다:

void AddressBook::on_addButton_clicked()
{
    AddDialog dialog(this);
    dialog.exec();
}

다른 신호에 연결하려면 AddressBook 클래스에 신호를 추가해야 합니다. 이를 위해서는 헤더 파일인 addressbook.h 과 구현 파일인 addressbook.cpp 을 모두 편집해야 합니다.

adddialog.h 을 addressbook.cpp 에 포함하세요:

#include "adddialog.h"

변경 사항을 테스트하려면 애플리케이션을 빌드하고 실행합니다. Add 버튼을 선택하여 Add Address 대화 상자를 연 다음 OK 을 선택하여 닫습니다.

목록 위젯에 항목 추가하기

사용자가 OK 을 선택하면 QListWidget 에 항목이 추가되어야 합니다. 이 기능을 구현하려면 on_addButton_clicked() 슬롯의 코드를 다음과 같이 변경합니다:

AddDialog dialog(this);

    if (dialog.exec()) {
        QString name = dialog.nameEdit->text();
        QString email = dialog.emailEdit->text();

        if (!name.isEmpty() && !email.isEmpty()) {
            QListWidgetItem *item = new QListWidgetItem(name, ui.addressList);
            item->setData(Qt::UserRole, email);
            ui.addressList->setCurrentItem(item);
        }
    }

대화 상자가 실행됩니다. 사용자가 OK 을 선택하여 수락하면 Name 및 Email 필드가 추출되고 지정된 정보가 있는 QListWidgetItem 이 생성됩니다.

선택한 항목 표시

사용자가 목록 위젯에서 항목을 선택할 때 양식 하단의 nameLabel 및 emailLabel 을 업데이트하려면 AddressBook 클래스에 다른 슬롯을 추가합니다.

addressbook.h 파일에서 클래스의 private slots 섹션에 다음 코드를 추가합니다:

void on_addressList_currentItemChanged();

그런 다음 addressbook.cpp 에 아래 코드 블록을 추가합니다:

void AddressBook::on_addressList_currentItemChanged()
{
    QListWidgetItem *curItem = ui.addressList->currentItem();

    if (curItem) {
        ui.nameLabel->setText("Name: " + curItem->text());
        ui.emailLabel->setText("Email: " + curItem->data(Qt::UserRole).toString());
    } else {
        ui.nameLabel->setText("<No item selected>");
        ui.emailLabel->clear();
    }
}

명명 규칙에 따라 이 슬롯은 addressList 의 QListWidget::currentItemChanged() 신호에 자동으로 연결되고 목록에서 선택한 항목이 변경될 때마다 호출됩니다.

삭제 버튼에 기능 추가하기

Delete 버튼에 대한 슬롯을 구현하려면 Visual Studio에서 addressbook.h 파일을 열고 on_deleteButton_clicked() 슬롯에 대한 선언을 추가합니다. 그런 다음 addressbook.cpp 을 열고 on_deleteButton_clicked() 에 대한 슬롯 정의를 추가합니다.

슬롯 본문에 다음 코드를 입력합니다:

void AddressBook::on_deleteButton_clicked()
{
    QListWidgetItem *curItem = ui.addressList->currentItem();

    if (curItem) {
        int row = ui.addressList->row(curItem);
        ui.addressList->takeItem(row);
        delete curItem;

        if (ui.addressList->count() > 0)
            ui.addressList->setCurrentRow(0);
        else
            on_addressList_currentItemChanged();
    }
}

이제 애플리케이션이 완성되었습니다.