Unsolved Qt Quick Controls 2 - Resizing frameless window
-
Hello!
I've been developing simple program for making color palettes. And for design purposes I decided to have a frameless window. I figured out how to move it around but I have a little problem with resizing it
Here is the video showing the problem : https://www.youtube.com/watch?v=ERPGXCz0P6E
My code for resizing the window from the right side is :
MouseArea { id: leftSideMouseArea anchors.fill: parent property point lastMousePos: Qt.point(0, 0) onPressed: { lastMousePos = Qt.point(mouseX, mouseY); } onMouseXChanged: applicationWindow1.width += (mouseX + lastMousePos.x) }
and for the bottom :
MouseArea { anchors.fill: parent property point lastMousePos: Qt.point(0, 0) onPressed: { lastMousePos = Qt.point(mouseX, mouseY); } onMouseYChanged: applicationWindow1.height += (mouseY - lastMousePos.y) }
As you can see in the video, this code working fine when it's apllied to the left or bottom side. But, when I try to apply it to the other sides, it's no longer working. I've tried to replace plus with minus etc. It didn't help either.
Do you guys know what I'm doing wrong? Are there any other ways to make frameless window resizable?
Thanks in advance!
-
If you resize from the left side, you'll of course have to modify the window's position as well as its width. Also, since this will cause the mouse area to move below the mouse it will affect the mouse position, so you can't rely on the difference from the last position anymore.
Instead, you need to use global mouse positions, for example like this:
ApplicationWindow { id: window minimumHeight: 200 minimumWidth: 200 visible: true property point startMousePos property point startWindowPos property size startWindowSize function absoluteMousePos(mouseArea) { var windowAbs = mouseArea.mapToItem(null, mouseArea.mouseX, mouseArea.mouseY) return Qt.point(windowAbs.x + window.x, windowAbs.y + window.y) } MouseArea { id: leftArea anchors.left: parent.left anchors.top: parent.top anchors.bottom: parent.bottom width: 100 onPressed: { startMousePos = absoluteMousePos(leftArea) startWindowPos = Qt.point(window.x, window.y) startWindowSize = Qt.size(window.width, window.height) } onMouseYChanged: { var abs = absoluteMousePos(leftArea) var newWidth = Math.max(window.minimumWidth, startWindowSize.width - (abs.x - startMousePos.x)) var newX = startWindowPos.x - (newWidth - startWindowSize.width) window.x = newX window.width = newWidth } Rectangle { anchors.fill: parent color: "red" } } // todo: other resize areas here }
Unfortunately, this method will cause shifting about of the window border on the right side due to the
x
andwidth
of the window being assigned separately (at least on Windows 10). There seems to be no way around this from QML, since theWindow
item does not have any way to set the geometry in one go (likeQWidget::setGeometry
). I can't even find this functionality inQQuickItem
orQQuickWindow
either, so this seems to be a shortcoming in the APIs. :-/ -
is'nt it better to use custom windows with resizing borders on it?
like thisflags: Qt.Window | Qt.CustomizeWindowHint
it is borderless but you have resizing borders