怎样在QML应用中创建一个Context Menu
我们在非常多的系统中看见能够在屏幕的一个地方长按,然后就能够依据当前显示的上下文弹出一个菜单。
菜单中能够有一些选项,比方删除,改动该项。这样的一般在ListView或GridView中常见。今天,我们就在这个例程中具体介绍怎样实现这个功能。
对ListView来说,我们仅仅须要对它的delegate做一些改动:
Component {
id: listDelegate ListItem {
id: delegateItem
width: listView.width; height: units.gu(10)
onPressAndHold: ListView.view.ViewItems.dragMode =
!ListView.view.ViewItems.dragMode Image {
id: pic
height: parent.height - 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.topMargin: 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: SequentialAnimation {
PropertyAction { target: delegateItem; property: "height"; value: 0 }
NumberAnimation { target: delegateItem; property: "height"; to: delegateItem.height; duration: 250; easing.type: Easing.InOutQuad }
} 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 is set back to false so that the item can be destroyed
PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false }
} /* create an empty item centered in the image to align the popover to */
Item {
id: emptyItemForCaller
anchors.centerIn: parent
z: 100 } 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)
}
}
}
}
} MouseArea {
anchors.fill: parent
onPressAndHold: {
PopupUtils.open(actPopComp, emptyItemForCaller);
} onClicked: {
console.log("we can do something else!");
}
}
}
}
从上面的代码中能够看出:
/* create an empty item centered in the image to align the popover to */
Item {
id: emptyItemForCaller
anchors.centerIn: parent
z: 100 }
我们使用了一个空的Item来作为一个placeholder。
这个是为了给我们在长按ListView中项时,来提供一个位置显示我们的Popup menu。
当我们长按我们的ListView中的项时,我们能够通过例如以下的方法来得到事件并弹出我们所须要的Popup:
MouseArea {
anchors.fill: parent
onPressAndHold: {
PopupUtils.open(actPopComp, emptyItemForCaller);
} onClicked: {
console.log("we can do something else!");
}
}
这里,我们的actPopComp的设计为:
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)
}
}
}
}
}
在这里。我们有三个Action的菜单。
执行我们的应用:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="300" alt="">
怎样在QML应用中创建一个Context Menu的更多相关文章
- 创建一个目录info,并在目录中创建一个文件test.txt,把该文件的信息读取出来,并显示出来
/*4.创建一个目录info,并在目录中创建一个文件test.txt,把该文件的信息读取出来,并显示出来*/ #import <Foundation/Foundation.h>#defin ...
- Ionic 2 中创建一个照片倾斜浏览组件
内容简介 今天介绍一个新的UI元素,就是当我们改变设备的方向时,我们可以看到照片的不同部分,有一种身临其境的感觉,类似于360全景视图在移动设备上的应用. 倾斜照片浏览 Ionic 2 实例开发 新增 ...
- iOS9中如何在日历App中创建一个任意时间之前开始的提醒(三)
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 四.创建任意时间之前开始的提醒 现在我们找到了指定源中的指定日 ...
- 在C#/.NET应用程序开发中创建一个基于Topshelf的应用程序守护进程(服务)
本文首发于:码友网--一个专注.NET/.NET Core开发的编程爱好者社区. 文章目录 C#/.NET基于Topshelf创建Windows服务的系列文章目录: C#/.NET基于Topshelf ...
- Eclipse中创建一个新的SpringBoot项目
在Eclipse中创建一个新的spring Boot项目: 1. 首先在Eclipse中安装STS插件:在Eclipse主窗口中点击 Help -> Eclipse Marketplace... ...
- 在存放源程序的文件夹中建立一个子文件夹 myPackage。例如,在“D:\java”文件夹之中创建一个与包同名的子文件夹 myPackage(D:\java\myPackage)。在 myPackage 包中创建一个YMD类,该类具有计算今年的年份、可以输出一个带有年月日的字符串的功能。设计程序SY31.java,给定某人姓名和出生日期,计算该人年龄,并输出该人姓名、年龄、出生日期。程序使用YM
题目补充: 在存放源程序的文件夹中建立一个子文件夹 myPackage.例如,在“D:\java”文件夹之中创建一个与包同名的子文件夹 myPackage(D:\java\myPackage).在 m ...
- 父类是在子类创建对象时候 在子类中创建一个super内存空间
父类是在子类创建对象时候 在子类中创建一个super内存空间
- iOS9中怎样在日历App中创建一个随意时间之前開始的提醒(三)
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;) 四.创建随意时间之前開始的提醒 如今我们找到了指定源中的指定日 ...
- [Xcode 实际操作]九、实用进阶-(28)在iTunes Connect(苹果商店的管理后台)中创建一个新的新的APP
目录:[Swift]Xcode实际操作 本文将演示如何在iTunes Connect(苹果商店的管理后台)中创建一个新的新的APP. 首先要做的是打开浏览器,并进入[iTunesConnect网站], ...
随机推荐
- 回文自动机 + DFS --- The 2014 ACM-ICPC Asia Xi’an Regional Contest Problem G.The Problem to Slow Down You
The Problem to Slow Down You Problem's Link: http://acm.hust.edu.cn/vjudge/problem/viewProblem.actio ...
- thinkphp 集成 twig模版引擎
下载地址:https://github.com/fucongcong/ThinkPHPLevel/archive/master.zip 控制器格式为: <?php namespace Home\ ...
- SQL Server 2012附加数据库报错
操作系统: win8 数据库:SQL 2012 遇到问题: 以管理员身份登录SQL 2012,附件数据库提示如下错误: 解决办法: 以windows账号登录,附加,成功!
- Android性能测试框架Emmagee
目前移动设备,尤其是Android设备,相对于过去的J2me时代,硬件有大幅度的提高,并且更新地非常快,可以安装和运行更多的应用. 但是目前安卓市场对于应用的要求并不如苹果商店那么严格,Android ...
- op bug 修复计划
省-市-区-组-成员 多了一个组的下拉框,说不清它和区的联系 把它删掉,它的点击事件(把组的id和内容传给隐形的text,text通过ajax提交到数据库)给区下面的组
- 敏捷软件开发实践-Sprint Retrospective Meeting(转)
介绍: 在敏捷开发模式中,Sprint Retrospective Meeting 也是一个必不可少的环节,它通常发生在每个Sprint的结尾,其主要作用是对于当前的迭代周期做一个阶段性的总结,包括好 ...
- 【BZOJ】1647: [Usaco2007 Open]Fliptile 翻格子游戏(暴力)
http://www.lydsy.com/JudgeOnline/problem.php?id=1647 自己太弱...看题解.. 竟然是枚举第一行的放法,,,因为一定要全部变0,所以将前一行1的在这 ...
- Yii2中Html的使用
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4&quo ...
- BestCoder Round #12 War(计算几何)
War Time Limit: 8000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- SQL命令优化(积累)
与数据库交互的基本语言是sql,数据库每次解析和执行sql语句多需要执行很多步骤.以sql server为例,当数据库收到一条查询语句时,语法分析器会扫描sql语句并将其分成逻辑单元(如关键词.表达式 ...