可翻转重叠其他元素

Question

在我的 QML 应用程序中，我正在尝试创建一个可以在按下按钮时翻转的项目网格。这样一个项目的背面应该会填满屏幕的大部分，直到它被翻转回来。

假设我从我的应用程序的以下视图开始

当我按下中心项目的问号按钮时，项目会翻转并轻微移动。在此之后我希望看到的是以下内容

蓝框是我物品的背面，它覆盖了大部分屏幕。按右上角的 'X'-按钮将再次翻转项目。

然而我第一次翻转后实际看到的是下面的

你可以看到我的网格中的部分项目被我翻转的项目覆盖而部分没有。

我使用的代码如下

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
    
Window {
    id: main

    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    function absolutePos(item) {
        var my_x = item.x
        var my_y = item.y

        if (item.parent !== null) {
            var parent_pos = absolutePos(item.parent)
            my_x += parent_pos.x
            my_y += parent_pos.y
        }

        return {x: my_x, y: my_y}
    }

    GridLayout {
        columns: 5; rows: 3

        Repeater {
            model: 15
            delegate: Item {
                width: main.width / 5 - 10
                height: main.height / 3 - 10

                Flipable {
                    id: flipable
                    anchors.fill: parent

                    property bool flipped: false

                    front: Rectangle {
                        anchors.fill: parent
                        border.color: "black"
                        border.width: 2
                    }

                    back: Rectangle {
                        id: backSide
                        width: 580; height: 400

                        property var absolute_pos: absolutePos(this)

                        border.color: "blue"
                        border.width: 2

                        Button {
                            anchors.top: parent.top
                            anchors.right: parent.right

                            text: "X"

                            width: 30; height: 30

                            onClicked: {
                                flipable.flipped = !flipable.flipped
                            }
                        }
                    }

                    transform: [
                        Rotation {
                            id: rotation
                            origin.x: flipable.width / 2
                            origin.y: flipable.height / 2
                            axis.x: 0; axis.y: 1; axis.z: 0
                            angle: 0
                        },
                        Translate {
                            id: translation
                            x: 0; y: 0
                        }
                    ]

                    states: State {
                        name: "back"
                        PropertyChanges {
                            target: rotation
                            angle: 180
                        }
                        PropertyChanges {
                            target: translation
                            x: 490 - backSide.absolute_pos.x
                        }
                        PropertyChanges {
                            target: translation
                            y: 40 - backSide.absolute_pos.y
                        }
                        when: flipable.flipped
                    }

                    transitions: Transition {
                        ParallelAnimation {
                            NumberAnimation {
                                target: rotation
                                property: "angle"; duration: 300
                            }
                            NumberAnimation {
                                target: translation
                                property: "x"; duration: 300
                            }
                            NumberAnimation {
                                target: translation
                                property: "y"; duration: 300
                            }
                        }
                    }
                }

                Button {
                    anchors.top: parent.top
                    anchors.right: parent.right
                    text: "?"
                    width: 30; height: 30

                    onClicked: {
                        flipable.flipped = !flipable.flipped
                    }
                }
            }
        }
    }
}

我已经尝试通过手动将我的 Flipable 的 parent 设置为 Window.contentItem 来实现这种效果，以便它始终位于任何其他项目之上。然而，这也不能解决问题，因为该项目仍将覆盖当前项目之后的兄弟姐妹。

此外，我仍然希望有一个解决方案不需要以某种神秘的方式操纵我的项目的 z 顺序。

Answer 1

我不确定你所说的“一些神秘的方式”是什么意思，但是改变你的委托的 z 属性是完全没问题的：

delegate: Item {
    z: flipable.flipped ? 1 : 0
    // ...
}

您可能还想隐藏“？”翻转时的按钮：

visible: !flipable.flipped

可翻转重叠其他元素

Flipable overlapping other elements

qt

qml

qt5

qtquick2