“Solved”How to display pictures (jpg, png) in thumbnail view using QML?
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?
3 replies
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
- }
You must log in to post a reply. Not a member yet? Register here!