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

Question

我目前正在为我的大学开发视频/流管理程序。 我的应用程序的主体是GridView 。 我为每个视频实现了一个播放栏，因此可以将播放功能专门用于GridView每个成员。 现在的问题是FullScreen 。 我找不到像Window那样的showFullScreen()函数。 现在，我遇到了这个问题，并尝试了第一个解决方案（状态/转换），它可以按预期的方式工作，只是我需要它能够超出父级范围。

码：

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                   
}

有了它，我可以调整大小并将其放置在其父对象之外。