转自：https://blog.csdn.net/weixin_40912639/article/details/100170858

效果

摘要

这段时间在写树的时候需要用到右键菜单，但是原生的不太好看，且用起来有点僵硬(不太熟悉)，于是抱着手艺人的素养，就自己鼓捣了一个出来，虽然不一定非常通用，但是自己做出来的使用比较方便，后期的改动也会比较方便。

原理

为了更方便的调用下级节点，第一级菜单使用的是Repeater，第二级使用的是listview，通过它们自身的动态创建，来实现多级菜单，而为了更方便的使用，菜单的model使用Jason来传入，所以基本思路就是解析传入的model，根据model来动态创建节点，以实现菜单的效果。

代码

main.qml 子定义菜单的调用

import QtQuick 2.7
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr("闻天语~")property var model: {"七里香":["借口","外婆","将军","搁浅","乱舞春秋","困兽之斗","园游会"],"十一月的萧邦":["夜曲","发如雪","推流","枫"],"依然范特西":["夜的第七章","听妈妈的话","本草纲目"],"我很忙我很忙":["牛仔很忙","彩虹","蒲公英的约定"],"魔杰座":["稻香","蛇舞","花海","魔术先生","说好的幸福呢","兰亭序","乔克叔叔"],"叶惠美":["晴天"," 东风破","她的睫毛"],"八度空间":["半岛铁盒","龙拳","回到过去"],}color: "dimgray"MouseArea{anchors.fill: parentacceptedButtons: Qt.RightButton|Qt.LeftButtononClicked: {if(mouse.button == Qt.RightButton){menu.show(mouse.x,mouse.y)}else{menu.close()}}}MenuEx{id:menuvisible: falsemainModel:modelbtnHeight: 25width: 100x:20y:20}
}

MenuItemEx.qml 菜单的子项

import QtQuick 2.0
import QtQuick.Controls 1.4Rectangle{id:itemRootproperty variant model: []property string showText : ""property ExclusiveGroup exclusiveGroup:expproperty bool checked: falseonExclusiveGroupChanged: {if (exclusiveGroup)exclusiveGroup.bindCheckable(itemRoot)}height:btnHeightcolor:checked?colo_c:menuRoot.colorText {text: showTextanchors.centerIn: parent}MouseArea{id:mainMouseanchors.fill: parenthoverEnabled:trueonEntered:checked=true}Component.onCompleted:{for(var i in model){listModel.append({"sText": model[i]})console.log("s"+i ,model[i])}}ListModel{id:listModel}Rectangle{anchors.left:parent.rightanchors.leftMargin: 3height: parent.height*model.length+2*extrawidth: parent.widthcolor: menuRoot.colorvisible:itemRoot.checkedradius: extraListView{model:listModelheight: parent.height-8width: parent.widthy:extraid:listviewdelegate:Rectangle{color: listview.currentIndex==index?"lightblue": childMouse.containsMouse?colo_c:menuRoot.colorText {x:20anchors.verticalCenter: parent.verticalCentertext: sText}height:btnHeightwidth:itemRoot.widthMouseArea{anchors.fill: parentid:childMousehoverEnabled: trueonClicked: {listview.currentIndex=index}}}}}
}

MenuEx.qml 菜单

import QtQuick 2.0
import QtQuick.Controls 1.4Rectangle{id:menuRootcolor: "white"property int btnHeight: valueproperty int extra: 5property variant mainModel:[]property variant keys : []property string colo_c: "lightgray"height: btnHeight*keys.length+2*extraradius: extraComponent.onCompleted:{keys=Object.keys(mainModel)for (var i in keys){mainListModel.append({"btnText":keys[i]})}}ExclusiveGroup{id:exp}ListModel{id:mainListModel}ListView{y:extraheight: parent.height-8model:mainListModelwidth: parent.widthdelegate: MenuItemEx{showText:btnTextmodel:mainModel[btnText]width:menuRoot.width}
}
function show(inX,inY)
{menu.x=inXmenu.y=inYvisible=true
}
function close()
{exp.current.checked=falsevisible=false
}
}

qml自定义菜单-QML相关推荐

QML自定义图表图例
QML自定义图表图例项目简介项目技术项目展示主要源码片段解析获取完整项目源码传送门项目简介创建自己的自定义图例. 创建自己的自定义图例,而不是使用ChartView API的内置图例. ...
Qml自定义等待指示器
QtQuick.Controls 2 大部分组件提供的定制化一般都是 contentItem和background contentItem描述组件的可视化区域的显示效果 background描述组件的 ...
Qt使用C++封装qml自定义图形控件（QQuickPaintedItem）
C++封装qml自定义图形控件 QtWidget.qml简介通过继承QQuickPaintedItem封装控件描述公用接口定义代码示例效果图 QtWidget.qml简介 Qt提供了2套UI ...
Qt 3D：高级自定义材质QML示例
Qt自带集成开发环境(IDE),名为Qt Creator.它可以在Linux.OS X和Windows上运行,并提供智能代码完成.语法高亮.集成帮助系统.调试器和剖析器集成,还集成了所有主要的版本控制 ...
confirm自定义按钮文字_公众号涨粉神器——自定义菜单，互动运营更灵活！
你知道怎么正确运营微信公众号么?你对公众号运营手段了解多少?你能充分认识到公众号的商业价值么?你知道有哪些可靠的公众号运营工具呢?......对于刚入行的微信公众号运营者来说,比起长篇大论.很难理解其 ...
Java微信公众平台开发(十)--微信自定义菜单的创建实现
转自:http://www.cuiyongzhi.com/post/48.html 自定义菜单这个功能在我们普通的编辑模式下是可以直接在后台编辑的,但是一旦我们进入开发模式之后我们的自定义菜单就需要自 ...
微信公众平台对所有公众号开放自定义菜单
据统计,微信公众号已达1000多万了,但大多数没有微信认证,且没有开发能力,为此微信公众平台开放了自定义菜单功能给所有公众号,这是微信团队年前给广大自媒体送的大礼,期待微信越来越开放公众帐号运营者点 ...
右键脚本html,js实现右键自定义菜单
本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下 #menu { height: 200px; width: 50px; border: 1px solid gray; back ...
php创建菜单_php实现微信公众号创建自定义菜单功能的实例代码
目的创建自定义菜单,实现菜单事件. 首先获取Access_Token 接口: 我用的是测试号,修改APPID和APPSECRET,然后浏览器访问上面这个Url即可生成Access_Token 然后配 ...

qml自定义菜单-QML

效果

摘要

原理

代码

qml自定义菜单-QML相关推荐

最新文章

热门文章