如何使项目填充QML中所有可用的垂直空间？

我有一个页面有一个 Headers （PageTitle项目）和一个页脚（按钮），我没有找到一个更好的解决方案如何使一个项目（Flickable）填充所有窗口客户区（页眉和页脚之间的垂直空间）比计算其高度如下：

import QtQuick 2.7
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
import QtQml 2.2

Page {

    id: root

    background: Rectangle {
        color: "transparent"
    }

    function close()
    {
        stack.pop()
        root.destroy(1000)
    }

    function getText()
    {
        var params = scene.gameParams()
        return qsTr("HowToPlay_Key").arg(params.lineLength).arg(params.newCount)
    }

    SystemPalette {
        id: palette
    }

    GroupBox {

        background: Rectangle {
            color: palette.base
        }

        padding: 15
        anchors.fill: parent

        GridLayout {
            rows: 3
            columns: 1
            flow: GridLayout.LeftToRight
            width: parent.width

            PageTitle {
                id: title
                Layout.fillWidth: true
                text: qsTr("How to play")
            }

            Flickable {

                //layout does not help
                //Layout.fillWidth: true
                Layout.fillHeight: true
                //Layout.maximumHeight: root.height - (30 + 10 + title.height + closeButton.height)

                //Using window here is a workaround, the other alternative on mobile in Screen.desktopAvailableWidth/Screen.desktopAvailableHeight
                //Looks like root.width and window.height are zeros when the dialog is created from main's Component.onCompleted handler.
                width: window.width - 30 - 30
                //height: window.height - (30 + title.height + 10 + closeButton.height + 10 + 30)
                flickableDirection: Flickable.VerticalFlick

                TextArea.flickable: TextArea {
                    id: field
                    //height: 300
                    text: root.getText()
                    wrapMode: Label.Wrap
                    readOnly: true
                }

                ScrollBar.vertical: ScrollBar { }
            }

            Button {
                id: closeButton
                Layout.topMargin: 10
                Layout.alignment: Qt.AlignRight
                text: scene.firstRunFlag ? qsTr("Next") : qsTr("Close")
                onClicked: close()
            }
        }
    }
}

有没有更好的方法（不知道页眉和页脚高度），例如在WPF中，您可以轻松地创建3行网格并使第一行和第三行固定高度，第二行自动高度？

我尝试使用Layout.fillHeight，但得到以下（在360x640分辨率上）：

页面看起来好像Flickable高度为零 .

有什么不对？