Transition problem in StackView which is displayed on Dialog

Question

Well, I've run into a problem with my StackView in Dialog. You can see it in this example.

Maybe I need to rewrite the animation?

Here is my code:

Dialog {
        id: settingDialog
        anchors.centerIn: parent
        width: 350
        height: parent.height / 1.1
        closePolicy: Dialog.NoAutoClose
        background: Rectangle {
            color: "darkgrey"
            border.color: "cyan"
            radius: 5
        }
        ColumnLayout {
            anchors.fill: parent
            spacing: 5
            ToolBar {
                Layout.fillWidth: true
                Layout.minimumHeight: 60
                background: Rectangle { color: "transparent" }
                RowLayout {
                    anchors.fill: parent
                    ToolButton {
                        id: tbBack
                        enabled: true
                        Layout.alignment: Qt.AlignHCenter
                        Layout.minimumWidth: 30
                        Layout.leftMargin: 10
                        background: Rectangle {
                            color: tbBack.hovered ? "darkcyan" : "transparent"
                            radius: parent.width
                        }
                        onClicked: stackViewSettings.pop()
                    }
                    Item { Layout.fillWidth: true }
                    ToolButton {
                        id: tbClose
                        Layout.alignment: Qt.AlignHCenter
                        Layout.minimumWidth: 30
                        Layout.rightMargin: 10
                        icon.source: "ADD YOUR ICO"
                        background: Rectangle {
                            color: tbClose.hovered ? "cyan" : "transparent"
                            radius: parent.width
                        }
                        onClicked: {
                            settingDialog.close()
                            stackViewSettings.pop()
                        }
                    }
                }
            }
            //
            StackView {
                id: stackViewSettings
                Layout.fillWidth: true
                Layout.fillHeight: true
                initialItem: Page {
                    background: Rectangle { color: noColor }
                    ColumnLayout {
                        anchors.fill: parent
                        spacing: 0
                        ListView {
                            id: listViewSettings
                            currentIndex: -1
                            interactive: false
                            spacing: 10
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            delegate: ItemDelegate {
                                height: 40
                                anchors {
                                    left: parent.left
                                    right: parent.right
                                }
                                highlighted: ListView.isCurrentItem
                                // Style of button
                                background: Rectangle {
                                    color: parent.hovered ? "#555e69" : "transparent"
                                    radius: 10
                                }
                                RowLayout {
                                    anchors.fill: parent
                                    spacing: 15
                                    // Image
                                    Rectangle {
                                        color: noColor
                                        Layout.minimumHeight: 30
                                        Layout.minimumWidth: 30
                                        Layout.leftMargin: 15
                                        Layout.alignment: Qt.AlignRight
                                        Image {
                                            anchors.fill: parent
                                            source: model.imageSource
                                        }
                                    }
                                    // Text
                                    Rectangle {
                                        color: "transparent"
                                        Layout.fillHeight: true
                                        Layout.minimumWidth: 150
                                        Layout.alignment: Qt.AlignLeft
                                        Text {
                                            anchors.verticalCenter: parent.verticalCenter
                                            text: model.title
                                            color: textColor
                                            font.pixelSize: 16
                                        }
                                    }
                                }
                                onClicked: stackViewSettings.push(model.source)
                            }
                            model: ListModel {
                                ListElement { title: "Change profile"; imageSource: "ADD YOUR ICO"; source: "ADD YOUR PAGE" }
                                ListElement { title: "Language"; imageSource: "ADD YOUR ICO"; source: "ADD YOUR PAGE" }
                            }
                        }
                    }
                }
            }
        }
    }

Upd 1: I don't think I should use the stackview on dialog at all.

Upd 2: Just added clip: true in the StackView and It helped me.

Answer 1

Your problem is just a clipping issue. By default all QML objects have clip set to false, but you can turn it on to solve your problem:

StackView {
    ...
    clip: true
}