Loading QML Components in a ListModel



  • I want to do this but it gives me a "cannot contain nested elements" error. Any ideas of how to accomplish the same thing in a different way?

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

     }@


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

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



  • 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" }
    }
    }

    }@



  • 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
    }
    @



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



  • 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? :)



  • [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?



  • Got this working, thanks!



  • 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)
                 }
             }
         }
    
    
    
    
     }
    

    @



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



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



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



  • I only have 3,

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



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



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



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



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



  • 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"
                }
            }
        ]
    
    
    
    }
    

    @



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



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



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



  • You're incredible. Works perfectly.



  • Here is one more stretch:

    If my QML items are being loaded into my Gridview from a model:

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

    Each one of those .qml elements has a text property alias. How do I pass on the value? Through the model or through the page with the gridview?



  • Well there are a few options.
    Through model:
    @ListElement {
    element: "WidgetLargeYield.qml"
    text: "Test"
    }@
    This can be referenced in GridView/Delegate

    Through GridView as you said.

    Also through the QML files and the delegate:
    In WidgetLargeYield.qml:
    @property string text: "Test"@
    A lonevariable

    OR

    @property alias text: TextEdit.text@
    An alias to a member property

    Then, inside your delegate:
    @ Loader { id: myLoader; source: element }@
    You can now reference the text variable with myLoader.text in GridView, delegate and the widget QML file.


Log in to reply
 

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