Loading QML Components in a ListModel
-
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/DelegateThrough GridView as you said.
Also through the QML files and the delegate:
In WidgetLargeYield.qml:
@property string text: "Test"@
A lonevariableOR
@property alias text: TextEdit.text@
An alias to a member propertyThen, 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.