May 16, 2011

kathy kathy
Lab Rat
50 posts

“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

May 16, 2011

ZapB ZapB
Ant Farmer
1427 posts

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

  1. ListModel {
  2.     id: imageModel
  3.     ListElement {
  4.         name: "Image 01"
  5.         imageUrl: "http://myserver/path/to/image01"
  6.     }
  7.     ListElement {
  8.         name: "Image 02"
  9.         imageUrl: "http://myserver/path/to/image02"
  10.     }
  11.     ListElement {
  12.         name: "Image 03"
  13.         imageUrl: "http://myserver/path/to/image03"
  14.     }
  15.     ListElement {
  16.         name: "Image 04"
  17.         imageUrl: "http://myserver/path/to/image04"
  18.     }
  19. }
  20.  
  21. Component {
  22.     id: imageDelegate
  23.     Column {
  24.         width: 200
  25.         height: 200
  26.         Image { source: imageUrl }
  27.         Text { text: name }
  28.     }
  29.  }
  30.  
  31. GridView {
  32.     model: imageModel
  33.     delegate: imageDelegate
  34.     anchors.fill: parent
  35. }

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

May 17, 2011

Chuck Gao Chuck Gao
Lab Rat
343 posts

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

 Signature 

Chuck

May 17, 2011

ZapB ZapB
Ant Farmer
1427 posts

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

 Signature 

Nokia Certified Qt Specialist
Interested in hearing about Qt related work

 
  ‹‹ [Solved]help for XmlListModel      [SOLVED] Remove entire QStringList ››

You must log in to post a reply. Not a member yet? Register here!