Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Dynamic items adding to the Flow layout?
Forum Updated to NodeBB v4.3 + New Features

Dynamic items adding to the Flow layout?

Scheduled Pinned Locked Moved QML and Qt Quick
12 Posts 4 Posters 17.4k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    strekazoid
    wrote on last edited by
    #1

    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.

    1 Reply Last reply
    0
    • X Offline
      X Offline
      xsacha
      wrote on last edited by
      #2

      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?

      • Sacha
      1 Reply Last reply
      0
      • S Offline
        S Offline
        strekazoid
        wrote on last edited by
        #3

        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.

        1 Reply Last reply
        0
        • X Offline
          X Offline
          xsacha
          wrote on last edited by
          #4

          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.

          • Sacha
          1 Reply Last reply
          0
          • S Offline
            S Offline
            strekazoid
            wrote on last edited by
            #5

            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.

            1 Reply Last reply
            0
            • X Offline
              X Offline
              xsacha
              wrote on last edited by
              #6

              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)

              • Sacha
              1 Reply Last reply
              0
              • S Offline
                S Offline
                strekazoid
                wrote on last edited by
                #7

                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.

                1 Reply Last reply
                0
                • S Offline
                  S Offline
                  syrianzoro
                  wrote on last edited by
                  #8

                  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 }
                  

                  }@

                  Qt is the future

                  1 Reply Last reply
                  0
                  • X Offline
                    X Offline
                    xsacha
                    wrote on last edited by
                    #9

                    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.

                    • Sacha
                    1 Reply Last reply
                    0
                    • S Offline
                      S Offline
                      strekazoid
                      wrote on last edited by
                      #10

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

                      1 Reply Last reply
                      0
                      • X Offline
                        X Offline
                        xsacha
                        wrote on last edited by
                        #11

                        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.

                        • Sacha
                        1 Reply Last reply
                        0
                        • R Offline
                          R Offline
                          raja26
                          wrote on last edited by
                          #12

                          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.

                          1 Reply Last reply
                          0

                          • Login

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Categories
                          • Recent
                          • Tags
                          • Popular
                          • Users
                          • Groups
                          • Search
                          • Get Qt Extensions
                          • Unsolved