Qt QML网格视图如何限制显示的项目？

Question

我是一名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

请帮帮我，我在星期天被卡住了 :-(

- rajeshk

---

启用裁剪：true。接下来的一行可见，因为它们正好在边界上，而QtQuick元素默认情况下不会进行裁剪。 - MartinJ

@MartinJ 感谢您的回答。是的，最终我做到了在一行中只看到几个项目。但问题在于，如果我滚动，我会看到来自上一行的图像而不是从右侧出现。我的意思是先显示第一行，然后是下一行，以此类推，而不是将所有内容保留在一行中并自动管理项目的可见性为4。 - rajeshk

Answer 1

将以下内容添加到您的 GridView 中：

flow: GridView.TopToBottom

- Dean Or