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

이 튜토리얼에서는 Qt Creator 를 사용하여 작은 Qt 애플리케이션인 ‘Text Finder’를 만드는 방법을 설명합니다. 이는 Qt UI Tools 에 있는 Text Finder 예제의 단순화된 버전입니다. Qt Widgets Designer 를 사용하여 Qt Widgets로 애플리케이션 사용자 인터페이스를 구성하고, 코드 편집기를 사용하여 C++로 애플리케이션 로직을 작성하게 됩니다.

Text Finder 프로젝트 만들기

1. File > New Project > Application (Qt) > Qt Widgets Application로 이동합니다.

   

2. Choose 을 선택하여 Project Location 대화 상자를 엽니다.

   

3. ' Name'에서 'TextFinder'를 입력합니다.
4. Create in 에서 프로젝트 파일의 경로를 입력합니다. 예를 들어, C:\Qt\examples 입니다.
5. Next (Windows 및 Linux) 또는 Continue (macOS)를 선택하여 ‘ Define Build System ’ 대화 상자를 엽니다.

   

6. Build system 에서 프로젝트 빌드에 사용할 빌드 시스템으로 CMake를 선택합니다.
7. Next 또는 Continue 를 선택하여 Class Information 대화 상자를 엽니다.

   

8. Class name 에서 클래스 이름으로 TextFinder를 입력합니다.
9. ' Base class'에서 QWidget 을 기본 클래스 유형으로 선택합니다.

   참고: ‘ Header file’ , ‘ Source file ’ 및 ‘ Form file ’는 클래스 이름에 맞춰 자동으로 업데이트됩니다.

10. Next 또는 Continue 을 선택하여 Translation File 대화 상자를 엽니다.

    

11. ‘ Language ’에서 애플리케이션을 번역할 언어를 선택할 수 있습니다. 이렇게 하면 애플리케이션에 대한 현지화 지원이 설정됩니다. 나중에 프로젝트 파일을 편집하여 다른 언어를 추가할 수 있습니다.
12. Next 또는 Continue 를 선택하여 ‘ Kit Selection ’ 대화 상자를 엽니다.

    

13. 프로젝트에 사용할 빌드 및 실행 키트를 선택합니다.
14. ' Next ' 또는 ' Continue '를 선택하여 ' Project Management ' 대화 상자를 엽니다.

    

15. 프로젝트 설정을 검토한 후, Windows 및 Linux에서는 ' Finish '를, macOS에서는 ' Done '를 선택하여 프로젝트를 생성합니다.

이제 TextFinder 프로젝트에는 다음 파일들이 포함되어 있습니다:

• main.cpp
• textfinder.h
• textfinder.cpp
• textfinder.ui
• CMakeLists.txt

.h 및 .cpp 파일에는 필요한 기본 코드가 포함되어 있습니다.

빌드 시스템으로 CMake를 선택한 경우, Qt Creator 가 CMakeLists.txt 프로젝트 파일을 자동으로 생성했습니다.

누락된 부분을 채워 넣으세요

먼저 사용자 인터페이스를 설계한 다음, 누락된 코드를 채워 넣으세요. 마지막으로 검색 기능을 추가하세요.

사용자 인터페이스 설계

1. Edit 모드에서 ‘ Projects ’ 뷰에 있는 textfinder.ui 파일을 더블 클릭하여 통합된 Qt Widgets Designer 를 실행합니다.
2. 다음 위젯들을 양식으로 드래그합니다:
   • Label (QLabel)
   • Line Edit (QLineEdit)
   • Push Button (QPushButton)

   

   참고: 위젯을 쉽게찾으려면 Widget Box 상단의 검색 상자를 사용하세요. 예를 들어, ' Label ' 위젯을 찾으려면 'label'이라는 단어를 입력하기 시작하세요.

   

3. Label 위젯을 두 번 클릭하고 ‘Keyword’라는 텍스트를 입력합니다.
4. Push Button 위젯을 두 번 클릭하고 ‘Find’라는 텍스트를 입력합니다.
5. ' Property Editor ' 보기에서 ' objectName '을 'findButton'으로 변경합니다.

   

6. Ctrl+A (또는 Cmd+A) 를 눌러 위젯을 모두 선택한 다음, ‘ Lay out Horizontally ’을 선택하거나(Linux 또는 Windows에서는 Ctrl+H, macOS에서는 Ctrl+Shift+H를 누름) 가로 레이아웃(QHBoxLayout)을 적용합니다.

   

7. Text Edit 위젯(QTextEdit)을 양식으로 드래그합니다.
8. 화면 영역을 선택한 다음, ‘ Lay out Vertically ’을 선택하거나(또는 Ctrl+L을 누름) 수직 레이아웃을 적용합니다(QVBoxLayout).

   

   가로 및 세로 레이아웃을 적용하면 애플리케이션 UI가 다양한 화면 크기에 맞게 조정됩니다.

9. 사용자가 ‘ Find ’ 버튼을 선택했을 때 find 함수를 호출하려면 Qt 신호 및 슬롯 메커니즘을 사용합니다. 신호는 특정 이벤트가 발생할 때 발송되며, 슬롯은 특정 신호에 반응하여 호출되는 함수입니다. Qt Widgets에는 Qt Widgets Designer 에서 직접 사용할 수 있는 미리 정의된 신호와 슬롯이 있습니다. find 함수에 대한 슬롯을 추가하려면:
   • ' Find ' 버튼을 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 엽니다.
   • Go to Slot > clicked() 을 선택한 다음, OK 을 선택합니다.

     이렇게 하면 헤더 파일 ` textfinder.h `에 비공개 슬롯 ` on_findButton_clicked()`이 추가되고, 소스 파일 ` textfinder.cpp`에 비공개 함수 ` TextFinder::on_findButton_clicked()`이 추가됩니다.

10. Ctrl+S (또는 Cmd+S)를 눌러 변경 사항을 저장하십시오.

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

헤더 파일 완성하기

textfinder.h 파일에는 이미 필요한 #include 문, 생성자, 소멸자 및 Ui 객체가 포함되어 있습니다. QTextEdit 에서 입력 텍스트 파일의 내용을 읽고 표시하기 위해 비공개 함수인 loadTextFile() 를 추가해야 합니다.

1. Edit 모드의 Projects 뷰에서 textfinder.h 파일을 더블 클릭하여 편집 모드로 엽니다.
2. private 섹션의 Ui::TextFinder 포인터 뒤에 비공개 함수를 추가합니다:

   private slots:
       void on_findButton_clicked();
   
   private:
       Ui::TextFinder *ui;
       void loadTextFile();

소스 파일 완성

헤더 파일 작성이 완료되었으므로, 이제 소스 파일인 textfinder.cpp 로 넘어갑니다.

1. Edit 모드의 Projects 보기에서 textfinder.cpp 파일을 두 번 클릭하여 편집 모드로 엽니다.
2. QFile 를 사용하여 텍스트 파일을 불러오고, QTextStream 로 내용을 읽은 다음, QTextEdit::setPlainText()를 통해 textEdit 에 표시하는 코드를 추가하세요:

   void TextFinder::loadTextFile()
   {
       QFile inputFile(":/input.txt");
       inputFile.open(QIODevice::ReadOnly);
   
       QTextStream in(&inputFile);
       QString line = in.readAll();
       inputFile.close();
   
       ui->textEdit->setPlainText(line);
       QTextCursor cursor = ui->textEdit->textCursor();
       cursor.movePosition(QTextCursor::Start, QTextCursor::MoveAnchor, 1);
   }

3. QFile 와 QTextStream 를 사용하려면 textfinder.cpp 파일에 다음 #include 문을 추가하십시오:

   #include "./ui_textfinder.h"
   #include <QFile>
   #include <QTextStream>

4. on_findButton_clicked() 슬롯의 경우, 검색 문자열을 추출하는 코드를 추가하고 QTextEdit::find() 함수를 사용하여 텍스트 파일 내에서 해당 검색 문자열을 찾도록 하세요:

   void TextFinder::on_findButton_clicked()
   {
       QString searchString = ui->lineEdit->text();
       ui->textEdit->find(searchString, QTextDocument::FindWholeWords);
   }

5. 생성자(constructor)에 loadTextFile() 를 호출하는 한 줄을 추가하십시오:

   TextFinder::TextFinder(QWidget *parent)
       : QWidget(parent)
       , ui(new Ui::TextFinder)
   {
       ui->setupUi(this);
       loadTextFile();
   }

다음 코드 줄은 uic가 생성한 ui_textfinder.h 파일에서 on_findButton_clicked() 슬롯을 자동으로 호출합니다:

QMetaObject::connectSlotsByName(TextFinder);

리소스 파일 생성

입력 텍스트 파일을 포함할 리소스 파일(.qrc)이 필요합니다. 입력 파일은 텍스트 단락이 포함된 임의의 .txt 파일이면 됩니다. input.txt 이라는 텍스트 파일을 생성하여 textfinder 폴더에 저장하십시오.

리소스 파일을 추가하려면:

1. File > New File > Qt > Qt Resource File > Choose 로 이동합니다.

   

   ' Choose the Location ' 대화 상자가 열립니다.

   

2. Name 에서 textfinder를 입력합니다.
3. Path 에서 프로젝트 경로를 입력하고, Next 또는 Continue 를 선택합니다.

   Project Management 대화 상자가 열립니다.

   

4. Add to project 에서 TextFinder를 선택한 다음, Finish 또는 Done 를 선택하여 코드 편집기에서 파일을 엽니다.
5. Add Prefix 를 선택합니다.
6. Prefix 에서 기본 접두사를 슬래시(/)로 바꾸십시오.
7. Add Files 를 선택하여 input.txt 를 찾아 추가합니다.

   

프로젝트 파일에 리소스 추가

애플리케이션을 실행할 때 텍스트 파일이 표시되려면, 마법사가 생성한 ` CMakeLists.txt ` 파일에서 리소스 파일을 소스 파일로 지정해야 합니다.

set(PROJECT_SOURCES
        main.cpp
        textfinder.cpp
        textfinder.h
        textfinder.ui
        ${TS_FILES}
        textfinder.qrc
)

애플리케이션 빌드 및 실행

이제 필요한 모든 파일이 준비되었으므로, (Run)를 선택하여 애플리케이션을 빌드하고 실행하십시오.