How to create a framelesswindow and can resize the window's size?

hezf

I use this to create a frameless window,but this window can't resize

ApplicationWindow {
flags:  Qt.Window|Qt.FramelessWindowHint

I want to resize the window like a Qt::SizeAllCursor at right bottom~

p3c0

Hi @hezf,
AFAIK we dont have something like QSizeGrip in QML yet. So I thought of giving a try to create our own QML based grip. Following is what seems to work. Ofcourse it needs lots of improvisation IMO :)
On the right-bottom corner is a small rectangle on which you can press and drag it. It is added just for visualization.

import QtQuick 2.5
import QtQuick.Window 2.0

Window {
    id: win
    width: 300
    height: 300
    visible: true
    flags: Qt.FramelessWindowHint

    Item {
        id: root //Dummy item as mapToItem requires Item
        anchors.fill: parent

        Rectangle {
            width: 10
            height: 10
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            color: "red"

            MouseArea {
                anchors.fill: parent
                onPositionChanged: {
                    win.width += mapToItem(root,mouseX,mouseY).x-root.width
                    win.height += mapToItem(root,mouseX,mouseY).y-root.height
                }
            }
        }
    }
}

Can you try if it works for you ?
If some one has better ideas to improve it please share.

hezf

@p3c0
Thank you for your help.I will try it.
If I know a better way to do this,I will share to you.

qAminzzz

@hezf hi, you can use this code

resize button is on TOP - LEFT window

import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

ApplicationWindow
{
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    flags: Qt.FramelessWindowHint | Qt.Window

    Rectangle
    {
        color: "red"
        width: parent.width
        height: 40

        anchors.top: parent.top

        MouseArea
        {
            width: 8
            height: 8
            anchors.left: parent.left
            anchors.top: parent.top
            cursorShape: Qt.SizeFDiagCursor

            property point lastMousePos: Qt.point(0,0)

            onPressed:
            {
                lastMousePos = Qt.point(mouse.x,mouse.y)
            }

            onMouseXChanged:
            {
                var disputeX = (mouseX - lastMousePos.x)
                root.x += disputeX
                root.width -= disputeX
            }
            onMouseYChanged:
            {
                var disputeY = (mouseY - lastMousePos.y)
                root.y += disputeY
                root.height -= disputeY
            }
        }
    }
}

GrecKo

Or use QWindow::startSystemResize

fcarney

@GrecKo
I put this in a Window object. It returns true, but it doesn't resize.
I am running Ubuntu 18.04 with Gnome and Qt 5.15.2.
I wonder if gnome doesn't support this. I will have to try on windows and see if it works there.

MouseArea {
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        width: 16
        height: width

        onClicked: {
            let resize = mainwindow.startSystemResize(Qt.RightEdge | Qt.BottomEdge)
            console.log(resize)
        }

        Rectangle {
            anchors.fill: parent

            color: "yellow"
        }
    }

GrecKo

Call it on onPressed instead and you will be able to resize the window by dragging