程序運行截圖如下：

這個實例主要是用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文档阅读笔记-Qt Quick Controls - Wearable Demo实例解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。