qt - 可翻转重叠其他元素

问题描述

在我的 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
                    }
                }
            }
        }
    }
}

我已经在尝试通过手动设置parentmyFlipable来达到效果，Window.contentItem以便它始终高于任何其他项目。但是，这也不能解决问题，因为该项目仍将覆盖当前项目之后的兄弟姐妹。

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

标签： qtqmlqt5qtquick2

我不确定你所说的“某种神秘的方式”是什么意思，但是改变z你的代表的属性是完全可以的：

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

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

visible: !flipable.flipped

qt - 可翻转重叠其他元素

问题描述

解决方案

推荐阅读