在QML中动态添加元素到SplitView

Question

我正在使用 QML，希望能够通过鼠标单击等方式动态向 SplitView 中添加元素，但目前为止我还没有找到答案。

到目前为止，我发现 SplitView 的默认属性设置为其第一个子元素的 data 属性。因此，我想尝试添加新的动态创建的组件，并将父级设置为该子元素（splitView1.children[0]）。不幸的是，这也不起作用。更重要的是，在组件完成加载后，该第一个子元素的子元素数量为零（似乎 SplitLayout 的 Component.onCompleted 事件调用了将这些子元素移动到其他地方的函数）。因此，添加的子元素不会被渲染（也不响应任何连接到 Layout 的属性）。

请参见以下代码片段：

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    width: 600
    height: 400

    SplitView {
        anchors.fill: parent

        Rectangle {
            id: column
            width: 200
            Layout.minimumWidth: 100
            Layout.maximumWidth: 300
            color: "lightsteelblue"
        }

        SplitView {
            id: splitView1
            orientation: Qt.Vertical
            Layout.fillWidth: true

            Rectangle {
                id: row1
                height: 200
                color: "lightblue"
                Layout.minimumHeight: 1
            }

//            Rectangle {               //I want to add Rectangle to splitView1 like this one, but dynamicly eg.onMouseClick
//                color: "blue"
//            }
        }
    }

    MouseArea {
        id: clickArea
        anchors.fill: parent
        onClicked: {
            console.debug("clicked!")
            console.debug("len: " + splitView1.__contents.length); // __contents is the SplitView's default property - an alias to the first child's data property

            var newObject = Qt.createQmlObject('import QtQuick 2.1; Rectangle {color: "blue"}',
                splitView1, "dynamicSnippet1"); //no effect

//            var newObject = Qt.createQmlObject('import QtQuick 2.1; import QtQuick.Layouts 1.0; Rectangle {color: "blue"; width: 50; height: 50}',
//                splitView1, "dynamicSnippet1"); //rectangle visible, but not in layout(?) - not resizeable
        }
    }
}

我是否能够让动态创建的组件与静态添加的组件一样，在SplitView中正常渲染？

- user1913403

Answer 1

看起来API不支持动态插入新元素。即使你设法让它工作，这也可能是一个hack，未来的版本可能会破坏它。你可能需要自己编写控件来模拟所需的行为。理想情况下，该控件应该由某种模型支持。

- Deadron

Answer 2

从QtQuick Controls 1.3开始，SplitView有一个addItem(item) 方法。

- cmannett85

Answer 3

你必须使用Loader来动态加载对象。在onClicked处理程序中，你需要声明sourceComponent属性来改变Loader的源，就像这样：

ApplicationWindow {
width: 600
height: 400

SplitView {
    anchors.fill: parent

    Rectangle {
        id: column
        width: 200
        Layout.minimumWidth: 100
        Layout.maximumWidth: 300
        color: "lightsteelblue"
    }

    SplitView {
        id: splitView1
        orientation: Qt.Vertical
        Layout.fillWidth: true

        Rectangle {
            id: row1
            height: 200
            color: "lightblue"
            Layout.minimumHeight: 1
        }
     Loader {
         id:rect
     }


    }
}

MouseArea {
    id: clickArea
    anchors.fill: parent
    onClicked: {
        console.debug("clicked!")
        console.debug("len: " + splitView1.__contents.length) // __contents is the SplitView's default property - an alias to the first child's data property
        rect.sourceComponent = algo
    }
}

Component {
    id:algo
Rectangle {
    anchors.fill: parent
    color: "blue"
}
}
}

- sytabaresa

---

这个解决方案非常不好，因为你必须事先知道你将需要多少个对象，而这种情况很少发生。 - cmannett85

Answer 4

我看到了 SplitView 的源代码，它会在 Component.onCompleted 信号时计算每个拆分区域。因此，我认为这是关键点。无论你如何操作（插入、动态创建），在插入新的区域进行拆分之后，区域都不会被重置。

- Jack yang