剔除可见区域之外的项目

Question

来自docs：

The default renderer does not do any CPU-side viewport clipping nor occlusion detection. If something is not supposed to be visible, it should not be shown. Use Item::visible: false for items that should not be drawn. The primary reason for not adding such logic is that it adds additional cost which would also hurt applications that took care in behaving well.

那么有没有什么技巧可以轻松做到而不用自己动手呢？

请注意，在我的例子中，可见区域之外的项目在那里，因为它们在 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 轴上进行检查。

Answer 2

为了补充 dtech 的回答，我刚刚了解到有 QML 组件，例如 GridView 和 ListView，可以自动剔除。

剔除可见区域之外的项目

Culling items that are outside the visible area

qt

scroll

culling

qml

qtquick2