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

이 튜토리얼에서는 Qt Extension for VS Code를 사용하여 애플리케이션을 만드는 방법을 설명합니다. Qt Widgets 애플리케이션을 만드는 방법을 설명합니다. 프로젝트 마법사를 사용하여 프로젝트를 생성하고, Qt Widgets Designer 을 활용해 위젯 기반 UI를 디자인하게 됩니다.

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

시작하기 전에

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

• VS Code용 Qt 확장 프로그램 설치
• Qt 설치 등록

Qt Widgets 애플리케이션 프로젝트 생성

Qt 애플리케이션을 개발하려면 코드가 포함된 프로젝트 폴더와 프로젝트 빌드 방법을 설명하는 프로젝트 구성 파일(CMakeLists.txt)이 필요합니다.

AddressBook 프로젝트에는 두 개의 클래스가 있으며, 각 클래스에는 헤더, 소스 및 UI 폼이 포함되어 있습니다:

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

Visual Studio Code에서 Qt Widgets 애플리케이션 프로젝트를 생성하려면:

1. Welcome 로 이동한 후, ‘ New project ’를 선택합니다.
2. Project 에서 다음을 선택합니다. Qt Widgets application를 선택합니다.

   

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

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

다음으로, 애플리케이션의 메인 뷰를 생성합니다.

메인 뷰 디자인하기

Qt Widgets Designer 를 사용하여 레이아웃에 몇 가지 위젯이 배치된 애플리케이션의 메인 뷰를 디자인합니다.

Qt Widgets Designer 사용에 대한 자세한 내용은 Qt Widgets Designer 매뉴얼을 참조하십시오.

위젯 추가

UI에 위젯을 추가하고 해당 속성을 설정하려면:

1. VS Code의 Explorer 에서 ‘ addressbook.ui ’를 선택한 다음, Open this file with Qt Widgets Designer 를 선택하여 Qt Widgets Designer 에서 엽니다.

   

2. Qt Widgets Designer 의 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 Designer 에서 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 Designer 에서 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 Designer 의 신호 및 슬롯 편집 모드로 들어갑니다.

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

메인 뷰에서 대화 상자 열기

사용자가 메인 뷰에서 ‘ Add ’를 선택했을 때 대화 상자를 호출하려면, AddressBook 클래스에 슬롯을 추가하고 이 슬롯에서 AddDialog 를 호출해야 합니다.

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

슬롯을 구현하려면 VS Code에서 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 을 모두 편집해야 합니다.

addressbook.cpp 파일에 adddialog.h 를 포함시킵니다:

#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();
    }
}

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