Qt QML Gridview如何限制显示的项目?

时间:2013-04-07 15:14:36

标签: qt gridview qml

我是QT新手,我学会了通过连接列表模型来使用网格视图。我想将活动的观看图像限制为4而不是列表模型中的所有项目

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

网格视图区域定义如下,但它似乎在运行时显示多行图像,这不是我所期望的。我只想在整个1280 x 720屏幕上看到4个图像。       宽度:1140;身高:300

请帮助,我在星期天坚持这个: - (

1 个答案:

答案 0 :(得分:0)

添加到GridView:

flow: GridView.TopToBottom