PieMenuControlView.qml Example File
gallery/qml/PieMenuControlView.qml
import QtQuick 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 1.1
import QtQuick.Extras 1.4
Rectangle {
id: view
color: customizerItem.currentStyleDark ? "#111" : "#555"
Behavior on color {
ColorAnimation {}
}
Keys.onReleased: {
if (event.key === Qt.Key_Back) {
stackView.pop();
event.accepted = true;
}
}
property bool darkBackground: true
property Component mouseArea
property Component customizer: Item {
property alias currentStylePath: stylePicker.currentStylePath
property alias currentStyleDark: stylePicker.currentStyleDark
StylePicker {
id: stylePicker
currentIndex: 0
width: Math.round(Math.max(textSingleton.implicitHeight * 6 * 2, parent.width * 0.5))
anchors.centerIn: parent
model: ListModel {
ListElement {
name: "Default"
path: "PieMenuDefaultStyle.qml"
dark: false
}
ListElement {
name: "Dark"
path: "PieMenuDarkStyle.qml"
dark: true
}
}
}
}
property alias controlItem: pieMenu
property alias customizerItem: customizerLoader.item
Item {
id: controlBoundsItem
width: parent.width
height: parent.height - toolbar.height
visible: customizerLoader.opacity === 0
Image {
id: bgImage
anchors.centerIn: parent
height: 48
Text {
id: bgLabel
anchors.top: parent.bottom
anchors.topMargin: 20
anchors.horizontalCenter: parent.horizontalCenter
text: "Tap to open"
color: "#999"
font.pointSize: 20
}
}
MouseArea {
id: touchArea
anchors.fill: parent
onClicked: pieMenu.popup(touchArea.mouseX, touchArea.mouseY)
}
PieMenu {
id: pieMenu
triggerMode: TriggerMode.TriggerOnClick
width: Math.min(controlBoundsItem.width, controlBoundsItem.height) * 0.5
height: width
style: Qt.createComponent(customizerItem.currentStylePath)
MenuItem {
text: "Zoom In"
onTriggered: {
bgImage.source = iconSource
bgLabel.text = text + " selected"
}
iconSource: "qrc:/images/zoom_in.png"
}
MenuItem {
text: "Zoom Out"
onTriggered: {
bgImage.source = iconSource
bgLabel.text = text + " selected"
}
iconSource: "qrc:/images/zoom_out.png"
}
MenuItem {
text: "Info"
onTriggered: {
bgImage.source = iconSource
bgLabel.text = text + " selected"
}
iconSource: "qrc:/images/info.png"
}
}
}
Loader {
id: customizerLoader
sourceComponent: customizer
opacity: 0
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 30
anchors.rightMargin: 30
y: parent.height / 2 - height / 2 - toolbar.height
visible: customizerLoader.opacity > 0
property alias view: view
Behavior on y {
NumberAnimation {
duration: 300
}
}
Behavior on opacity {
NumberAnimation {
duration: 300
}
}
}
ControlViewToolbar {
id: toolbar
onCustomizeClicked: {
customizerLoader.opacity = customizerLoader.opacity == 0 ? 1 : 0;
}
}
}