显示在 Dialog 上的 StackView 中的转换问题

Question

好吧，我 运行 在 Dialog 中遇到了 StackView 的问题。你可以在这个example.

中看到

也许我需要重写动画？

这是我的代码：

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" }
                            }
                        }
                    }
                }
            }
        }
    }

更新 1：我认为我根本不应该在对话框中使用堆栈视图。

更新 2：刚刚在 StackView 中添加了 clip: true，它帮助了我。

Answer 1

你的问题只是裁剪问题。默认情况下，所有 QML 对象都将 clip 设置为 false，但您可以打开它来解决您的问题：

StackView {
    ...
    clip: true
}