Dynamic items adding to the Flow layout?

  • I need to create and add dynamically items to the Flow layout. Is it possible?

    The example with positioners in QML only offers increasing and decreasing opacity of the existing items, thus creating the illusion of dynamic. That's not really what I need.

  • I assume you want a model/delegate method similar to what ListView and GridView use?
    And GridView isn't an option? Because it sounded like you want GridView.

    I haven't tried this, but is it possible to use a ListView delegate/model but re-parent all its models' elements?

  • Nevermind, got it :D

    Here is how it works:

    @Flow {
    id: customTagPage
    width: mainScreen.width
    height: mainScreen.height

    TextInput {
    id: customTagInput
    width: 150
    height: 40
    onAccepted: {
    var tagComponent = Qt.createComponent("TaggingTag.qml");
    if(tagComponent.status == Component.Ready) {
    var tagLabel = tagComponent.createObject(customTagPage);
    tagLabel.tagLabelText = customTagInput.text;


    It's all dynamic now.

  • Awesome! :) Gives me an option later.
    You create a component from a QML file and parent it to your Flow.

    Then perhaps that delegate/model method would work too, but this looks cleaner.

  • Just didn't want to mess with delegates/models, and Flow was perfectly what I needed for UI. Especially since it got this nice transition animation option for adding items.

  • Delegates/models are quite easy to use and very powerful! They looked confusing at first to me but I realised that the delegate is just the object and the model is just the data.
    As for adding animations, I made my own in a ListView - it's also easy to do in QML :).

    Strange that Flow has 'add' animations and yet no special function for adding children?
    I always figured it was just a simpler (less overhead) layout item and that people would use GridView if they wanted dynamic.

    What I like best about the code you gave is how easy it is to create completely different components (not just a single delegate) within the same item. I will definitely make use of that in future.
    If you had the Component element defined in the same QML file, you could just use onAccepted: tagComponent.createObject(parent)

  • bq. If you had the Component element defined in the same QML file, you could just use onAccepted: tagComponent.createObject(parent)

    True, assigning it to :parent is also very useful thing.

  • you can use loader with javascript function to lunch the suitable component.

    @ Item {
    Component {
    id: redSquare
    Rectangle { color: "red"; width: 10; height: 10 }

     Loader { sourceComponent: redSquare }
     Loader { sourceComponent: redSquare; x: 10 }


  • I saw Loader before and ignored it but thinking about it now, it's probably the better (i.e. cleaner) solution.

    @Flow {
    id: customTagPage
    width: mainScreen.width; height: mainScreen.height
    TextInput {
    id: customTagInput
    width: 150; height: 40
    onAccepted: Loader {
    parent: customTagPage
    sourceComponent: Qt.createComponent("TaggingTag.qml")
    tagLabelText = customTagInput.text

    I haven't tested this but I guess it should work. Thanks syrianzoro.

  • Now one more thing. Is it possible to change position of the item in the Flow dynamically?

  • Well one way I can think of this is you can get a handle to the item and reparent it (placing it at the end of the flow?).
    If you don't know what child, but know its screen x,y coordinates, you can use Flow.childAt(x,y).

    This topic is similar to what you are asking: http://developer.qt.nokia.com/forums/viewthread/1835/
    Basically, store its location and then change it with a state.

  • I am trying to do something similar to this "Jquery Token Input":http://loopj.com/jquery-tokeninput/. So far I have this.

    @import QtQuick 2.2

    Item {
    width: 400
    height: 30

    Flow {
        id: tagContainer
        anchors.fill: parent
        anchors.margins: 4
        spacing: 4
        add: Transition {
            NumberAnimation { property: "scale";  from: 0.4; to: 1.0; duration: 300; }
        TextInput {
            id: input
            width: 100
            height: parent.height
            onAccepted: {
                var component = Qt.createComponent('Tag.qml')
                var obj = component.createObject(tagContainer, { 'text' : input.text })


    Almost similar to your implementation. But when I add the 'Tag' components dynamically to the 'Flow', it keeps on getting appended to the right and it does not get wrapped. I would appreciate any help.

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.