QML 为大量矩形设置动画时性能缓慢

Question

我正在为我的 QML 应用程序创建一个“虚线纸”组件。本质上，这些组件由用户可以放大的虚线背景组成。为了创建它，我使用了以下代码：

DottedPaper.qml

import QtQuick 2.15

Rectangle{
    id: page

    property int spacing: 50
    // this property changes the spacing between the dots
    property real contentScale: 1.0

    Repeater{
        id: rowRepeater
        model: 200
        Repeater{
            id: row
            property int rowIndex: index
            model: 200
            Rectangle{
                id: circle
                color: "red"
                width: 4; height: 4
                x: index * spacing * page.contentScale + width/2;
                y: rowIndex * spacing * page.contentScale+ height/2
                radius: width/2
            }
        }
    }
}

然后在我的主文件中，我有以下内容：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Flickable{
        clip: true // doesn't improve anything
        anchors.fill: parent
        contentWidth: paper.width
        contentHeight: paper.height
        DottedPaper{
            id: paper
            width: 10000; height: 10000;
            clip: true
        }
    }

    // the slider changes the content scale of the dotted paper
    Slider{
        from: 1
        to: 3
        onValueChanged: paper.contentScale = value
    }
}

这段代码的问题是它很慢。检查应用程序后，内容不会以 60 fps 的速度呈现，但我的桌面上的速度约为 45 - 50 fps。我怀疑问题在于 QML 正在重新评估背景中每个圆圈的 contentScale 属性绑定，即使圆圈在屏幕上不可见。防止这种情况的最佳方法是什么？

Answer 1

如果您将中继器更改为 ListViews，效果会更好。那是因为 ListView 足够聪明，只能根据需要为可见空间创建足够的委托。 （起初我认为 GridView 可以工作，但这并不能让您对行/列进行足够的控制。）

Rectangle{
    id: page

    property int cellWidth: 50 * contentScale
    property int dotWidth: 4
    // this property changes the spacing between the dots
    property real contentScale: 1.0

    ListView {
        id: grid
        model: 200
        anchors.fill: parent
        anchors.leftMargin: page.dotWidth / 2
        anchors.topMargin: page.dotWidth / 2
        spacing: page.cellWidth - page.dotWidth

        delegate: ListView {
            model: 200
            width: window.width
            height: page.dotWidth
            orientation: ListView.Horizontal
            spacing: page.cellWidth - page.dotWidth
            property int rowIndex: index

            delegate: Rectangle{
                id: circle
                color: "red"
                width: page.dotWidth; height: page.dotWidth
                radius: width/2
            }
        }
    }
}