QML如何将孩子置于其父母之外

Question

我目前正在为我的大学制作视频/流管理计划。我的申请正文是GridView。我为每个视频实现了一个播放栏，因此我可以专门为GridView的每个成员使用我的播放功能。问题现在是FullScreen。我找不到像showFullScreen()那样的Window函数。现在我遇到this question并尝试了第一个解决方案（状态/转换），它按照预期的方式工作，除了我需要它能够超出父节点范围。

代码：

GridView {
    id: mainGrid
    width: parent.width - (parent.width % cellWidth)
    height: parent.height
    anchors.centerIn: parent

    Layout.fillHeight: true
    Layout.fillWidth: true

    cellWidth: 300
    cellHeight: 300

    focus: true

    property bool newPlayStatus: true

    model: VideoModel {
        list: videoList
    }

    delegate: Component {
        id: videoDelegate
        Frame {
            id: videoContainer
            width: mainGrid.cellWidth
            height: mainGrid.cellHeight

            background: Rectangle {
                anchors.centerIn: parent
                width: parent.width
                height: parent.height
                color: "black"
            }

            VideoDummy {
                id: video
                list: model.video
                videoUrl: model.url
                anchors.centerIn: parent
                focus: true
                playStatus: mainGrid.newPlayStatus

            }
            onChildrenChanged: {
                console.log("url: " + model.url)
            }

            Playbar {
                id: localPlaybar
                x: -12
                y: mainGrid.cellHeight - 42
                width: mainGrid.cellWidth
                height: 30

            }

            Connections{
                target:localPlaybar
                onToggleFullscreen: {
                    videoContainer.state = videoContainer.state === "EXPANDED" ? "" : "EXPANDED"
                }
            }

            states: [
                State {
                    name: "EXPANDED"
                    PropertyChanges {
                        target: videoContainer
                        x: application.x
                    }
                    PropertyChanges {
                        target: videoContainer
                        y: application.y
                    }
                    PropertyChanges {
                        target: videoContainer
                        width: application.width
                    }
                    PropertyChanges {
                        target: videoContainer
                        height: application.height
                    }
                }
            ]

            transitions: [
                Transition {
                    ParallelAnimation {
                        NumberAnimation {
                            target: videoContainer
                            property: "x"
                            duration: 350
                        }
                        NumberAnimation {
                            target: videoContainer
                            property: "y"
                            duration: 350
                        }
                        NumberAnimation {
                            target: videoContainer
                            property: "width"
                            duration: 350
                        }
                        NumberAnimation {
                            target: videoContainer
                            property: "height"
                            duration: 350
                        }
                    }
                }

            ]
        }
    }
}

我排除了代码的某些部分，因为它只会让人更难看到重要的部分。 application是ApplicationWindow的ID。

目前，此代码并未将所有内容扩展到所需的大小/位置，但如果总体思路有效，我会这样做。

问题在于videoContainer无法离开它的父母空间。有什么办法吗？我可以使用所需的qml部分打开一个新的Window并将其设为showFullScreen()但我不相信这是一个很好的解决方案吗？

提前致谢！

Answer 1

我找到了解决方案：

onToggleFullscreen: {
    var i = videoContainer.mapFromGlobal(0,0)
    videoContainer.x = i.x
    videoContainer.y = i.y
    videoContainer.width = application.width
    videoContainer.height = application.height                   
}

有了这个，我可以调整大小并将其放在父母之外。