PieMenu QML Type

A popup menu that displays several menu items along an arc. More...

• List of all members, including inherited members
• Obsolete members

Properties

• boundingItem : Item
• currentIndex : int
• currentItem : int
• menuItems : list<MenuItem>
• selectionAngle : real
• title : string
• triggerMode : int

Methods

• void addItem(string text)
• void insertItem(int before, string text)
• void popup(real x, real y)
• void removeItem(item)

Detailed Description

The PieMenu provides a radial context menu as an alternative to a traditional menu. All of the items in a PieMenu are an equal distance from the center of the control.

Populating the Menu

To create a menu, define at least one MenuItem as a child of it:

 PieMenu {
     id: pieMenu

     MenuItem {
         text: "Action 1"
         onTriggered: print("Action 1")
     }
     MenuItem {
         text: "Action 2"
         onTriggered: print("Action 2")
     }
     MenuItem {
         text: "Action 3"
         onTriggered: print("Action 3")
     }
 }

By default, only the currently selected item's text is displayed above the menu. To provide text that is always visible when there is no current item, set the title property.

Displaying the Menu

The typical use case for a menu is to open at the point of the mouse cursor after a right click occurs. To do that, define a MouseArea that covers the region upon which clicks should open the menu. When the MouseArea is right-clicked, call the popup() function:

 MouseArea {
     anchors.fill: parent
     acceptedButtons: Qt.RightButton

     onClicked: pieMenu.popup(mouseX, mouseY)
 }

If the menu is opened in a position where some of its menu items would be outside of boundingItem, it is automatically moved to a position where they will not be hidden. By default, the boundingItem is set to the parent of the menu. It can also be set to null to prevent this behavior.

PieMenu can be displayed at any position on the screen. With a traditional context menu, the menu would be positioned with its top left corner at the position of the right click, but since PieMenu is radial, we position it centered over the position of the right click.

To create a PieMenu that opens after a long press and selects items upon releasing, you can combine ActivationMode.ActivateOnRelease with a MouseArea using a Timer:

 MouseArea {
     id: touchArea
     anchors.fill: parent

     Timer {
         id: pressAndHoldTimer
         interval: 300
         onTriggered: pieMenu.popup(touchArea.mouseX, touchArea.mouseY);
     }

     onPressed: pressAndHoldTimer.start()
     onReleased: pressAndHoldTimer.stop();
 }

 PieMenu {
     id: pieMenu

     triggerMode: TriggerMode.TriggerOnRelease

     MenuItem {
         text: "Action 1"
         onTriggered: print("Action 1")
     }
     MenuItem {
         text: "Action 2"
         onTriggered: print("Action 2")
     }
     MenuItem {
         text: "Action 3"
         onTriggered: print("Action 3")
     }
 }

You can hide individual menu items by setting their visible property to false. Hiding items does not affect the startAngle or endAngle; the remaining items will grow to consume the available space.

You can create a custom appearance for a PieMenu by assigning a PieMenuStyle

Property Documentation

 PieMenu {
     MenuItem {
         text: "Action 1"
         onTriggered: function() { print("Action 1"); }
     }
     MenuItem {
         text: "Action 2"
         onTriggered: function() { print("Action 2"); }
     }
     MenuItem {
         text: "Action 3"
         onTriggered: function() { print("Action 3"); }
     }
 }

Method Documentation