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!