“Solved”How to display pictures (jpg, png) in thumbnail view using QML?

[kathy]

I have list of pictures and want to use GridView (XmlListModel or ListModel) to display pictures (jpg, png) in thumbnail view in QML. But I have no clue.

Could anyone help me?

[ZapB]

Create a list model, a custom delegate, and a GridView.

Your delegate component should simply be an Image or something similarly simple to start with that displays the source url at the desired size.

Your list model should contain ListElement items that contain the source URL of your images.

In your GridView set the "model" property to your ListModel and the "delegate" property to your delegate component.

Something along these lines (not tested):

@
ListModel {
id: imageModel
ListElement {
name: "Image 01"
imageUrl: "http://myserver/path/to/image01"
}
ListElement {
name: "Image 02"
imageUrl: "http://myserver/path/to/image02"
}
ListElement {
name: "Image 03"
imageUrl: "http://myserver/path/to/image03"
}
ListElement {
name: "Image 04"
imageUrl: "http://myserver/path/to/image04"
}
}

Component {
id: imageDelegate
Column {
width: 200
height: 200
Image { source: imageUrl }
Text { text: name }
}
}

GridView {
model: imageModel
delegate: imageDelegate
anchors.fill: parent
}
@

[Chuck Gao]

As ZapB reply, you can also use scaleMode, when use Image element to scale the original image to fit the item(thumbnail) size.

[ZapB]

Ah yes, sorry I forgot to mention the scaleMode property. Thanks for reminding.