Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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