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. Loading QML Components in a ListModel
Forum Updated to NodeBB v4.3 + New Features

Loading QML Components in a ListModel

Scheduled Pinned Locked Moved QML and Qt Quick
24 Posts 4 Posters 24.5k 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.
  • M Offline
    M Offline
    mario
    wrote on last edited by
    #2

    This seems to work but it might not be what you wanted?!:

    @
    VisualItemModel {
    Loader { source: "WidgetLarge.qml" }
    }
    @

    1 Reply Last reply
    0
    • K Offline
      K Offline
      kyleplattner
      wrote on last edited by
      #3

      It works for you in a ListModel? I tried it and it gave me the same error:

      @ListModel {
      ListElement {
      VisualItemModel {
      Loader { source: "WidgetLarge.qml" }
      }
      }

      ListElement {
      VisualItemModel {
      Loader { source: "WidgetLarge.qml" }
      }
      }
      ListElement {
      VisualItemModel {
      Loader { source: "WidgetLarge.qml" }
      }
      }

      }@

      1 Reply Last reply
      0
      • A Offline
        A Offline
        andre
        wrote on last edited by
        #4

        I think you misunderstand the idea of models and views.
        A model supplies data to a view. The view will create a delegate to display each piece of data. There is no need for you to that yourself. If you just need a load of the same QML items, then simply create them and put them in a Row, Column, Grid or Flow.

        Having said that, something like this may work:
        @
        ListView {
        id: view
        model: 3
        delegate: WidgetLarge
        }
        @

        1 Reply Last reply
        0
        • K Offline
          K Offline
          kyleplattner
          wrote on last edited by
          #5

          That goes in my model file or in the file where the gridview is implemented.

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

            You are thinking about this the wrong way.
            Instead, you should have:
            @ListModel {
            id: myModel
            ListElement {
            element: "WidgetLarge.qml"
            }
            ListElement {
            element: "WidgetSmall.qml"
            }
            ListElement {
            element: "WidgetMedium.qml"
            }
            }@

            Then inside the Delegate (you must have a delegate for this anyway):
            @
            Component {
            id: myDelegate
            Item {
            Loader { source: element }
            }
            }
            @

            Then you have your main View (you must also have this) that refers to the delegate and model:
            @
            ListView {
            model: myModel
            delegate: myDelegate
            }
            @

            Makes sense? :)

            • Sacha
            1 Reply Last reply
            0
            • A Offline
              A Offline
              andre
              wrote on last edited by
              #7

              [quote author="kyleplattner" date="1292425419"]That goes in my model file or in the file where the gridview is implemented. [/quote]

              It seems you don't need a model. At least, you're not showing anything that would require one. If you just replace the ListView in my example with a GridView, you should be done (though you may need to set the size for the items in the grid view).

              Perhaps you should explain a bit better what you want to achieve exactly?

              1 Reply Last reply
              0
              • K Offline
                K Offline
                kyleplattner
                wrote on last edited by
                #8

                Got this working, thanks!

                1 Reply Last reply
                0
                • K Offline
                  K Offline
                  kyleplattner
                  wrote on last edited by
                  #9

                  Just one last problem, when I have 3 qml elements positioned vertically one on top of another, things seemed to get messed up after the first move. For instance I can only move the top item once. If anyone knows the answer I would appreciate your help. Thanks. Code Below:

                  @import Qt 4.7

                  Rectangle {
                  width: 186
                  height: 288
                  color: "#222222"

                  Component {
                          id: widgetdelegate
                      Item {
                          width: grid.cellWidth; height: grid.cellHeight
                         Loader { source: element
                              id: im
                              state: "inactive"
                  
                              anchors.centerIn: parent
                              width: grid.cellWidth; height: grid.cellHeight
                              smooth: true
                             //fillMode: Image.PreserveAspectFit
                              SequentialAnimation on rotation {
                                  NumberAnimation { to:  2; duration: 50 }
                                  NumberAnimation { to: -2; duration: 100 }
                                  NumberAnimation { to:   0; duration: 50 }
                                  running: im.state == "squiggle"
                                  loops: Animation.Infinite
                              }
                              Rectangle {
                                  id: imRect
                                  anchors.fill: parent; radius: 5
                                  anchors.centerIn: parent
                                  border.color: "#ffffff"; color: "transparent"; border.width: 6;
                                  opacity: 0
                              }
                              states: [
                                  State {
                                      name: "squiggle";
                                      when: (grid.firstIndexDrag != -1) && (grid.firstIndexDrag != index)
                                  },
                                  State {
                                      name: "inactive";
                                      when: (grid.firstIndexDrag == -1) || (grid.firstIndexDrag == index)
                                      PropertyChanges { target: im; rotation: 0}
                                  }
                              ]
                          }
                        
                          Rectangle {
                              id: backgroundcircle
                              width: 20; height: 20; radius: 20
                              smooth: true
                              anchors.centerIn: parent
                              color: "#222222";
                              opacity: 0
                  
                          }
                          states: [
                              State {
                                  name: "inDrag"
                                  when: index == grid.firstIndexDrag
                                  PropertyChanges { target: backgroundcircle; opacity: 1 }
                                  PropertyChanges { target: imRect; opacity: 1 }
                                  PropertyChanges { target: im; parent: container }
                                  PropertyChanges { target: im; width: (grid.cellWidth - 10) / 1 }
                                  PropertyChanges { target: im; height: (grid.cellHeight - 10) / 1 }
                                  PropertyChanges { target: im; anchors.centerIn: undefined }
                                  PropertyChanges { target: im; x: coords.mouseX - im.width / 2 }
                                  PropertyChanges { target: im; y: coords.mouseY - im.height / 2 }
                              }
                          ]
                          transitions: [
                              Transition { NumberAnimation { properties: "width, height, opacity"; duration: 300; easing.type: Easing.InOutQuad } }
                          ]
                      }
                  }
                  
                  
                  
                  
                  
                   GridView {
                           property int firstIndexDrag: -1
                  
                           id: grid
                           x: 0; y: 0
                           interactive: false
                  
                  
                           anchors.fill: parent
                           cellWidth: 186; cellHeight: 96;
                  
                           model: WidgetModelLarge { id: widgetmodel }
                           delegate: widgetdelegate
                           Item {
                               id: container
                               anchors.fill: parent
                  
                  
                           }
                           MouseArea {
                               id: coords
                               anchors.fill: parent
                               onReleased: {
                                   if (grid.firstIndexDrag != -1)
                                       widgetmodel.move(grid.firstIndexDrag,grid.indexAt(mouseX, mouseY),1)
                                   grid.firstIndexDrag = -1
                               }
                               onPressAndHold: {
                                   grid.firstIndexDrag=grid.indexAt(mouseX, mouseY)
                               }
                           }
                       }
                  
                  
                  
                  
                   }
                  

                  @

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

                    It's working fine here.

                    I did notice that I had issues if I had more than 3 objects (I had 9 at first). Of course, with your chosen sizes, only 3 objects fit in the view. It screws up if you have more.

                    When I had 3 objects, I could move them correctly.

                    Perhaps the code in 'element' is important?

                    • Sacha
                    1 Reply Last reply
                    0
                    • K Offline
                      K Offline
                      kyleplattner
                      wrote on last edited by
                      #11

                      9 works great for me and 3 messes up. I cannot move the upper most item more than once.

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

                        But in the above code, do you have 3 elements defined in your model or still 9?
                        I know only 3 are visible. I'm trying to confirm how many are in your model.

                        Also, what's in the element filename?

                        • Sacha
                        1 Reply Last reply
                        0
                        • K Offline
                          K Offline
                          kyleplattner
                          wrote on last edited by
                          #13

                          I only have 3,

                          @ListModel {
                          id: widgetdelegate
                          ListElement {
                          element: "WidgetLargeYield.qml"
                          }
                          ListElement {
                          element: "WidgetLargeMoisture.qml"
                          }
                          ListElement {
                          element: "WidgetLargeWeight.qml"
                          }
                          }
                          @

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

                            Perhaps it is to do with the new element loaders.

                            Because I can tell you without doubt, the original code (with 9 pictures, but changed to 3) works flawlessly.

                            Have you tested these new 'element' models with 3 and with 9?

                            I think it has nothing to do with having 3 or 9. It's just the Widget QML files.

                            • Sacha
                            1 Reply Last reply
                            0
                            • K Offline
                              K Offline
                              kyleplattner
                              wrote on last edited by
                              #15

                              Do you mean using the element property within my list model?

                              I also have a similar setup with two items and it works flawlessly.

                              Could it be because they are arranged vertically?

                              1 Reply Last reply
                              0
                              • K Offline
                                K Offline
                                kyleplattner
                                wrote on last edited by
                                #16

                                With more testing it seems like the index shifts to be one off after the first move. So in other words, the first move works flawlessly and then the index is off by one. Any ideas?

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

                                  Like I said, it works flawlessly here. I have moved the three items several times in random positions and tried all sorts of combinations.

                                  I don't care about the element property. I care about the code it passes (through the Loader type). That is, the code in 'WidgetLargeWeight.qml' and so on. This is the only area that I can't test. Hence, it could be the area causing trouble. Especially since it is directly related to the delegates that you are having trouble with.

                                  • Sacha
                                  1 Reply Last reply
                                  0
                                  • K Offline
                                    K Offline
                                    kyleplattner
                                    wrote on last edited by
                                    #18

                                    There is nothing special about the widgets that would cause a problem to my knowledge. Here is the code behind one:

                                    @import Qt 4.7

                                    Rectangle {
                                        id: button
                                        x: 0
                                        y: 0
                                        width: 186
                                        height: 96
                                        gradient: Gradient {
                                            GradientStop {
                                                id: gradientstop1
                                                position: 0
                                                color: "#ffffff"
                                            }
                                    
                                            GradientStop {
                                                id: gradientstop2
                                                position: 0.22
                                                color: "#00ff36"
                                            }
                                        }
                                        clip: true
                                    
                                        property alias title: titleText.text
                                        property alias value: valueText.text
                                        property alias small: smallText.text
                                    
                                        property alias textEnabled: textBox.visible
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                        Rectangle {
                                            id: rectangle1
                                            x: -1
                                            y: -1
                                            width: 188
                                            height: 98
                                            color: "#00000000"
                                            radius: 7
                                            border.color: "#000000"
                                            border.width: 5
                                            opacity: 1
                                        }
                                    
                                        Rectangle {
                                            id: rectangle2
                                            x: -11
                                            y: -46
                                            width: 210
                                            height: 100
                                            color: "#ffffff"
                                            radius: 27
                                            opacity: 0.3
                                        }
                                    
                                        MouseArea {
                                            id: mouse_area1
                                            x: 0
                                            y: 0
                                            width: 186
                                            height: 96
                                            onPressed: button.state = "State1"
                                            onReleased: button.state = "base state"
                                        }
                                    
                                        // Put all text elements in a rectangle to control visibility
                                        Rectangle {
                                            id: textBox
                                    
                                            visible: true
                                    
                                            Text {
                                                id: titleText
                                                width: button.width
                                                y: 8
                                                text: "Yield"
                                                horizontalAlignment: Text.AlignHCenter
                                                font.pixelSize: 20
                                                font.family: "Arial"
                                                font.bold: true
                                            }
                                    
                                            Text {
                                                id: valueText
                                                x: 0
                                                width: button.width
                                                y: 31
                                                text: "00"
                                                horizontalAlignment: Text.AlignHCenter
                                                font.pixelSize: 40
                                                font.family: "Arial"
                                                font.bold: true
                                            }
                                    
                                            Text {
                                                id: smallText
                                                width: button.width
                                                y: 72
                                                text: "bu/acre (dry) instant"
                                                horizontalAlignment: Text.AlignHCenter
                                                font.family: "Arial"
                                                font.pixelSize: 14
                                                font.bold: true
                                            }
                                        }
                                    
                                        states: [
                                            State {
                                                name: "State1"
                                    
                                                PropertyChanges {
                                                    target: gradientstop1
                                                    position: 0
                                                    color: "#77e68d"
                                                }
                                    
                                                PropertyChanges {
                                                    target: gradientstop2
                                                    position: 0.22
                                                    color: "#00ff36"
                                                }
                                    
                                                PropertyChanges {
                                                    target: rectangle2
                                                    x: -12
                                                    y: 46
                                                }
                                            },
                                            State {
                                                name: "Yellow"
                                                when: yieldIndicator > 100
                                    
                                                PropertyChanges {
                                                    target: gradientstop1
                                                    position: 0
                                                    color: "#ffffff"
                                                }
                                    
                                                PropertyChanges {
                                                    target: gradientstop2
                                                    position: 0.22
                                                    color: "#fff23a"
                                                }
                                            },
                                            State {
                                                name: "Red"
                                                when: yieldIndicator > 110
                                                PropertyChanges {
                                                    target: gradientstop1
                                                    position: 0
                                                    color: "#ffffff"
                                                }
                                    
                                                PropertyChanges {
                                                    target: gradientstop2
                                                    position: 0.22
                                                    color: "#d5292b"
                                                }
                                            }
                                        ]
                                    
                                    
                                    
                                    }
                                    

                                    @

                                    1 Reply Last reply
                                    0
                                    • K Offline
                                      K Offline
                                      kyleplattner
                                      wrote on last edited by
                                      #19

                                      And you are sure there is no difference between the code you are testing with and what I am using?

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

                                        Yes, exactly no difference except for the element's that I don't have code for.

                                        Edit: Just tried it with your loader code (posted above) and I get the same glitch as when I had 9 objects (instead of 3). I will investigate further.

                                        Edit: I can reproduce without the loader code now!

                                        Edit: Found issue!

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

                                          Ok, I have fixed the issue. It's in the Main.qml:

                                          @onReleased: {
                                          if (grid.firstIndexDrag != -1)
                                          {
                                          var moveTo = grid.indexAt(mouseX, mouseY)
                                          if (moveTo > grid.firstIndexDrag)
                                          widgetModel.move(moveTo,grid.firstIndexDrag,1)
                                          else
                                          widgetModel.move(grid.firstIndexDrag,moveTo,1)
                                          grid.firstIndexDrag = -1
                                          }
                                          }@
                                          Works with 9 objects, 3 objects and your loader code now. It was just the method I was using to test it that was flawed. Dragging items up rather than down ;).

                                          If the location being moved to is larger, the position of the previous item has its index change before the action can be performed. Delayed movement would remove this issue.

                                          The above code works too, though.

                                          • Sacha
                                          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