ML Window/Item Resize Bug: Anchors/Layout not adjusting correctly on window resize

Hadi_vafaee

When I manually resize the application window, the main Item (or Rectangle) inside the Window does not resize immediately/properly. There is a large blank space, and the internal elements (like the calculator buttons in the video) don't re-center or refill the parent as expected.
this is the code
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

Window {
id: win
visible: true
width: 440
height: 720
minimumWidth: 360
minimumHeight: 540
color: "transparent"
flags: Qt.FramelessWindowHint | Qt.Window

readonly property bool isMax: win.visibility === Window.Maximized

// Define the required gap size for the invisible resize handle
property int resizePad: 12

QtObject {
    id: theme
    property color background: "#0f172a"
    property color titleBarBg: "#081024"
    property color border: "#1f2937"
    property color accent: "#06b6d4"
    property color textMain: "#e6eef8"
    property color textSec: "#94a3b8"
}

// -------------------- 1) MANUAL RESIZE LAYER (Covers the full Window) --------------------
Item {
    id: resizeLayer
    anchors.fill: parent
    z: 9999
    visible: !isMax

    property int edge: win.resizePad      // 12px area for edges
    property int corner: win.resizePad * 2 // 24px area for corners (easier to grab)

    // Top Edge
    MouseArea {
        anchors.left: parent.left; anchors.right: parent.right; anchors.top: parent.top
        height: resizeLayer.edge
        cursorShape: Qt.SizeVerCursor
        onPressed: win.startSystemResize(Qt.TopEdge)
    }
    // Bottom Edge
    MouseArea {
        anchors.left: parent.left; anchors.right: parent.right; anchors.bottom: parent.bottom
        height: resizeLayer.edge
        cursorShape: Qt.SizeVerCursor
        onPressed: win.startSystemResize(Qt.BottomEdge)
    }
    // Left Edge
    MouseArea {
        anchors.left: parent.left; anchors.top: parent.top; anchors.bottom: parent.bottom
        width: resizeLayer.edge
        cursorShape: Qt.SizeHorCursor
        onPressed: win.startSystemResize(Qt.LeftEdge)
    }
    // Right Edge
    MouseArea {
        anchors.right: parent.right; anchors.top: parent.top; anchors.bottom: parent.bottom
        width: resizeLayer.edge
        cursorShape: Qt.SizeHorCursor
        onPressed: win.startSystemResize(Qt.RightEdge)
    }

    // Corners (use larger corner area size)
    MouseArea {
        width: resizeLayer.corner; height: resizeLayer.corner
        anchors.left: parent.left; anchors.top: parent.top
        cursorShape: Qt.SizeFDiagCursor
        onPressed: win.startSystemResize(Qt.LeftEdge | Qt.TopEdge)
    }
    MouseArea {
        width: resizeLayer.corner; height: resizeLayer.corner
        anchors.right: parent.right; anchors.top: parent.top
        cursorShape: Qt.SizeBDiagCursor
        onPressed: win.startSystemResize(Qt.RightEdge | Qt.TopEdge)
    }
    MouseArea {
        width: resizeLayer.corner; height: resizeLayer.corner
        anchors.left: parent.left; anchors.bottom: parent.bottom
        cursorShape: Qt.SizeBDiagCursor
        onPressed: win.startSystemResize(Qt.LeftEdge | Qt.BottomEdge)
    }
    MouseArea {
        width: resizeLayer.corner; height: resizeLayer.corner
        anchors.right: parent.right; anchors.bottom: parent.bottom
        cursorShape: Qt.SizeFDiagCursor
        onPressed: win.startSystemResize(Qt.RightEdge | Qt.BottomEdge)
    }
}

// -------------------- 2) MAIN UI (SHRUNK TO EXPOSE RESIZE LAYER) --------------------
Rectangle {
    id: inner
    anchors.fill: parent
    // THE FIX: Shrink the UI rectangle to expose the transparent area beneath it
    anchors.margins: isMax ? 0 : win.resizePad

    radius: isMax ? 0 : 16
    color: theme.background
    border.width: 1
    border.color: theme.border
    clip: true

    // Titlebar
    Rectangle {
        id: titleBar
        width: parent.width
        height: 48
        color: theme.titleBarBg

        MouseArea {
            anchors.fill: parent
            anchors.rightMargin: 120
            onPressed: win.startSystemMove()
            onDoubleClicked: isMax ? win.showNormal() : win.showMaximized()
        }

        // Title
        Row {
            anchors.left: parent.left; anchors.leftMargin: 16; anchors.verticalCenter: parent.verticalCenter; spacing: 8
            Rectangle { width: 10; height: 10; radius: 3; rotation: 45; color: theme.accent }
            Text { text: "LUMINA CALC"; font.pixelSize: 12; font.bold: true; color: theme.textSec }
        }

        // Window buttons
        Row {
            anchors.right: parent.right; anchors.rightMargin: 10; anchors.verticalCenter: parent.verticalCenter; spacing: 6
            WindowBtn { symbol: "─"; onClicked: win.showMinimized() }
            WindowBtn { symbol: isMax ? "❐" : "□"; onClicked: isMax ? win.showNormal() : win.showMaximized() }
            WindowBtn { symbol: "✕"; isDestructive: true; onClicked: Qt.quit() }
        }
    }
}

// -------------------- COMPONENT: WindowBtn --------------------
component WindowBtn : Rectangle {
    property string symbol: ""
    property bool isDestructive: false
    signal clicked()

    width: 32; height: 30; radius: 6
    color: wMa.containsMouse ? (isDestructive ? "#e11d48" : "#1f2937") : "transparent"

    Text {
        anchors.centerIn: parent
        text: symbol
        color: isDestructive && wMa.containsMouse ? "#fff" : theme.textSec
        font.pixelSize: 12
    }

    MouseArea {
        id: wMa
        anchors.fill: parent
        hoverEnabled: true
        onClicked: parent.clicked()
    }
}

}

SGaist

Hi and welcome to devnet,

You should also add:

which version of Qt you are using
which OS you are running on
if Linux, which distribution, desktop environment and window manager

Hadi_vafaee

I'm using qt 6.8.2 and im working in windows 11

SGaist

Can you test with a more recent version ? 6.10.1 is the current release at the time of writing.

Hadi_vafaee

Hello!
i tried that but it didn't work

SGaist

What kind of graphics card do you have ?