⚠️ Forum Maintenance: Feb 6th, 8am - 14pm (UTC+2)

StackView item is pushed outside the border

  • 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:
    alt text

  • Set clip: true for the StackView, now all is working OK. Thanks.

Log in to reply