튜토리얼: Qt Quick 애플리케이션
Edit 모드에서 Qt Quick 애플리케이션을 만드는 방법.
이 자습서에서는 기본 개념을 설명합니다. Qt Quick. 선택할 수 있는 UI에 대한 자세한 내용은 사용자 인터페이스를 참조하세요.
이 튜토리얼에서는 최소 Qt 버전으로 Qt 6을 사용하고 빌드 시스템으로 CMake를 사용할 때 상태 및 전환을 구현하기 위해 Qt Creator 을 사용하는 방법을 설명합니다.
편집 모드를 사용하여 세 개의 직사각형을 선택하면 Qt 로고가 그 사이를 이동하는 애플리케이션을 만들 것입니다.
더 많은 예제는 Qt Quick 예제 및 자습서를 참조하십시오.
시각적 편집기를 사용하여 Qt Design Studio 에서 Qt Quick 애플리케이션을 개발할 수 있습니다. 자세한 내용은 Qt Design Studio 문서를 참조하세요.
프로젝트 만들기
- File > New Project > Application (Qt) > Qt Quick Application.
- Choose 을 선택하여 Project Location 대화 상자를 엽니다.
- Name 에 애플리케이션의 이름을 입력합니다. 프로젝트 이름을 지정할 때는 나중에 쉽게 이름을 바꿀 수 없다는 점에 유의하세요.
- Create in 에 프로젝트 파일의 경로를 입력합니다. 나중에 문제 없이 프로젝트 폴더를 이동할 수 있습니다.
- Next 을 선택하여 Define Project Details 대화 상자를 엽니다.
- Next 을 선택하여 Kit Selection 대화 상자를 엽니다.
- 애플리케이션을 빌드할 플랫폼에 대해 Qt 6.5 이상 키트를 선택합니다. 모바일 기기용 애플리케이션을 빌드하려면 Android 및 iOS용 키트도 선택합니다.
- Next 을 선택하여 Project Management 대화 상자를 엽니다.
- 프로젝트 설정을 검토하고 Finish (또는 macOS의 경우 Done )를 선택하여 프로젝트를 만듭니다.
Qt Creator 컴포넌트 파일( Main.qml)을 생성하고 Edit 모드에서 엽니다.
애플리케이션 배포
애플리케이션의 메인 뷰에는 뷰의 왼쪽 상단 모서리에 있는 직사각형 안에 Qt 로고와 두 개의 빈 직사각형이 표시됩니다.
애플리케이션을 실행할 때 이미지가 표시되도록 하려면 마법사가 생성한 CMakeLists.txt 파일의 RESOURCES 섹션에서 이미지를 리소스로 지정해야 합니다:
qt_add_qml_module(apptransitions
URI transitions
VERSION 1.0
QML_FILES Main.qml Page.qml
RESOURCES qt-logo.png
)사용자 지정 QML 유형 만들기
Window QML 유형을 사용하려면 하위 컴포넌트에 상태를 추가해야 하므로 마법사를 사용하여 Main.qml 에서 참조하는 Page라는 사용자 지정 QML 유형을 만듭니다.
사용자 지정 QML 유형을 만들려면 다음과 같이 하세요:
- File > New File 으로 이동합니다.
- Qt > QML File (Qt Quick 2).
- Choose 을 선택하여 Location 대화 상자를 엽니다.
- File name 에 사용자 지정 QML 유형의 이름을 입력합니다: Page를 입력합니다.
- Next 을 선택하여 Project Management 대화 상자를 엽니다.
- Finish 을 선택하여
Page.qml을 생성합니다.
Qt Creator Edit 모드에서 Page.qml 을 엽니다. Item 유형의 루트 항목이 있습니다. Rectangle 유형으로 바꿉니다. 유형에 ID 페이지를 부여하고 모든 면에서 상위 항목에 고정하고 색상을 흰색으로 설정합니다:
import QtQuick Rectangle { id: page anchors.fill: parent color: "#ffffff"
QML 유형 이름을 입력하기 시작하면 Qt Creator 에서 코드를 완성하는 데 사용할 수 있는 유형과 속성을 제안합니다.
유형 이름 옆에 있는 전구 아이콘 
을 선택하면 색상, 투명도 및 그라데이션과 같은 사각형 속성을 지정하는 데 사용할 수 있는 도구 모음이 열립니다.
다음으로 qt-logo.png 을 소스로 사용하여 이미지 유형을 추가합니다. 다른 이미지나 컴포넌트를 사용할 수도 있습니다. 이미지를 직사각형의 왼쪽 상단 모서리에 배치합니다:
Image { id: icon x: 20 y: 20 source: "qt-logo.png" }
이미지용 도구 모음을 사용하여 소스 파일 및 채우기 모드와 같은 이미지 속성을 지정합니다.
이제 이미지가 이동할 직사각형을 만듭니다. 사각형의 크기는 이미지 크기와 일치해야 하며 이미지가 보이도록 투명해야 합니다. 직사각형이 보이도록 테두리 색상을 밝은 회색으로 설정합니다:
Rectangle { id: topLeftRect width: 55 height: 41 color: "#00ffffff" border.color: "#808080"
직사각형을 부모에 고정하여 왼쪽 상단과 왼쪽 하단 모서리와 오른쪽 가장자리의 수직 중앙에 배치합니다. 다음 코드 스니펫은 직사각형을 부모의 왼쪽 상단 모서리에 고정합니다:
anchors.left: parent.left anchors.top: parent.top anchors.leftMargin: 20 anchors.topMargin: 20
MouseArea 유형을 추가하여 사용자가 직사각형을 클릭할 수 있도록 합니다:
MouseArea { id: mouseArea anchors.fill: parent
코드를 확인하려면 Page.qml 예제 파일과 비교하세요.
그런 다음 상태를 추가하고 마우스 클릭을 상태 변경에 연결하여 사용자가 사각형을 클릭하면 이미지가 사각형 사이를 이동하도록 합니다.
마우스 클릭을 상태 변경에 연결
사용자가 사각형을 선택할 때 이미지가 사각형 사이를 이동하도록 하려면 페이지 구성 요소에 상태를 추가하고 아이콘의 x 및 y 속성 값을 오른쪽 가운데 및 왼쪽 위 사각형의 값과 일치하도록 변경합니다. 다양한 크기의 화면에서 뷰의 크기를 조정할 때 이미지가 사각형 내에 유지되도록 하려면 아이콘의 x 및 y 속성 값을 사각형의 값에 바인딩합니다:
...
states: [
State {
name: "State1"
},
State {
name: "State2"
PropertyChanges {
target: icon
x: middleRightRect.x
y: middleRightRect.y
}
},
State {
name: "State3"
PropertyChanges {
target: icon
x: bottomLeftRect.x
y: bottomLeftRect.y
}
}
]그런 다음 마우스 영역의 onClicked 신호를 상태 변경에 연결합니다:
Connections { target: mouseArea function onClicked() { page.state = "State1" }
Qt 6로 개발하기 때문에 연결은 함수로 지정해야 합니다.
메인 보기에 페이지 추가하기
편집을 위해 Main.qml 을 열고 페이지 사용자 지정 컴포넌트의 인스턴스를 추가합니다:
import QtQuick Window { width: 640 height: 480 visible: true title: qsTr("Transitions") Page { id: page anchors.fill: parent } }
Ctrl+R을 선택하여 애플리케이션을 실행한 다음 사각형을 선택하여 Qt 로고를 한 사각형에서 다른 사각형으로 이동합니다.
애니메이션 전환하기
이미지에 애니메이션을 적용하려면 전환을 만듭니다. 예를 들어, 이미지가 가운데 오른쪽 직사각형으로 이동하면 이미지가 다시 튀어나오고 아래쪽 왼쪽 직사각형으로 완화됩니다.
각 상태에서 다른 두 상태로 전환하기 위한 전환을 지정합니다:
transitions: [ Transition { id: toState1 ParallelAnimation { SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "y" duration: 200 } } SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "x" duration: 200 } } } to: "State1" from: "State2,State3" },
State2로의 전환에 대한 완화 커브 유형을 선형에서 Easing.OutBounce 로 변경하여 바운스 효과를 만듭니다:
Transition { id: toState2 ParallelAnimation { SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "y" easing.type: Easing.OutBounce duration: 1006 } } SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "x" easing.type: Easing.OutBounce duration: 1006 } } } to: "State2" from: "State1,State3" },
참고: 애니메이션 도구 모음을 사용하여 완화 곡선 유형과 애니메이션 지속 시간을 지정합니다.
그런 다음 State2로의 전환에 대한 완화 커브 유형을 선형에서 Easing.InOutQuad 로 변경하여 완화 효과를 만듭니다:
Transition { id: toState3 ParallelAnimation { SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "y" easing.type: Easing.InOutQuad duration: 2000 } } SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "x" easing.type: Easing.InOutQuad duration: 2000 } } } to: "State3" from: "State1,State2" } ] }
Ctrl+R을 선택하여 애플리케이션을 실행한 다음 사각형을 선택하여 애니메이션 전환을 확인합니다.
파일:
이미지:
Copyright © The Qt Company Ltd. and other contributors. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
