我在 QML 中创建无框窗口。为了移动和调整大小,使用事件处理程序创建多个 MouseArea。 起初,我只为样本创建了移动区域和部分调整大小区域。但是,当我开始时,我只在一个区域的区域中触发了 4 个区域中的 3 个的事件,而它们不相交,并且光标在正确的位置发生变化。 Linux 和 Windows 中保存的问题。
不同MouseArea的活动区域相交但不相交可能是什么原因?
为了调试,为每个鼠标区域添加了颜色矩形并增加了大小区域。
import QtQuick 6.2
import QtQuick.Controls 6.2
Window {
id: win
width: 200
height: 100
flags: Qt.FramelessWindowHint | Qt.Window
property alias topPanel: topPanel
Rectangle {
anchors.fill: parent
color: "#610161"
Rectangle {
id: topPanel
z: 0
height: 30
color: "#4c4c4c"
border.width: 0
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.rightMargin: 0
anchors.leftMargin: 0
anchors.topMargin: 0
ActionButton {
id: close
width: 20
height: 20
anchors.right: parent.right
anchors.top: parent.top
z: 10
image: "icons/close.svg"
anchors.topMargin: 5
anchors.rightMargin: 5
backColor: "#00000000"
Connections {
function onClicked() {
win.close()
}
}
}
}
MouseArea {
id: moved
z: 2
Rectangle {
anchors.fill: parent
z: 32
color: "#6a30e4"
}
property real lastX: 0
property real lastY: 0
x: 35
y: 0
anchors.left: lt.right
anchors.right: topPanel.right
anchors.top: topPanel.top
anchors.bottom: topPanel.bottom
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.topMargin: 0
anchors.leftMargin: 0
Connections {
target: moved
function onPressed(mouse) {
console.debug("Pressed move", mouse.x, mouse.y, "MOVED:",
moved.x, moved.y, "|", moved.width, "x",
moved.height)
moved.lastX = mouse.x
moved.lastY = mouse.y
mouse.accepted = true
}
function onPositionChanged(mouse) {
mouse.accepted = true
let dx = (mouse.x - moved.lastX)
let dy = (mouse.y - moved.lastY)
console.debug("move dx:", dx, " dy:", dy, " mouse:",
mouse.x, mouse.y, mouse.modifiers)
win.x += dx
win.y += dy
}
}
}
MouseArea {
id: lbord
z: 2
width: 5
anchors.top: lt.bottom
anchors.left: parent.left
anchors.bottom: lb.top
anchors.topMargin: 0
Rectangle {
color: "#43ca28"
anchors.fill: parent
z: 32
}
property real lastX: 0
property real lastY: 0
Connections {
target: lbord
function onPressed(mouse) {
console.debug("Pressed lbord")
lbord.lastX = mouse.x
}
function onPositionChanged(mouse) {
let dx = (mouse.x - lbord.lastX)
console.debug("lbord dx:", dx, " lastX:", lbord.lastX,
" mouse:", mouse.x, mouse.y)
win.x += dx
win.width -= dx
// lbord.lastX += dx
}
}
}
MouseArea {
id: lb
z: 2
width: 15
height: 15
anchors.left: parent.left
anchors.bottom: parent.bottom
Rectangle {
color: "#28cac7"
anchors.fill: parent
z: 32
}
property real lastX: 0
property real lastY: 0
Connections {
target: moved
function onPressed(mouse) {
console.debug("Pressed lb", mouse.x, mouse.y, "LB:", lb.x,
lb.y, "|", lb.width, "x", lb.height)
lb.lastX = mouse.x
lb.lastY = mouse.y
}
function onPositionChanged(mouse) {
let dx = (mouse.x - lb.lastX)
let dy = (mouse.y - lb.lastY)
console.debug("lb dx:", dx, " dy:", dy, " mouse:", mouse.x,
mouse.y, mouse.modifiers)
win.x += dx
win.y += dy
win.width -= dx
win.height += dy
}
}
}
MouseArea {
id: lt
z: 2
width: 35
height: 35
anchors.left: parent.left
anchors.top: parent.top
cursorShape: Qt.SizeFDiagCursor
Rectangle {
color: "#eb1892"
anchors.fill: parent
z: 32
}
property real lastX: 0
property real lastY: 0
Connections {
target: moved
function onPressed(mouse) {
console.debug("Pressed lt", mouse.x, mouse.y, "LT:", lt.x,
lt.y, "|", lt.width, "x", lt.height)
lt.lastX = mouse.x
lt.lastY = mouse.y
}
function onPositionChanged(mouse) {
let dx = (mouse.x - lt.lastX)
let dy = (mouse.y - lt.lastY)
console.debug("lt dx:", dx, " dy:", dy, " mouse:", mouse.x,
mouse.y, mouse.modifiers)
win.x += dx
win.y += dy
win.width -= dx
win.height -= dy
}
}
}
}
}
您的信号处理函数在 4 个
Connections
对象中的 3 个中被触发,因为您为其中 3 个分配了相同的 target
。
您甚至不必使用
Connections
,因为您是实例化 MouseArea
的人:
MouseArea {
id: mouseArea
Connections {
target: mouseArea
function onPressed(mouse) { ... }
}
}
相当于
MouseArea {
onPressed(mouse) { ... }
}
我还建议使用 startSystemMove 和 startSystemResize。