튜토리얼: Qt Quick 및 Qt for Python

이 튜토리얼에서는 VS Code용 Qt Extension을 사용하여 Qt Quick 응용 프로그램을 만드는 방법을 설명합니다 Qt for Python. 프로젝트 마법사를 사용하여 프로젝트를 생성하고, Qt Quick 컨트롤을 사용하여 UI를 디자인하게 됩니다.

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

Qt for Python 애플리케이션 제작에 대한 더 많은 예제는 Qt for Python: 튜토리얼을 참조하십시오.

시작하기 전에

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

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

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

Visual Studio Code에서 Python 코드로 Qt Quick 애플리케이션을 생성하려면:

1. Welcome 로 이동한 다음, ‘ New project ’를 선택합니다.
2. Project 에서 다음을 선택합니다. Qt Quick application (Qt for Python)를 선택합니다.

   Qt Quick Python 애플리케이션}" src="images/vscodeext-create-new-project-quick-python.webp" title="{‘새 항목’ 보기에 표시된 Qt Quick Python 애플리케이션}"/>

3. Name 에서 프로젝트 이름을 입력합니다.
4. Create in 에서 프로젝트 파일의 경로를 입력합니다.
5. Open in new window 를 선택하여 프로젝트 파일을 생성하고 새 VS Code 창에서 엽니다.

이제 ` Qt for Python ` 코드가 포함된 간단한 작동하는 ` Qt Quick ` 애플리케이션이 생성되었습니다. 편집기 도구 모음에서 ` `를 선택하여 미리 보십시오. 현재로서는 빈 창이 표시됩니다.

마법사는 다음과 같은 파일을 생성합니다:

• pyproject.toml, 여기에는 Python 프로젝트의 파일 목록과 기타 구성 정보가 나열되어 있습니다.
• main.py, 일부 기본 코드가 포함된 파일입니다.
• Main.qml, Qt Quick 컨트롤을 임포트합니다.
• qmldir, QML 모듈을 선언합니다.
• requirements.txt, 생성된 코드의 PySide 버전을 저장하는 파일입니다. 이 파일을 사용하여 pip를 통해 필요한 PySide 버전을 설치할 수 있습니다.

프로젝트용 PySide6 설치

VS Code에서 PySide6 프로젝트를 실행하는 권장 방법은 각 프로젝트에 PySide6을 설치하는 것입니다. VS Code용 Qt 확장 프로그램은 main.py 파일을 처음 열 때 이를 안내합니다.

Qt Quick 에 임포트 추가

마법사는 QGuiApplication 및 QQmlApplicationEngine 에 접근할 수 있도록 main.py 소스 파일에 다음 임포트를 추가합니다:

import sys
from pathlib import Path

from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine

main 함수 추가

또한 마법사는 main 함수를 추가하며, 이 함수 내에서 QGuiApplication 인스턴스를 생성하고 시스템 인수를 QGuiApplication 객체에 전달합니다:

if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    ...

QML 파일 불러오기

main 클래스의 다음 코드 줄은 QQmlApplicationEngine 인스턴스를 생성하고 생성된 QML 모듈을 엔진 객체에 로드합니다:

...
engine = QQmlApplicationEngine()
qml_file = Path(__file__).resolve().parent / "main.qml"
engine.load(qml_file)
...

마지막으로, 마법사는 파일이 성공적으로 로드되었는지 확인하는 코드를 추가합니다. 파일 로드에 실패하면 애플리케이션은 오류 코드와 함께 종료됩니다. 로드가 성공하면, 마법사는 ` app.exec() ` 메서드를 호출하여 Qt 메인 루프로 진입하고 Qt 코드 실행을 시작합니다:

...
if not engine.rootObjects():
    sys.exit(-1)

sys.exit(app.exec())
...

UI 디자인

Edit 모드로 Main.qml 파일을 열어 Qt Quick UI를 디자인합니다.

임포트 추가

Qt Quick 컨트롤 및 레이아웃에 대한 임포트를 추가합니다:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

속성 및 함수 추가

마법사가 메인 창을 추가합니다:

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

표시되는 텍스트의 언어를 무작위로 선택하는 속성과 함수를 추가합니다:

    ...
    readonly property list<string> texts: ["Hallo Welt", "Hei maailma",
                                           "Hola Mundo", "Привет мир"]

function setText() {
    var i = Math.round(Math.random() * 3)
    text.text = texts[i]
}

Qt Quick 컨트롤 추가

UI를 디자인하기 위해 ` ColumnLayout ` 유형 내에 ` Text ` 및 ` Button ` QML 유형을 추가합니다:

    ColumnLayout {
    anchors.fill:  parent

    Text {
        id: text
        text: "Hello World"
        Layout.alignment: Qt.AlignHCenter
    }
    Button {
        text: "Click me"
        Layout.alignment: Qt.AlignHCenter
        onClicked:  setText()
    }
}

이제 애플리케이션 준비가 완료되었으므로, 미리 보기를 통해 예상대로 작동하는지 테스트할 수 있습니다.