qml 实现自定义菜单menu,带有圆角矩形边框和阴影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.15

Window {
id: main
visible: true
width: 800
height: 600
color: "#CCCCCC"

MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton)
menu.popup()
}
onPressAndHold: {
if (mouse.source === Qt.MouseEventNotSynthesized)
menu.popup()
}

Menu {
id: menu

Action { text: qsTr("Tool Bar"); checkable: true }
Action { text: qsTr("Side Bar"); checkable: true; checked: true }
Action { text: qsTr("Status Bar"); checkable: true; checked: true }
Action { text: "test1"; }
Action { text: "test1"; }
Action { text: "test1" }
Action { text: "test1" }
MenuSeparator {
contentItem: Rectangle {
implicitWidth: 160
implicitHeight: 2
color: "gray"
}
}

Menu {
title: qsTr("Advanced")
MenuItem {
text: "test1"
}
MenuItem {
text: "test2"
}
}

topPadding: 10
bottomPadding: 10
leftPadding: 9
rightPadding: 9

delegate: MenuItem {
id: menuItem
implicitWidth: 200
implicitHeight: 22

arrow: Canvas {
x: parent.width - width
implicitWidth: 40
implicitHeight: 22
visible: menuItem.subMenu
onPaint: {
var ctx = getContext("2d")
ctx.fillStyle = "#404040"
ctx.moveTo(15, 15)
ctx.lineTo(width - 18, height / 2)
ctx.lineTo(15, height - 15)
ctx.closePath()
ctx.fill()
}
}

contentItem: Text {
leftPadding: menuItem.indicator.width
rightPadding: menuItem.arrow.width
text: menuItem.text
font: menuItem.font
color: "black"
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}

background: Rectangle {
implicitWidth: 200
implicitHeight: 22
radius: 2
opacity: enabled ? 1 : 0.3
color: menuItem.highlighted ? "#90c8f6" : "transparent"
}
}

background: Rectangle {
color: "transparent"
id: aaa
implicitWidth: 200
implicitHeight: 22
border.color: "#00000000"
radius: 8
border.width: 1
Rectangle {
id: aasdf
anchors {
left: aaa.left
right: aaa.right
top: aaa.top
bottom: aaa.bottom
leftMargin: 8
rightMargin: 8
topMargin: 8
bottomMargin: 8
}
border.color: "#00000000"
radius: 4
border.width: 1
color: "white"

}
DropShadow {
anchors.fill: aasdf
horizontalOffset: 1
verticalOffset: 1
radius: 8
samples: 9
source: aasdf
color: "black"
}
}

}
}

}