程序运行截图如下：

(资料图)

这个实例主要是用qml玩界面。

main.qml文件以及wearable.qml分别是由ApplicationWindow和StatckView。这个StackView用于做导航相关的。

代码如下：

QQC2.ApplicationWindow {id: window...header: NaviButton {id: homeButton...onClicked: stackView.pop(null)}footer: NaviButton {id: backButton...onClicked: stackView.pop()}QQC2.StackView {id: stackView...onLaunched: stackView.push(page)}}DemoMode {stackView: stackView}DemoModeIndicator {id: demoModeIndicatory: settings.demoMode ? -height : -height * 2anchors.horizontalCenter: parent.horizontalCenterheight: header.heightz: window.header.z + 1}MouseArea {enabled: settings.demoModeanchors.fill: parentonClicked: {// Stop demo mode and return to the launcher page.settings.demoMode = falsestackView.pop(null)}}}

在wearable.cpp中应用QQuickStyle的风格：

QQuickStyle::setStyle(QStringLiteral("qrc:/qml/Style"));

在C++代码中设置QQuickStyle风格是十分灵活的，他作用于整个应用。

通过实现qml/NaviButton.qml接口完成自定义button类型。在wearable.qml中home按钮以及back按钮都是自定义的。使用properties扩展可以实现控制滑动过度的相关功能：

QQC2.AbstractButton {id: buttonproperty int edge: Qt.TopEdgeproperty alias imageSource: image.sourcecontentItem: Image {id: image...}background: Rectangle {...}transform: Translate {Behavior on y { NumberAnimation { } }y: enabled ? 0 : edge === Qt.TopEdge ? -button.height : button.height}}

图标绑定了Qt资源文件:/icons。index.theme文件包含了icon主题的内容：

[Icon Theme]Name=WearableComment=Qt Quick Controls 2 Wearable Demo Icon ThemeDirectories=36x36,36x36@2[36x36]Size=36Type=Fixed[36x36@2]Size=36Scale=2Type=Fixed同样在C++里的main函数中进行设置：QIcon::setThemeName(QStringLiteral("wearable"));Launcher页主要是使用了PathView这个组建。PathView {id: circularViewsignal launched(string page)...model: ListModel {ListElement {title: qsTr("World Clock")icon: "worldclock"page: "WorldClock/WorldClockPage.qml"}...ListElement {title: qsTr("Settings")icon: "settings"page: "Settings/SettingsPage.qml"}}delegate: QQC2.RoundButton {...icon.width: 36icon.height: 36icon.name: model.icon...onClicked: {if (PathView.isCurrentItem)circularView.launched(Qt.resolvedUrl(page))elsecircularView.currentIndex = index}}...}

目前官方给出的信息中，个人觉得比较重要的就是这么多，后面将会对代码中的知识点进行分析。

【领 QT开发教程 学习资料， 点击下方链接莬费领取↓↓ ，先码住不迷路~】

点击这里：