LauncherPage.qml Example File
wearable/qml/LauncherPage.qml
import QtQuick 2.7
import QtQuick.Controls 2.1 as QQC2
import "Style"
PathView {
id: circularView
signal launched(string page)
readonly property int cX: width / 2
readonly property int cY: height / 2
readonly property int itemSize: size / 4
readonly property int size: Math.min(width - 80, height)
readonly property int radius: size / 2 - itemSize / 3
snapMode: PathView.SnapToItem
model: ListModel {
ListElement {
title: qsTr("World Clock")
icon: "worldclock"
page: "WorldClock/WorldClockPage.qml"
}
ListElement {
title: qsTr("Navigation")
icon: "navigation"
page: "Navigation/NavigationPage.qml"
}
ListElement {
title: qsTr("Weather")
icon: "weather"
page: "Weather/WeatherPage.qml"
}
ListElement {
title: qsTr("Fitness")
icon: "fitness"
page: "Fitness/FitnessPage.qml"
}
ListElement {
title: qsTr("Notifications")
icon: "notifications"
page: "Notifications/NotificationsPage.qml"
}
ListElement {
title: qsTr("Alarm")
icon: "alarms"
page: "Alarms/AlarmsPage.qml"
}
ListElement {
title: qsTr("Settings")
icon: "settings"
page: "Settings/SettingsPage.qml"
}
}
delegate: QQC2.RoundButton {
width: circularView.itemSize
height: circularView.itemSize
property string title: model.title
icon.width: 36
icon.height: 36
icon.name: model.icon
opacity: PathView.itemOpacity
padding: 12
background: Rectangle {
radius: width / 2
border.width: 3
border.color: parent.PathView.isCurrentItem ? UIStyle.colorQtPrimGreen : UIStyle.colorQtGray4
}
onClicked: {
if (PathView.isCurrentItem)
circularView.launched(Qt.resolvedUrl(page))
else
circularView.currentIndex = index
}
}
path: Path {
startX: circularView.cX
startY: circularView.cY
PathAttribute {
name: "itemOpacity"
value: 1.0
}
PathLine {
x: circularView.cX + circularView.radius
y: circularView.cY
}
PathAttribute {
name: "itemOpacity"
value: 0.7
}
PathArc {
x: circularView.cX - circularView.radius
y: circularView.cY
radiusX: circularView.radius
radiusY: circularView.radius
useLargeArc: true
direction: PathArc.Clockwise
}
PathAttribute {
name: "itemOpacity"
value: 0.5
}
PathArc {
x: circularView.cX + circularView.radius
y: circularView.cY
radiusX: circularView.radius
radiusY: circularView.radius
useLargeArc: true
direction: PathArc.Clockwise
}
PathAttribute {
name: "itemOpacity"
value: 0.3
}
}
Text {
id: appTitle
property Item currentItem: circularView.currentItem
visible: currentItem ? currentItem.PathView.itemOpacity === 1.0 : 0
text: currentItem ? currentItem.title : ""
anchors.centerIn: parent
anchors.verticalCenterOffset: (circularView.itemSize + height) / 2
font.bold: true
font.pixelSize: circularView.itemSize / 3
font.letterSpacing: 1
color: UIStyle.colorQtGray1
}
}