剔除可见区域之外的项目

Question

从文档：

默认渲染器不执行任何 CPU 端视口裁剪或遮挡检测。如果某些东西不应该是可见的，它就不应该被显示出来。使用Item::visible: false于不应该被绘制的项目。不添加这样的逻辑的主要原因是它增加了额外的成本，这也会损害表现良好的应用程序。

那么有没有一个技巧可以轻松做到这一点，而无需自己实施呢？

请注意，在我的情况下，可见区域之外的项目在那里，因为它们在 a 中ScrollView并且它们没有滚动到。

我想要剔除的原因是为了减少全场景重绘的 CPU 使用率。

Answer 1

这是一个您可以扩展的简单示例：

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

显然，一个完整的解决方案也将在计算中包括项目的高度。如有必要，您还可以在 x 轴上进行检查。