Dynamic items adding to the Flow layout?

strekazoid

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.

xsacha

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?

strekazoid

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.

xsacha

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.

strekazoid

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.

xsacha

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)

strekazoid

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.

syrianzoro

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 }

}@

xsacha

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.

strekazoid

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

xsacha

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.

raja26

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.