Qt QML Gridview How to limit items shown?

Question

I'm a QT newbie, i have learned to use grid view by connecting a list model. I want to limit the active viewing images to be just 4 instead of all the items in the list model

Rectangle {
  id: Rect1;
  width: 1280; height: 720;

  ListModel {

  id: listAssetModel
      ListElement { Movie: "Arrow"; PosterURL: "posters/Arrow.jpg" }
      ListElement { Movie: "Avatar"; PosterURL: "posters/Avatar.jpg" }
      ListElement { Movie: "Avenge"; PosterURL: "posters/Avenge.jpg" }
      ListElement { Movie: "Arrow"; PosterURL: "posters/Arrow.jpg" }
      ListElement { Movie: "Avatar"; PosterURL: "posters/Avatar.jpg" }
      ListElement { Movie: "Avenge"; PosterURL: "posters/Avenge.jpg" }
      ListElement { Movie: "Arrow"; PosterURL: "posters/Arrow.jpg" }
      ListElement { Movie: "Avatar"; PosterURL: "posters/Avatar.jpg" }
      ListElement { Movie: "Avenge"; PosterURL: "posters/Avenge.jpg" }      
  } 

  GridView {
    id: gridAssetPreview;
    currentIndex: -1 // default - no focus on poster
    x: 56; y: 189
    width: 1140; height: 300
    focus: true
    cellWidth: 275; cellHeight: 300 // keeps the poster preview images aligned
    highlight: appHighlight
    model: listAssetModel
    delegate: appDelegate
  }

  Component {
    id: appDelegate

    Item {
      width: 250; height: 350 // controls the appHighlight size

      Image {
        id: imgPosterPreview
        width: 225; height: 325
        source: PosterURL
        smooth: true
      }
      Text {
        id: textAssetName
        anchors { // draw this below and centre to the image
          top: imgPosterPreview.bottom;
          horizontalCenter: imgPosterPreview.horizontalCenter
        }
        text: AssetName
        font.pointSize: 16
        color:"white"
        smooth: true
      }
    }
  }
}

Grid view area is defined as below, but it seems on running it shows multiple rows of images which is not something i expect. I just want to see only 4 images in the whole 1280 x 720 screen. width: 1140; height: 300

Please help, im stuck with this on my Sunday :-(

Set clip: true. The next row is visible since they are right on the boundary and QtQuick elements don't clip by default. — MartinJ
@MartinJ thanks for your answer. Yes i did that finally to get see only few items in one row. But the trouble with that is, if i scroll i see images come from next row up instead of coming from the right side. i mean to say first row shown first then next row like that instead of keeping everything in one row and manage the items visibility to 4 automatically. — rajeshk

Dean Or Dean Or · Accepted Answer · 2014-04-19T01:40:48

1

votes

Add to your GridView:

flow: GridView.TopToBottom

Qt QML Gridview How to limit items shown?

1 Answers