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

이 튜토리얼에서는 Qt Quick. Qt Quick 모듈을 사용하면 QML로 유동적인 애니메이션 사용자 인터페이스를 구축하고 이를 백엔드 C++ 라이브러리에 연결할 수 있습니다.

Qt Quick 모듈은 QML로 사용자 인터페이스를 만드는 데 필요한 모든 기본 유형을 제공합니다. 이 모듈은 시각적 캔버스를 제공하며, 시각적 컴포넌트를 생성 및 애니메이션 처리하고, 사용자 입력을 수신하는 등의 기능을 위한 유형을 포함합니다. 사용 가능한 UI 옵션에 대한 자세한 내용은 사용자 인터페이스를 참조하십시오.

이 튜토리얼에서는 New Project 마법사가 생성하는 예제 애플리케이션에 대해 설명합니다. 이 애플리케이션은 Qt Quick, Qt Quick Controls, 그리고 Qt Quick Layouts 모듈에서 QML 타입을 가져옵니다. 또한 CMake 빌드 구성 시스템을 사용하여 애플리케이션을 빌드하고 실행하기 위한 메인 C++ 소스 파일을 생성합니다.

편집 모드를 사용하여 QML 및 C++ 코드와 프로젝트의 CMake 빌드 구성을 검토하게 됩니다. 그런 다음 Android 또는 iOS 기기에서 애플리케이션을 실행하게 됩니다.

Qt Quick 애플리케이션" src="images/qtquick-tutorial.webp" title="새 프로젝트 마법사를 사용하여 만든 Qt Quick 애플리케이션"/>

더 많은 예제는 Qt Quick 예제 및 튜토리얼을 참조하십시오.

개발 환경 설정

모바일 기기용 애플리케이션을 빌드하고 실행하려면, 해당 기기 플랫폼에 맞는 개발 환경을 설정하고 Qt Creator 와 모바일 기기 간의 연결을 구성해야 합니다.

Android 기기용 개발을 하려면 ‘Android용 개발’에 설명된 대로 Qt for Android를 설치하고 개발 환경을 설정해야 합니다.

iOS 기기용 개발을 하려면 Qt for iOS를 설치해야 합니다. 또한 Xcode를 설치하고 이를 사용하여 기기를 구성해야 합니다. 이를 위해서는 Apple 개발자 계정과 Apple에서 발급받은 iOS 개발자 프로그램 인증서가 필요합니다. 자세한 내용은 iOS용 개발을 참조하십시오.

프로젝트 생성

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

   

2. ‘ Choose ’를 선택하여 ‘ Project Location ’ 대화 상자를 엽니다.
3. ' Name'에서 애플리케이션 이름을 입력합니다. 프로젝트 이름을 지정할 때는 나중에 이름을 쉽게 변경할 수 없다는 점을 유의하십시오.
4. ' Create in'에서 프로젝트 파일의 경로를 입력합니다. 프로젝트 폴더는 나중에 문제없이 이동할 수 있습니다.
5. Next 을 선택하여 ‘ Define Project Details ’ 대화 상자를 엽니다.

   

6. Next 를 선택하여 ‘ Kit Selection ’ 대화 상자를 엽니다.
7. 애플리케이션을 빌드할 플랫폼에 해당하는 키트를 선택하십시오. 모바일 기기용 애플리케이션을 빌드하려면 Android 및 iOS용 키트도 선택하십시오.

   참고: 이 목록에는 [ Preferences ] > [ Kits]에서 지정한 키트가 표시됩니다. 자세한 내용은 ‘키트 추가’ 및 ‘키트 관리’를 참조하십시오.

8. Next 를 선택하여 Project Management 대화 상자를 엽니다.
9. 프로젝트 설정을 검토한 후, ‘ Finish ’(macOS의 경우 ‘ Done ’)를 선택하여 프로젝트를 생성합니다.

Qt Creator 컴포넌트 파일인 Main.qml 가 생성되고, 이 파일이 Edit 모드에서 열립니다.

애플리케이션 미리 보기

애플리케이션의 메인 뷰에는 배경색, 텍스트 및 버튼이 포함된 두 개의 직사각형이 표시됩니다. 버튼을 선택하면 애플리케이션이 밝은 모드와 어두운 모드 사이를 전환합니다.

• 애플리케이션을 미리 보려면 상단 도구 모음에서 를 선택하십시오.
• 데스크톱에서 애플리케이션을 실행하려면 를 선택하십시오.

QML 코드 확인

Main.qml 를 열어 생성된 QML 코드를 확인하십시오.

QML 임포트

이 파일에는 애플리케이션에서 사용되는 Qml 유형이 포함된 Qt 모듈에 대한 import 문이 있습니다:

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Basics

메인 창

이 파일에는 메인 창을 생성하는 ApplicationWindow QML 유형의 인스턴스가 포함되어 있습니다. 창 속성에서는 초기 크기와 최소 크기를 설정하고 창 제목을 지정합니다. 또한, 창이 화면에 표시되도록 설정합니다.

ApplicationWindow {
    id: window
    width: 640
    height: 480
    minimumWidth: 200
    minimumHeight: 250
    visible: true
    title: qsTr("Hello World")

    property bool lightMode: Application.styleHints.colorScheme === Qt.Light
    property color reallyDark: "#1f1f1f"
    property color dark: "#262626"
    property color reallyLight: "#e7e7e7"
    property color light: "#e0e0e0"

사용자 정의 속성을 통해 라이트 모드 및 다크 모드에서 애플리케이션의 색상을 설정합니다.

레이아웃

이 창에는 Qt Quick Layouts 모듈의 GridLayout QML 타입 인스턴스가 포함되어 있으며, 이 인스턴스는 Rectangle 타입의 인스턴스 두 개를 그리드 형태로 배치합니다. 그리드 속성에서는 열 너비와 행 및 열 간 간격을 설정하고, 그리드 크기를 창 크기에 연동합니다.

GridLayout {
    id: grid
    columns: width < 400 ? 1 : 2
    rowSpacing: 0
    columnSpacing: 0
    anchors.fill: parent

실행 중인 애플리케이션에서 열 너비가 400픽셀 미만이 되면, 사각형들은 한 열로 배치됩니다.

기본 QML 유형

Rectangle 유형의 각 인스턴스에는 유형 ID와 색상을 설정하는 속성이 있습니다. 사각형의 색상은 현재 모드에서 창 색상에 연동됩니다. Layout 속성은 사각형이 그리드 셀에 맞게 조정되도록 합니다.

Rectangle {
    id: rectangle1
    color: window.lightMode ? window.reallyLight : window.reallyDark
    Layout.fillHeight: true
    Layout.fillWidth: true

두 사각형 모두 ` ColumnLayout`를 포함하고 있으며, 이 ` `는 ` Qt Quick Controls ` 모듈의 ` Label ` 및 ` Button ` 유형 인스턴스를 배치합니다.

ColumnLayout {
    anchors.fill: parent
    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

레이아웃 속성은 열을 사각형의 상단 중앙에 정렬하고, 텍스트와 버튼의 위치를 조정하기 위해 레이아웃의 상단 및 하단 여백을 설정합니다.

속성 변경

애플리케이션을 미리 볼 때 코드에서 속성의 값을 변경하면 변경 사항을 즉시 확인할 수 있습니다.

색상, 여백 및 정렬을 변경하여 다양한 결과를 확인해 보십시오.

Qt Quick Controls

Qt Quick Controls 모듈은 Qt Quick 에서 완전한 사용자 인터페이스를 구축하기 위한 일련의 컨트롤을 제공합니다. 이 애플리케이션에는 Label 및 Button 컨트롤의 인스턴스가 포함되어 있습니다.

Label

Label 속성은 제목 텍스트와 색상, 픽셀 단위의 크기를 설정합니다. 또한 요소의 너비와 높이 내에서 레이블 텍스트를 수평 및 수직으로 중앙 정렬하고, 열 너비가 변경될 때 레이블 내의 텍스트에 맞게 글꼴 크기를 조정합니다.

Layout 속성은 레이블이 16픽셀의 여백을 두고 그리드 셀에 맞도록 조정합니다.

Label {
    id: text1
    color: window.lightMode ? window.dark : window.light
    font.pixelSize: 120
    fontSizeMode: Text.Fit
    text: qsTr("Hello World")
    Layout.fillWidth: true
    Layout.fillHeight: true
    Layout.margins: 16
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}

Button

Button text 속성은 창 모드에 따라 버튼 아이콘과 텍스트를 설정합니다.

레이아웃 속성은 버튼을 사각형의 하단 중앙에 정렬하고, 버튼을 배치하기 위한 레이아웃의 하단 여백을 설정합니다.

Button {
    id: button1
    text: window.lightMode ? qsTr("\u263D  Dark mode")
                           : qsTr("\u263C  Light mode")

        Layout.bottomMargin: 16
        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
    ...
}

Text 속성은 버튼 텍스트와 색상, 글꼴을 창 모드에 맞게 바인딩합니다.

...
contentItem: Text {
    text: button1.text
    color: window.lightMode ? window.light : window.dark
    font: button1.font
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}

background 항목은 Rectangle 유형의 인스턴스를 포함합니다. Rectangle 속성은 버튼 모서리를 둥글게 만들고, 창 모드에 따라 버튼 배경색을 설정합니다.

    ...
    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 36
        radius: 8
        color: window.lightMode ? window.dark : window.light
    }
    ...
}

스타일 변경

이 예제 애플리케이션은 Qt Quick Controls 에 'Basic' 스타일을 사용합니다. 이는 최대의 성능을 제공하는 간단하고 가벼운 범용 스타일입니다.

iOS, macOS, Android용 Material 등 대상 플랫폼에 따라 선택할 수 있는 다른 스타일도 여러 가지가 있습니다. 다양한 스타일을 시험해 보려면 ` import QtQuick.Controls`에 스타일 이름을 추가하십시오. 예: ` import QtQuick.Controls.Material`.

Qt XML 6.12부터는 QtQuick.Controls.Native 를 임포트할 수 있으며, 이 경우 대상 플랫폼의 기본 스타일이 자동으로 임포트됩니다.

사용 가능한 스타일에 대한 자세한 내용은 ‘ Qt Quick Controls 스타일 지정’을 참조하십시오.

신호 및 신호 핸들러

Button 유형의 onClicked 시그널 핸들러는 버튼 클릭에 반응합니다. 예제 애플리케이션에서 이 버튼을 선택하면 라이트 모드와 다크 모드가 전환됩니다.

            Button {
                id: button1
                text: window.lightMode ? qsTr("\u263D  Dark mode")
                                       : qsTr("\u263C  Light mode")
                Layout.bottomMargin: 16
                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom

                contentItem: Text {
                    text: button1.text
                    color: window.lightMode ? window.light : window.dark
                    font: button1.font
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                background: Rectangle {
                    implicitWidth: 120
                    implicitHeight: 36
                    radius: 8
                    color: window.lightMode ? window.dark : window.light
                }

                onClicked: window.lightMode = !window.lightMode
            }
        }
    }
}

C++ 소스 코드 확인

main.cpp 파일을 열어 생성된 C++ 코드를 확인해 보세요. 이 파일에는 애플리케이션( app)과 애플리케이션 엔진( engine)이 선언되어 있습니다. 애플리케이션을 실행하면 엔진이 메인 QML 파일을 로드합니다.

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreationFailed,
        &app,
        []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);
    engine.loadFromModule("HelloWorld", "Main");

    return QGuiApplication::exec();
}

CMake 구성 파일 확인

마법사는 애플리케이션 빌드를 위한 CMakeLists.txt 구성 파일을 생성합니다.

RESOURCES 섹션에는 애플리케이션의 소스 파일이 나열되어 있습니다. 프로젝트에 소스 파일을 추가하면 Qt Creator 가 해당 파일을 이 섹션에 자동으로 추가합니다.

자세한 내용은 ‘CMake를 사용한 빌드’를 참조하십시오.

기기에서 애플리케이션 실행

이제 애플리케이션을 기기에 배포하여 실행할 수 있습니다.

1. Android 기기에서는 USB 디버깅을, iOS 기기에서는 개발자 모드를 활성화합니다.
2. 기기를 개발용 PC에 연결합니다.
3. Projects 로 이동하여 프로젝트에 적합한 키트를 활성화하세요.
4. Preferences > Kits > Kits 로 이동한 후, Run device, Device 의 목록에서 기기를 선택합니다.
5. 기기에서 애플리케이션을 실행하려면 Ctrl+R을 누르십시오.