StackView item is pushed outside the border

Question

I have the following QML layout of the main application window. I need to create shadow for borderless window, that's why inner rectangle is a bit smaller than the application border (I found this solution on the StackOverflow before). The problem is when a new item is pushed to the nested StackView, it moves from the outside of the inner rectangle. How should I fix it?

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0

import org.b2soft.qml 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 800
    height: 600
    title: qsTr("Test")

    color: "#00000000"
    flags: Qt.FramelessWindowHint | Qt.Window
  
    Rectangle {
        id: rect
        width: 700
        height: 500
        anchors.centerIn: parent

        Column {
            id: column
            anchors.fill: parent

            Row {
                id: topbar
                anchors.left: parent.left
                anchors.right: parent.right
                height: 24

                Rectangle {
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    width: parent.width
                    color: "#37373a"
                }
            }

            StackView {
                id: rootStackView
                anchors.left: parent.left
                anchors.right: parent.right
                height: parent.height - topbar.height
                initialItem: Qt.resolvedUrl("login.qml")
            }

            Connections {
                target: QMLWrapper
                onLoginCompleted: rootStackView.push(Qt.resolvedUrl("main_stack.qml"))
            }
        }
    }

    DropShadow {
        anchors.fill: rect
        radius: 40
        samples: 32
        verticalOffset: 14
        source: rect
        color: "#40000000"
    }  
}

Below is the GIF with the issue:

dtech dtech · Accepted Answer · 2018-06-12T19:07:19

I'd go on a limb and assume that's the default intended behavior. QML elements do not clip by default, out of concern it might be a heavy operation.

And the stack view is usually contained inside the application window, so this issue would not be prominent.

But yours is nested into a smaller element, leaving room for the artifact to manifest.

All you have to do is set clip: true for rect.

StackView item is pushed outside the border

1 Answers