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

이 자습서에서는 VS 코드용 Qt 익스텐션을 사용해 Qt Quick 애플리케이션을 만드는 방법을 설명합니다. 프로젝트 마법사를 사용하여 프로젝트를 생성하고 Qt Quick 컨트롤을 사용하여 UI를 디자인합니다. 또한 프로젝트에 QML 파일을 추가하는 방법도 배웁니다.

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

시작하기 전에

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

• VS Code용 Qt 익스텐션 설치
• Qt 설치 등록

Qt Quick 애플리케이션 프로젝트 만들기

Visual Studio Code에서 Qt Quick 프로젝트를 생성합니다:

1. Command Palette 로 이동한 다음 Qt: Create a new project or file 을 선택합니다.
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 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> 은 신호의 이름이며 첫 글자는 대문자로 표시). 시그널 핸들러에는 시그널 핸들러가 호출될 때 실행될 자바스크립트 코드가 포함되어야 합니다.

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 유형을 만들게 됩니다.

버튼 위치 지정

ColumnLayout 타입의 객체를 선언하여 Button 객체와 Repeater 타입의 인스턴스를 배치합니다:

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 같은 포지셔너 유형의 인스턴스로 묶어 리피터가 생성하는 델리게이트 항목을 시각적으로 배치합니다.

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

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

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

AddressBookItem {
    id: addressBookItem

나중에 AddressBookItem 유형을 만듭니다.

제거 버튼을 동작에 연결하기

onRemoved 신호 처리기를 사용하여 사용자가 Remove 버튼을 클릭할 때 주소록 항목을 목록에서 제거합니다.

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 로 설정하여 팝업이 모달로 표시되도록 지정합니다. 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

제거 버튼을 동작에 연결

제거 버튼의 onClicked 시그널 핸들러에 연결할 removed() 시그널을 추가합니다. 이렇게 하면 사용자가 버튼을 클릭하면 주소록 항목이 기본 창에서 제거됩니다:

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>"
}

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