Culling items that are outside the visible area

Question

From the docs:

The default renderer does not do any CPU-side viewport clipping nor occlusion detection. If something is not supposed to be visible, it

Answer 1

Here is a trivial example you can extend upon:

Window {
  visible: true
  width: 640
  height: 480

  Rectangle {
    anchors.centerIn: parent
    width: 200
    height: 200
    color: "yellow"

    Flickable {
      id: view
      anchors.fill: parent
      contentWidth: 200
      contentHeight: col.height
      property real span : contentY + height
      Column {
        id: col
        x: 90
        spacing: 2
        Repeater {
          model: 50
          delegate: Rectangle {
            width: 10
            height: 10
            color: inView ? "blue" : "red"
            property bool inView: y > view.contentY && y < view.span
          }
        }
      }
    }
  }
}

Obviously, a full-proof solution would also include the item's height in the calculation. You can also do the check in the x axis if necessary.

Answer 2

To add to dtech's answer, I just learned that there are QML components, such as GridView and ListView, that do culling automatically.