How to create a context menu in a QML app

We see in many systems that you can press and hold in one place on the screen, and then pop up a menu based on the context of the current display. There are some options in the menu, such as deleting and modifying the item. This is generally common in a ListView or GridView. Today, we'll show you how to implement this in detail in this routine.

For the ListView, we only need to make some changes to its delegate:

        Component {id:listdelegate ListItem {id:delegateitem width : Listview.width; Height:units.gu (Ten) OnPressAndHold:ListView.view.ViewItems.dragMode =! ListView.view.ViewItems.dragMode Image {id:pic Height:parent.heigh                    T-units.gu (1) width:height Anchors.verticalCenter:parent.verticalCenter                 Anchors.left:parent.left Anchors.leftMargin:units.gu (0.5) Source:image                    } Column {id:content anchors.top:parent.top Anchors.left:pic.right Anchors.leftMargin:units.gu (2) Anchors.topmarg          In:units.gu (1) width:parent.width-pic.width-units.gu (1) height:parent.height          Spacing:units.gu (1) Label {text:name} Label {text:description} label {text: ' $ ' + number (cost). toFixed (2 ) Font.bold:true}} ListView.onAdd:SequentialAn Imation {propertyaction {Target:delegateitem; property: "Height"; value:0} Numb eranimation {Target:delegateitem; property: "Height"; to:delegateItem.height; duration:250; easing.type:Easing.InOut Quad}} ListView.onRemove:SequentialAnimation {propertyaction {target : Delegateitem; Property: "Listview.delayremove"; Value:true} numberanimation {Target:delegateitem; property: "Height"; to:0; duration:250; easing. Type:Easing.InOutQuad}//Make sure delayremove are set back to false so that The item can be destroyed propertyaction {Target:delegateitem; property: "Listview.delayremove"; Val                Ue:false}/* Create a empty item centered in the image to align the popover to */                    Item {Id:emptyitemforcaller anchors.centerIn:parent Z:100} Component {Id:actpopcomp actionselectionpop                            Over {id:actpop Delegate:ListItems.Standard { Text:action.text} actions:actionlist {action                                {text: "Add 1 Dollar" Iconname: "Add"                                    Ontriggered: {popuputils.close (Actpop); Console.log ("ADD 1 dollar");                                Fruitmodel.setproperty (Index, "cost", cost + 1.0);                                }} Action {text: "Deduct 1 dollar"                                    Iconname: "Remove" ontriggered: {                                    Popuputils.close (Actpop);                                    Console.log ("Deduct 1 dollar");                                Fruitmodel.setproperty (Index, "cost", Math.max (0,cost-1.0));                                }} Action {text: ' delete '                                    Iconname: "Delete" ontriggered: {                                    Console.log ("delete the item!");        Fruitmodel.remove (Index)}}                }}} mousearea {anchors.fill:parent                    onPressAndHold: {popuputils.open (Actpopcomp, Emptyitemforcaller);                    } onclicked: {Console.log ("We can do something else!"); }                }            }        }

As you can see from the code above:

  /* Create an empty item centered on the image to align the popover to * *                item {                    Id:emptyitemforcaller                    anchors . centerin:parent                    z:100                }

We used an empty item to act as a placeholder. This is to give us a place to display our popup menu when long pressing the item in the ListView.

When we long press the item in our ListView, we can get the event and pop up the popup we need by the following method:

               Mousearea {                    anchors.fill:parent                    onpressandhold: {                        popuputils.open (Actpopcomp, Emptyitemforcaller);                    }                    onclicked: {                        Console.log ("We can do something else!");                    }                }

Here, our Actpopcomp is designed to:

                Component {Id:actpopcomp Actionselectionpopover {                        Id:actpop Delegate:ListItems.Standard {Text:action.text                                } actions:actionlist {Action { Text: "Add 1 Dollar" Iconname: "Add" ontriggered:                                    {popuputils.close (Actpop);                                    Console.log ("ADD 1 dollar");                                Fruitmodel.setproperty (Index, "cost", cost + 1.0);                                }} Action {text: "Deduct 1 dollar"                                    Iconname: "Remove" ontriggered: { Popuputils.closE (Actpop);                                    Console.log ("Deduct 1 dollar");                                Fruitmodel.setproperty (Index, "cost", Math.max (0,cost-1.0));                                }} Action {text: ' delete '                                    Iconname: "Delete" ontriggered: {                                    Console.log ("delete the item!");                    Fruitmodel.remove (Index)}}} }                }

Here we have a menu of three action.

To run our application:

The source code for the entire project is: Git clone https://gitcafe.com/ubuntu/contextmenu.git

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

How to create a context menu in a QML app