qml自定义控件----自定义菜单
-
效果
-
摘要
这段时间在写树的时候需要用到右键菜单，但是原生的不太好看，且用起来有点僵硬(不太熟悉)，于是抱着手艺人的素养，就自己鼓捣了一个出来，虽然不一定非常通用，但是自己做出来的使用比较方便，后期的改动也会比较方便。
-
原理
为了更方便的调用下级节点，第一级菜单使用的是Repeater，第二级使用的是listview，通过它们自身的动态创建，来实现多级菜单，而为了更方便的使用，菜单的model使用Jason来传入，所以基本思路就是解析传入的model，根据model来动态创建节点，以实现菜单的效果。
-
代码
main.qml 子定义菜单的调用
import QtQuick 2.7
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("闻天语~")
property var model: {"七里香":["借口","外婆","将军","搁浅","乱舞春秋","困兽之斗","园游会"],
"十一月的萧邦":["夜曲","发如雪","推流","枫"],
"依然范特西":["夜的第七章","听妈妈的话","本草纲目"],
"我很忙我很忙":["牛仔很忙","彩虹","蒲公英的约定"],
"魔杰座":["稻香","蛇舞","花海","魔术先生","说好的幸福呢","兰亭序","乔克叔叔"],
"叶惠美":["晴天"," 东风破","她的睫毛"],
"八度空间":["半岛铁盒","龙拳","回到过去"],
}
color: "dimgray"
MouseArea{
anchors.fill: parent
acceptedButtons: Qt.RightButton|Qt.LeftButton
onClicked: {
if(mouse.button == Qt.RightButton)
{
menu.show(mouse.x,mouse.y)
}else{
menu.close()
}
}
}
MenuEx{
id:menu
visible: false
mainModel:model
btnHeight: 25
width: 100
x:20
y:20
}
}
MenuItemEx.qml 菜单的子项
import QtQuick 2.0
import QtQuick.Controls 1.4
Rectangle{
id:itemRoot
property variant model: []
property string showText : ""
property ExclusiveGroup exclusiveGroup:exp
property bool checked: false
onExclusiveGroupChanged: {
if (exclusiveGroup)
exclusiveGroup.bindCheckable(itemRoot)
}
height:btnHeight
color:checked?colo_c:menuRoot.color
Text {
text: showText
anchors.centerIn: parent
}
MouseArea{
id:mainMouse
anchors.fill: parent
hoverEnabled:true
onEntered: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.right
anchors.leftMargin: 3
height: parent.height*model.length+2*extra
width: parent.width
color: menuRoot.color
visible:itemRoot.checked
radius: extra
ListView
{
model:listModel
height: parent.height-8
width: parent.width
y:extra
id:listview
delegate:Rectangle
{
color: listview.currentIndex==index?"lightblue": childMouse.containsMouse?colo_c:menuRoot.color
Text {
x:20
anchors.verticalCenter: parent.verticalCenter
text: sText
}
height:btnHeight
width:itemRoot.width
MouseArea{
anchors.fill: parent
id:childMouse
hoverEnabled: true
onClicked: {
listview.currentIndex=index
}
}
}
}
}
}
MenuEx.qml 菜单
import QtQuick 2.0
import QtQuick.Controls 1.4
Rectangle{
id:menuRoot
color: "white"
property int btnHeight: value
property int extra: 5
property variant mainModel:[]
property variant keys : []
property string colo_c: "lightgray"
height: btnHeight*keys.length+2*extra
radius: extra
Component.onCompleted:
{
keys=Object.keys(mainModel)
for (var i in keys)
{
mainListModel.append({"btnText":keys[i]})
}
}
ExclusiveGroup{id:exp}
ListModel
{
id:mainListModel
}
ListView
{
y:extra
height: parent.height-8
model:mainListModel
width: parent.width
delegate: MenuItemEx
{
showText:btnText
model:mainModel[btnText]
width:menuRoot.width
}
}
function show(inX,inY)
{
menu.x=inX
menu.y=inY
visible=true
}
function close()
{
exp.current.checked=false
visible=false
}
}
-
扩展
因为只是个母本，所以真的需要什么功能可以自己去扩展，手艺人更多的是提供一个思路。因为目前是只支持两级菜单，所以以后可以拓展出多级来，和现在的思路一样，通过解析传入的Jason是否存在多级菜单，来确认是否需要再复用MenuItemEx。如果想要排序也很简单，解析出来的model在加入之前，先把解出来的列表排个序，比如第一级菜单，就可以在传入Repeater之前调用keys.sort()。暂时能想到的扩展就这些了，如果有什么好的建议或者疑问，请联系QQ995187021.