Loading QML Components in a ListModel

kyleplattner

Got this working, thanks!

kyleplattner

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




 }

@

xsacha

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?

kyleplattner

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

xsacha

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?

kyleplattner

I only have 3,

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

xsacha

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.

kyleplattner

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?

kyleplattner

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?

xsacha

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.

kyleplattner

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



}

@

kyleplattner

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

xsacha

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!

xsacha

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.

kyleplattner

You're incredible. Works perfectly.

kyleplattner

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?

xsacha

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.