December 2, 2010

strekazoid strekazoid
Lab Rat
151 posts

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.

11 replies

December 2, 2010

xsacha xsacha
Lab Rat
517 posts

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?

 Signature 

- Sacha

December 2, 2010

strekazoid strekazoid
Lab Rat
151 posts

Nevermind, got it :D

Here is how it works:

  1. Flow {
  2.                 id: customTagPage
  3.                 width:  mainScreen.width
  4.                 height:  mainScreen.height
  5. }
  6.  
  7. TextInput {
  8.                 id: customTagInput
  9.                 width:  150
  10.                 height: 40
  11.                 onAccepted: {
  12.                     var tagComponent = Qt.createComponent("TaggingTag.qml");
  13.                     if(tagComponent.status == Component.Ready) {
  14.                         var tagLabel = tagComponent.createObject(customTagPage);
  15.                         tagLabel.tagLabelText = customTagInput.text;
  16.                     }
  17.                 }
  18.  
  19.  
  20.             }

It’s all dynamic now.

December 2, 2010

xsacha xsacha
Lab Rat
517 posts

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.

 Signature 

- Sacha

December 2, 2010

strekazoid strekazoid
Lab Rat
151 posts

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.

December 2, 2010

xsacha xsacha
Lab Rat
517 posts

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)

 Signature 

- Sacha

December 2, 2010

strekazoid strekazoid
Lab Rat
151 posts

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.

December 2, 2010

syrianzoro syrianzoro
Lab Rat
63 posts

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

  1.  Item {
  2.      Component {
  3.          id: redSquare
  4.          Rectangle { color: "red"; width: 10; height: 10 }
  5.      }
  6.  
  7.      Loader { sourceComponent: redSquare }
  8.      Loader { sourceComponent: redSquare; x: 10 }
  9.  }

 Signature 

Qt is the future

December 2, 2010

xsacha xsacha
Lab Rat
517 posts

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

  1. Flow {
  2.         id: customTagPage
  3.         width:  mainScreen.width;  height:  mainScreen.height
  4. }
  5. TextInput {
  6.         id: customTagInput
  7.         width:  150; height: 40
  8.         onAccepted: Loader {
  9.                  parent: customTagPage
  10.                  sourceComponent: Qt.createComponent("TaggingTag.qml")
  11.                  tagLabelText = customTagInput.text
  12.              }
  13.         }
  14. }

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

 Signature 

- Sacha

December 3, 2010

strekazoid strekazoid
Lab Rat
151 posts

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

December 3, 2010

xsacha xsacha
Lab Rat
517 posts

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.

 Signature 

- Sacha

July 15, 2014

raja26 raja26
Lab Rat
77 posts

I am trying to do something similar to this Jquery Token Input [loopj.com]. So far I have this.

  1. import QtQuick 2.2
  2.  
  3. Item {
  4.     width: 400
  5.     height: 30
  6.  
  7.     Flow {
  8.         id: tagContainer
  9.         anchors.fill: parent
  10.         anchors.margins: 4
  11.         spacing: 4
  12.         add: Transition {
  13.             NumberAnimation { property: "scale";  from: 0.4; to: 1.0; duration: 300; }
  14.         }
  15.  
  16.         TextInput {
  17.             id: input
  18.             width: 100
  19.             height: parent.height
  20.             onAccepted: {
  21.                 var component = Qt.createComponent('Tag.qml')
  22.                 var obj = component.createObject(tagContainer, { 'text' : input.text })
  23.             }
  24.         }
  25.     }
  26. }

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.

 
  ‹‹ ListView duplicating last item on update in Windows      Using Timer in a ListView ››

You must log in to post a reply. Not a member yet? Register here!