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

이 튜토리얼에서는 Qt Extension for VS Code를 사용하여 애플리케이션을 만드는 방법을 설명합니다 Qt Quick 애플리케이션을 만드는 방법을 설명합니다. 프로젝트 마법사를 사용하여 프로젝트를 생성하고, Qt Quick 컨트롤을 활용하여 UI를 디자인하게 됩니다. 또한, 프로젝트에 QML 파일을 추가하는 방법도 배우게 됩니다.

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

시작하기 전에

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

• VS Code용 Qt Extension 설치
• Qt 설치 등록

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

Visual Studio Code에서 Qt Quick 프로젝트를 생성하려면:

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

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

3. Name 에서 QuickAddressBook 을 입력합니다.
4. Create in 에서 프로젝트 파일의 경로를 입력합니다.
5. Create 를 선택하여 프로젝트 파일을 생성합니다.
6. 프로젝트에 사용할 CMake 키트를 선택합니다.

이제 작동하는 작은 Qt Quick 애플리케이션이 완성되었습니다. ‘ ’를 선택하여 빌드하고 실행하십시오. 현재로서는 빈 창이 표시됩니다.

메인 창 디자인하기

마법사가 ApplicationWindow 유형의 루트 객체를 선언하는 메인 QML 파일을 생성해 주었습니다. 이 파일을 수정하여 애플리케이션의 메인 창을 디자인하십시오.

컴포넌트를 해당 컨텍스트에 바인딩하려면 Bound 인수를 지정하십시오:

pragma ComponentBehavior: Bound

루트 타입에서 사용할 모듈에 대한 import 문을 추가하십시오:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

title 속성의 값을 애플리케이션 메인 창의 제목으로 설정하세요:

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 480
    height: 640
    title: qsTr("Address Book")

버튼 추가

Add 버튼을 만들려면, Qt Quick Controls 모듈에 있는 Button 타입의 객체를 선언하십시오. 버튼의 text 속성 값을 Add... 로, font.pointSize 속성 값을 24 로 설정하십시오:

Button {
    id: addButton
    text: "Add..."
    font.pointSize: 24

애플리케이션을 실행하면 다음과 같은 화면이 표시됩니다:

버튼을 액션에 연결하기

QML에는 신호와 핸들러 메커니즘이 있습니다. 여기서 신호는 이벤트를 의미하며, 신호는 신호 핸들러를 통해 반응합니다. 신호가 발산되면 해당 신호 핸들러가 호출됩니다. 핸들러에 스크립트나 기타 작업과 같은 로직을 배치하면 컴포넌트가 이벤트에 반응할 수 있습니다.

특정 객체에 대해 특정 신호가 발신될 때 알림을 수신하려면, 객체 정의에서 on<Signal> 라는 이름의 신호 핸들러를 선언해야 합니다. 여기서 <Signal> 는 신호의 이름이며, 첫 글자는 대문자로 표기해야 합니다. 신호 핸들러에는 핸들러가 호출될 때 실행될 JavaScript 코드가 포함되어야 합니다.

Button 유형에는 clicked 신호가 있으며, 이는 사용자가 버튼을 클릭할 때 발생합니다. 사용자가 메인 창에서 Add 버튼을 선택했을 때 주소록 항목을 추가하는 팝업을 호출하려면, 버튼의 onClicked 신호 핸들러를 팝업의 open() 메서드에 연결해야 합니다:

onClicked: newAddressPopup.open()

나중에 이 팝업을 별도의 QML 유형으로 추가하게 될 것입니다.

리스트 모델 추가

ApplicationWindow 내에서 연락처 데이터를 저장하기 위해 id 속성을 가진 addressList 을 가진 ListModel 유형의 객체를 선언합니다. 리스트 모델은 자유 형식의 리스트 데이터 소스를 정의합니다:

ListModel {
    id: addressList
}

팝업 선언

사용자가 주소록 항목을 추가할 팝업을 정의하는 사용자 정의 NewAddressPopup 타입의 객체를 선언합니다. onAddressAdded 신호 핸들러를 사용하여 주소록 항목을 addressList 모델에 추가합니다:

NewAddressPopup {
    id: newAddressPopup
    onAddressAdded: function(newName, newAddr) {
        addressList.append({name: newName, addr: newAddr})
}

NewAddressPopup 유형은 나중에 생성하게 됩니다.

버튼 배치

` Button ` 객체와 ` Repeater ` 유형의 인스턴스를 배치하기 위해 ` ColumnLayout ` 유형의 객체를 선언합니다:

ColumnLayout {
    id: mainWindowLayout
    Layout.fillWidth: true
    spacing: 0
    Button {
        id: addButton
        Layout.preferredWidth: mainWindow.width
        Layout.fillWidth: true
        text: "Add..."
        font.pointSize: 24
        onClicked: newAddressPopup.open()
    }

Layout.fillWidth 을 true 으로 설정하여 애플리케이션이 다양한 화면 크기에 맞춰 확장될 수 있도록 합니다. 열 내 행들 사이의 spacing 을 0 로 설정합니다. 버튼의 기본 너비를 메인 창의 너비에 바인딩합니다.

리피터 추가

Repeater 유형은 여러 개의 유사한 항목을 생성합니다. 이 유형에는 모델과 델리게이트가 있습니다. 모델의 각 항목에 대해, 델리게이트는 모델의 데이터로 초기화된 컨텍스트 내에서 인스턴스화됩니다. 리피터가 생성하는 델리게이트 항목의 위치를 시각적으로 조정하려면, 리피터를 ColumnLayout 와 같은 포지셔너 유형의 인스턴스로 감싸십시오.

리피터에 사용할 model 로 addressList 를 지정합니다:

Repeater {
    id: addressListViewer
    model: addressList
    Layout.preferredWidth: mainWindow.width
    Layout.fillWidth: true
}

리피터가 주소록 항목을 인스턴스화하는 데 사용할 사용자 정의 AddressBookItem 유형의 객체를 선언합니다:

AddressBookItem {
    id: addressBookItem

AddressBookItem 타입은 나중에 생성하게 됩니다.

'Remove' 버튼을 액션에 연결합니다.

사용자가 ‘ Remove ’ 버튼을 클릭하면 onRemoved 시그널 핸들러를 사용하여 주소록 항목을 목록에서 제거합니다.

onRemoved: addressList.remove(index)

팝업 추가

메인 창 준비가 완료되었으므로, 이제 사용자가 주소록 항목을 추가할 수 있는 팝업을 생성해 보겠습니다. ` AddressBookItem ` 유형은 리피터가 메인 창에서 사용자가 입력한 데이터를 인스턴스화하도록 지정합니다.

Visual Studio Code의 Qt 파일 마법사를 사용하여 팝업을 정의하는 사용자 정의 타입을 생성합니다.

팝업 생성

프로젝트에 사용자 정의 QML 타입을 추가하려면:

1. ' Command Palette'로 이동한 다음, ' Qt: Create a new project or file'를 선택합니다.
2. File 에서 ‘ QML file ’을 선택합니다.
3. Name 에서 ‘ NewAddressPopup ’를 입력합니다.
4. Create in 에서 프로젝트 폴더 경로 뒤에 QuickAddressBookTypes 을 입력하여 해당 하위 폴더에 새 파일을 생성합니다.
5. Create 를 선택하여 사용자 정의 QML 유형을 생성합니다.

CMakeLists.txt 파일의 QML_FILES 섹션에 NewAddressPopup.qml 를 추가합니다:

qt_add_qml_module(appQuickAddressBook
    URI QuickAddressBook
    VERSION 1.0
    QML_FILES
        Main.qml
        QuickAddressBookTypes/AddressBookItem.qml
        QuickAddressBookTypes/NewAddressPopup.qml
)

팝업 디자인하기

NewAddressPopup.qml 에서 Popup 유형의 루트 객체를 선언하여 ApplicationWindow 에서 열리는 팝업을 생성합니다. 팝업은 자체 레이아웃을 제공하지 않으므로, ColumnLayout 및 RowLayout 를 사용하여 Name 및 E-Mail Address 필드의 위치를 지정해야 합니다.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Popup {
    id: newAddressPopup

modal 속성을 true 로 설정하여 팝업이 모달(modal)임을 지정합니다. focus 속성을 true 로 설정하여 팝업이 포커스를 요청하도록 지정합니다:

modal: true
focus: true

width, x 및 y 속성의 값을 지정하여 메인 창 위에 표시될 팝업의 위치와 크기를 설정합니다:

width: parent.width * 0.9
x: (parent.width - width) / 2
y: 35

팝업 컨트롤 재설정

팝업이 열리면, ` Name ` 및 ` E-Mail Address ` 필드에는 자리 표시자 텍스트가 표시되어야 하며, 이전에 입력된 값은 모두 지워져야 합니다. ` onOpened ` 신호 핸들러를 사용하여 필드의 값을 초기화하고 ` Name ` 필드에 포커스를 부여합니다:

onOpened: {
    nameField.text = "";
    addrField.text = "";
    nameField.focus = true;
}

위치 필드

ColumnLayout 유형의 인스턴스를 사용하여 팝업의 Name 및 E-Mail Address 필드를 지정하는 TextField 객체의 위치를 설정합니다:

ColumnLayout {
    anchors.fill: parent
    TextField {
        id: nameField
        placeholderText: qsTr("Name")
        font.pointSize: 24
        Layout.preferredWidth: newAddressPopup / 2
        Layout.fillWidth: true
    }
    TextField {
        id: addrField
        placeholderText: qsTr("E-Mail Address")
        font.pointSize: 24
        Layout.preferredWidth: newAddressPopup / 2
        Layout.fillWidth: true
    }

버튼 배치

RowLayout 타입의 인스턴스를 사용하여 Add 및 Cancel 버튼을 지정하는 두 개의 Button 객체를 배치합니다:

RowLayout {
    Layout.fillWidth: true
    Button {
        text: "Add"
        enabled: nameField.length > 0 && addrField.length > 0
        font.pointSize: 24
        Layout.preferredWidth: newAddressPopup / 2
        Layout.fillWidth: true

버튼을 액션에 연결

사용자가 ‘ Add ’ 버튼을 클릭하면, ‘ Name ’ 및 ‘ E-Mail Address ’ 필드에 입력한 값이 메인 창의 주소 목록에 추가되고 팝업이 닫힙니다.

이를 활성화하려면 ‘ addressAdded(string newName, string newAddr) ’ 신호를 추가하십시오:

signal addressAdded(string newName, string newAddr)

' Add ' 버튼의 ' onClicked ' 신호 핸들러를 ' addressAdded() ' 신호와 팝업의 ' close() ' 메서드에 연결합니다:

    onClicked: {
        newAddressPopup.addressAdded(nameField.text, addrField.text)
        newAddressPopup.close()
    }
}

Cancel 버튼의 경우, onClicked 신호 핸들러를 팝업의 close() 메서드에 연결하여 데이터를 저장하지 않고 팝업을 닫도록 하십시오:

Button {
    text: "Cancel"
    font.pointSize: 24
    Layout.preferredWidth: newAddressPopup / 2
    Layout.fillWidth: true
    onClicked: newAddressPopup.close()
}

주소록 항목 정의하기

사용자 정의 AddressBookItem 유형은 메인 창에 주소록 항목을 표시하는 방법을 지정합니다.

'팝업 만들기 '의 지침에 따라 AddressBookItem.qml 이라는 새 QML 파일을 생성하고, 이를 CMakeLists.txt 파일에 추가하십시오.

항목 디자인하기

먼저, ` Rectangle` 유형의 루트 객체를 선언합니다. 이는 QML에서 애플리케이션을 만드는 데 사용할 수 있는 기본 구성 요소 중 하나입니다. 나중에 참조할 수 있도록 ` id `을 지정하십시오.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: addressBookItem

Rectangle 및 Text 유형에서 사용할 속성을 설정합니다.

required property int index
required property string name
required property string addr

행마다 번갈아 가며 색상을 적용하려면 color 속성의 값을 설정하세요:

color: (index % 2) == 0 ? "dimgray" : "lightgray"

다양한 화면 크기에서 애플리케이션의 크기를 조정할 수 있도록 사각형을 부모 요소의 좌우 가장자리에 고정합니다. 사각형의 height 속성을 포함할 텍스트 항목의 높이에 바인딩합니다:

anchors.left: parent.left
anchors.right: parent.right
height: itemText.height + 12

'제거' 버튼을 액션에 연결합니다

' removed() ' 신호를 추가하고, 이를 'Remove' 버튼의 ' onClicked ' 신호 핸들러에 연결합니다. 이렇게 하면 사용자가 버튼을 클릭할 때 메인 창에서 주소록 항목을 제거할 수 있습니다:

signal removed()

버튼과 텍스트 배치

RowLayout 유형의 인스턴스 내에서 RoundButton 및 Text 유형의 인스턴스를 사용하여 주소록 항목을 정의합니다:

RowLayout {
    spacing: 12
    Layout.fillWidth: true
    RoundButton {
        id: deleteButton
        text: "??"
        font.pointSize: 12
        palette.buttonText: "red"
        onClicked: addressBookItem.removed()
    }

텍스트 서식 지정

text 속성의 값을 설정하여 팝업의 name 및 addr 필드 값을 결합하고, 해당 값에 굵은 글씨와 기울임꼴 서식을 적용합니다:

Text {
    id: itemText
    font.pointSize: 24
    text: "<b>" + addressBookItem.name + "</b><br><i>" + addressBookItem.addr + "</i>"
}

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