CODEWITHSUNDEEP
qtqmlqt-quickqtquick2
user1913403
user1913403

Reputation:

Add elements dynamically to SplitView in QML

I am working with QML and I want to add elements to SplitView dynamically eg. onMouseClick, but so far I didn't find the answer.

What I've found out so far is that the SplitView has it's default property set to it's first child's data property. So I guess I should try and add new dynamically created components with the parent set to that child (splitView1.children[0]). Unfortunately that doesn't work either. What is more the number of children of that first child is zero after the component has finished loading (seems like the SplitLayout's Component.onCompleted event calls a function that moves those children somewhere else). Thus the added children do not render (and do not respond to any of the Layout attached properties).

Please see the following code snippet:

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
        }
    }
}

Is there any way I can make the dynamically created components render properly in the SplitView as the statically added ones?

Upvotes: 11

Views: 4374

Answers (4)

cmannett85
cmannett85

Reputation: 22366

As of QtQuick Controls 1.3, SplitView has an addItem(item) method.

Upvotes: 2

Jack yang
Jack yang

Reputation: 25

I saw the source code of SplitView, it calculate each split region when Component.onCompleted signal. So I think that is a key point. No matter how you do (insert, dynamic create). The region won't be reset after you insert a new region for split.

Upvotes: 0

sytabaresa
sytabaresa

Reputation: 81

you have to use the Loader for load dinamicaly objects. in onClicked handle you have to declare sourceComponent property to change the source of the Loader, something like this:

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"
}
}
}

Upvotes: 0

Deadron
Deadron

Reputation: 5289

It appears that the API does not provide support for dynamic insertion of new elements. Even if you do get it to work it would be a hack and might break with future releases. You may need to roll your own control to mimic the behavior you want. Ideally it should be backed by some sort of model.

Upvotes: 3

Related Questions