Qt Quick Controls - 웨어러블 데모
웨어러블 기기를 위해 설계된 애플리케이션 런처를 시연합니다.

웨어러블 데모는 애플리케이션 런처와 웨어러블 기기를 대상으로 한 작고 간단한 예제 애플리케이션 모음으로 구성되어 있습니다.
구조
주 .qml 파일인 ` wearable.qml`은 ` ApplicationWindow`, 스택 기반 탐색 모델을 위한 ` StackView `, 그리고 상호작용형 탐색을 위한 버튼들로 구성되어 있습니다.
QQC2.ApplicationWindow {
id: window
...
QQC2.StackView {
id: stackView
...
initialItem: LauncherPage {
onLaunched: (title, page, fallback) => {
var createdPage = Qt.createComponent(page)
if (createdPage.status !== Component.Ready)
createdPage = Qt.createComponent(fallback)
stackView.push(createdPage)
header.title = title
}
}
...
}
DemoMode {
stackView: stackView
}
DemoModeIndicator {
id: demoModeIndicator
visible: WearableSettings.demoMode
y: WearableSettings.demoMode ? header.height + 3 : -height - header.height - 3
anchors.horizontalCenter: parent.horizontalCenter
z: header.z + 1
}
MouseArea {
enabled: WearableSettings.demoMode
anchors.fill: parent
onClicked: {
// Stop demo mode and return to the launcher page.
WearableSettings.demoMode = false
stackView.pop(null)
}
}
}스타일
이 데모는 데모 리소스에 내장된 사용자 정의 Qt Quick Controls 2 스타일을 사용합니다. 이 사용자 정의 스타일은 이 특정 데모에만 적용되므로, 소수의 컨트롤에 대해서만 구현되었습니다. 이 스타일은 글꼴 및 색상과 같은 다양한 스타일링 속성을 관리하기 위해 싱글톤 타입을 사용합니다.
WearableStyle/PageIndicator.qmlWearableStyle/Slider.qmlWearableStyle/Switch.qmlWearableStyle/UIStyle.qml
이 스타일은 main() 의 wearable.cpp 에서 적용됩니다:
QQuickStyle::setStyle(QStringLiteral("WearableStyle"));내장된 스타일링 시스템을 사용하는 주된 이점은 스타일 선택 과정이 애플리케이션 코드 측면에서 완전히 투명하다는 점입니다. 스타일이 적용된 컨트롤이 포함된 특정 폴더를 가져올 필요가 없습니다. 따라서 이 방식을 통해 애플리케이션은 다른 스타일로도 실행할 수 있습니다.
런처 페이지
애플리케이션 런처는 LauncherPage.qml 의 원형 PathView 을 사용하여 구현됩니다. 각 애플리케이션은 별도의 .qml 파일에 포함되어 있으며, 이 파일들은 런처 페이지의 ListModel 에 추가됩니다. 일부 애플리케이션의 경우 QtLocation과 같은 선택적 종속성을 처리하기 위한 대체 옵션이 제공됩니다.
PathView {
id: circularView
signal launched(string title, string page, string fallbackpage)
...
model: ListModel {
ListElement {
title: qsTr("Navigation")
pageIcon: "maps"
page: "NavigationPage.qml"
fallback: "NavigationFallbackPage.qml"
}
...
ListElement {
title: qsTr("Settings")
pageIcon: "settings"
page: "SettingsPage.qml"
fallback: ""
}
}
delegate: QQC2.RoundButton {
...
icon.width: 36
icon.height: 36
icon.source: UIStyle.iconPath(pageIcon)
icon.color: UIStyle.textColor
...
onClicked: {
if (PathView.isCurrentItem)
circularView.launched(title, Qt.resolvedUrl(page), Qt.resolvedUrl(fallback))
else
circularView.currentIndex = index
}
}
...
}애플리케이션
이 애플리케이션들은 웨어러블 기기에서 일반적으로 제공되는 입력 방식이나 통신 수단을 기반으로 터치 입력을 위해 설계되었습니다.
대부분의 애플리케이션에는 더미 애플리케이션 백엔드 역할을 하는 자체 JavaScript 파일이 있습니다. 이 파일들은 외부 데이터를 가져오고, 조작하거나 변환하는 방법을 보여줍니다. 예를 들어, Weather 애플리케이션은 XMLHttpRequest를 사용하여 로컬 파일에서 데이터를 읽습니다. 이 파일들은 원격 서버의 응답을 JSON 형식으로 저장하여 생성되었습니다. 이 코드는 원격 서버에서 데이터를 가져오도록 쉽게 수정할 수 있습니다.
내비게이션
이 애플리케이션은 QtLocation 모듈을 사용하여 오슬로 내의 경로를 표시합니다. QtLocation이 설치되어 있지 않은 경우, 지도 대신 정적 이미지를 표시하고 JSON 파일을 기반으로 한 경로 정보를 제공합니다. 현재는 애플리케이션 내에서 출발지와 목적지를 지정할 수 없지만, 기기의 기능에 따라 해당 기능을 추가할 수 있습니다. 예를 들어, 다음 방법 중 하나를 사용하여 필요한 정보를 수집할 수 있습니다:
- 사용자로부터 입력을 수집하기 위한 추가 화면을 구현
- 블루투스 또는 Wi-Fi 채널을 통해 다른 기기(스마트폰 또는 PC)와 통신합니다.
날씨
이 애플리케이션은 기온, 일출 및 일몰 시간, 기압 등과 같은 날씨 정보를 표시합니다. 이 정보는 https://openweathermap.org/의 REST API를 통해 가져옵니다. API 응답은 JSON 형식으로 제공되며, 애플리케이션에서 JavaScript를 사용하여 이를 파싱합니다. 또한 이 애플리케이션은 특정 지역의 날씨 데이터를 가져오는 화면을 추가하여 수정할 수도 있습니다.
세계 시계
이 애플리케이션은 여러 도시의 세계 시계를 표시합니다. 현재 도시 목록은 애플리케이션에 하드코딩되어 있지만, 기기의 입력 기능에 따라 변경할 수 있습니다.
기타
나머지 애플리케이션들은 현재 정적 데이터를 반환하지만, 각 서비스에서 얻은 응답 데이터를 처리하도록 수정할 수 있습니다.
예제 실행
다음 경로에서 예제를 실행할 수 있습니다.
- Qt Creator
Welcome 모드를 열고 Examples 에서 예제를 선택하십시오. 자세한 내용은 Qt Creator: 튜토리얼: 빌드 및 실행을 참조하십시오.
- Qt Extension for Visual Studio Code
Command Palette 에서 Qt: Open Qt examples 명령을 실행하고, 목록에서 예제를 선택하십시오. 자세한 내용은 Qt Extension for Visual Studio Code: 튜토리얼: 빌드 및 실행을 참조하십시오.
© 2026 The Qt Company Ltd. 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.