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
        y: WearableSettings.demoMode ? header.height + 3 : -height - 5
        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.qml
  • WearableStyle/Slider.qml
  • WearableStyle/Switch.qml
  • WearableStyle/UIStyle.qml

스타일은 wearable.cpp 에서 main() 에 적용됩니다:

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 파일을 기반으로 경로를 표시합니다. 현재 애플리케이션 내에서 출발지와 목적지를 지정하는 것은 불가능하지만, 기기의 기능에 따라 추가할 수 있습니다. 예를 들어 다음 방법 중 하나를 사용하여 필요한 정보를 수집할 수 있습니다:

  • 사용자로부터 입력을 수집하기 위한 추가 화면 구현
  • 블루투스 또는 WiFi 채널을 통해 다른 디바이스(스마트폰 또는 PC)와 통신합니다.
날씨

이 애플리케이션은 온도, 일출 및 일몰 시간, 기압 등과 같은 날씨 정보를 표시합니다. 이 정보는 REST API를 사용하여 https://openweathermap.org/ 에서 가져옵니다. API 응답은 애플리케이션에서 JavaScript를 사용하여 파싱되는 JSON 형식입니다. 이 애플리케이션은 특정 위치에 대한 날씨 데이터를 얻기 위해 화면을 추가하여 수정할 수도 있습니다.

세계 시계

이 애플리케이션은 여러 도시에 대한 세계 시계를 표시합니다. 현재 도시 목록은 애플리케이션에 하드 코딩되어 있지만 디바이스의 입력 기능에 따라 변경할 수 있습니다.

기타

나머지 애플리케이션은 현재 정적 데이터를 반환하지만 각 서비스에서 얻은 응답 데이터를 처리하도록 수정할 수 있습니다.

예제 실행하기

에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 예제 빌드 및 실행하기를 참조하세요.

예제 프로젝트 @ code.qt.io

© 2025 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.