本页内容

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.qml
  • WearableStyle/Slider.qml
  • WearableStyle/Switch.qml
  • WearableStyle/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 通道与另一台设备(智能手机或电脑)通信。
天气

该应用程序显示温度、日出日落时间、气压等天气信息。这些信息通过https://openweathermap.org/的 REST API 获取。 API 响应采用 JSON 格式,由应用程序通过 JavaScript 进行解析。此外,还可以通过添加界面来获取特定地点的天气数据,从而对该应用程序进行修改。

世界时钟

该应用程序显示不同城市的世界时钟。目前,城市列表是硬编码在应用程序中的,但可以根据设备的输入能力进行更改。

其他

其余应用程序目前返回静态数据,但可通过修改使其处理从相应服务获取的响应数据。

运行示例

您可以通过以下方式运行示例:

示例项目 @ code.qt.io

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