Transition problem in StackView which is displayed on Dialog - qt

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
}