Qt/QML - 手动移动处理程序和调整窗口大小后的拆分视图行为

Question

我在 Qml (QtQuick.Controls 1.4) 中使用 SplitView，我将窗口分为三个部分。每个部分的宽度和高度是使用整个窗口大小的百分比来定义的。示例：

width: root.width * 0.33
height: root.height / 2

当我调整 Window 的大小时，SplitView 内部的不同部分会按比例调整大小，如下图所示：

• 图片 1：原始尺寸

• 图 2：调整大小后

这是预期的行为。但是，如果我手动移动其中一个部分的处理程序（我将在示例中使用垂直处理程序），当我调整窗口大小时，该部分不会按比例调整大小。相反，它始终保持处理程序建立的大小。

• 图 3：手动移动处理程序的示例（从图 1 中的位置开始）。

• 图 4：手动移动处理程序后调整大小的示例。

有没有办法在移动处理程序后按比例调整每个部分的大小（如示例 2）？

这是我的代码：

import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Window 2.11
import QtQuick.Layouts 1.0
import Qt.labs.qmlmodels 1.0

ApplicationWindow {
    id: root
    visible: true
    width: 600
    height: 480

    SplitView {
        anchors.fill: parent
        orientation: Qt.Horizontal

        TableView {
            id: tableview
            width: root.width * 0.67
            height: root.height
            clip: true
        }

        Rectangle {
            id: rect
            width: childrenRect.width
            height: childrenRect.height
            SplitView {
                anchors.fill: parent
                orientation: Qt.Vertical

                TableView {
                    id: tableview2
                    width: root.width * 0.33
                    height: root.height / 2
                    clip: true
                }

                TableView {
                    id: tableview3
                    width: root.width * 0.33
                    height: root.height / 2
                    clip: true
                }
            }
        }
    }
}

我的猜测是，当移动处理程序时，每个部分的结果大小变为固定大小，并且不再使用百分比。那么，有没有办法在移动处理程序时更改百分比中的值，而不是设置一个固定值？

注意：为简单起见，我删除了示例中的菜单和状态栏。

注意 2：我将 TableViews 与 QSqlQueryModel 一起使用，但我认为这与此处无关，因为使用 Rectangles 会导致相同的行为。

Answer 1

这是因为您失去了绑定。试试下面的代码

import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Window 2.11
import QtQuick.Layouts 1.0
import Qt.labs.qmlmodels 1.0

ApplicationWindow {
    id: root
    visible: true
    width: 600
    height: 480
    property var verScale: 0.67
    property var horScale: .5

onWidthChanged: tableview.width=root.width * verScale
onHeightChanged: {
    tableview2.height=root.height * horScale
    tableview3.height=root.height * (1-horScale)
}


SplitView {
    anchors.fill: parent
    orientation: Qt.Horizontal

    TableView {
        id: tableview
        height: root.height
        clip: true
        onWidthChanged: verScale=width/root.width
    }

    Rectangle {
        id: rect
        width: childrenRect.width
        height: childrenRect.height
        SplitView {
            anchors.fill: parent
            orientation: Qt.Vertical

            TableView {
                id: tableview2
                clip: true
                onHeightChanged: horScale=height/root.height
            }

            TableView {
                id: tableview3
                clip: true

            }
        }
    }
}
}