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

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

텍스트 찾기 프로젝트 생성하기

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. 프로젝트 설정을 검토하고 Finish (Windows 및 Linux의 경우) 또는 Done (macOS의 경우)를 선택하여 프로젝트를 만듭니다.

이제 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 디자이너를 시작합니다.
2. 다음 위젯을 양식으로 드래그합니다:
   • Label (QLabel)
   • Line Edit (QLineEdit)
   • Push Button (QPushButton)

   

   참고: 위젯을 쉽게 찾으려면 Widget Box 상단의 검색창을 사용하세요. 예를 들어 Label 위젯을 찾으려면 레이블이라는 단어를 입력하세요.

   

3. Label 위젯을 두 번 클릭하고 키워드라는 텍스트를 입력합니다.
4. Push Button 위젯을 두 번 클릭하고 찾기 텍스트를 입력합니다.
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 버튼을 선택했을 때 찾기 기능을 호출하려면 Qt 신호 및 슬롯 메커니즘을 사용합니다. 신호는 특정 이벤트가 발생할 때 방출되며 슬롯은 특정 신호에 대한 응답으로 호출되는 함수입니다. Qt 위젯에는 Qt Widgets Designer에서 직접 사용할 수 있는 미리 정의된 신호와 슬롯이 있습니다. 찾기 함수를 위한 슬롯을 추가하려면 다음과 같이 하세요:
   • Find 버튼을 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 엽니다.
   • Go to Slot > clicked() 을 선택한 다음 OK 을 선택합니다.

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

10. Ctrl+S (또는 Cmd+S)를 선택하여 변경 사항을 저장합니다.

Qt Widgets 디자이너로 양식을 디자인하는 방법에 대한 자세한 내용은 Qt Widgets 디자이너 매뉴얼을 참조하세요.

헤더 파일 완성하기

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

1. Edit 모드의 Projects 보기에서 textfinder.h 파일을 두 번 클릭하여 편집할 수 있도록 엽니다.
2. Ui::TextFinder 포인터 뒤의 private 섹션에 비공개 함수를 추가합니다:

   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 에 다음 #includes 를 추가합니다:

   #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. 생성자에서 loadTextFile() 을 호출하는 줄을 추가합니다:

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

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

QMetaObject::connectSlotsByName(TextFinder);

리소스 파일 생성

입력 텍스트 파일을 포함할 리소스 파일(.qrc)이 필요합니다. 입력 파일은 텍스트 단락이 있는 .txt 파일이면 됩니다. input.txt 이라는 텍스트 파일을 만들어 텍스트파인더 폴더에 저장합니다.

리소스 파일을 추가하려면 다음과 같이 하세요:

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

   

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

   

2. Name 에 텍스트 파인더를 입력합니다.
3. Path 에 프로젝트 경로를 입력하고 Next 또는 Continue 를 선택합니다.

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

   

4. Add to project 에서 텍스트 파인더를 선택하고 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)를 선택하여 애플리케이션을 빌드하고 실행합니다.