QML实现点格纸组件缩放时帧率低，大量矩形属性绑定重计算卡顿优化问题

核心问题原因 #

你当前的实现生成了200*200=4万个Rectangle实例，哪怕这些圆点不在可视区域内，只要contentScale属性变更，所有实例的x/y绑定都会重新计算，同时QML场景图还要遍历所有Item做状态更新，这是帧率不达标的核心原因。

最优解决方案：使用Canvas按需绘制可视区域点 #

完全放弃用Repeater生成大量Item的思路，改用Canvas只绘制当前可视范围内的圆点，每次重绘仅需处理几十到上百个点，计算开销可以忽略不计，稳定跑满60fps。

优化后的代码实现 #

DottedPaper.qml

import QtQuick 2.15

Canvas {
    id: page
    property int spacing: 50
    property real contentScale: 1.0
    // 接收Flickable的可视区域参数
    property real flickOffsetX: 0
    property real flickOffsetY: 0
    property real flickWidth: 0
    property real flickHeight: 0

    onPaint: {
        const ctx = getContext("2d")
        ctx.clearRect(0, 0, width, height)
        ctx.fillStyle = "red"
        const scaledSpacing = spacing * contentScale
        // 计算可视区域内的点的行列范围
        const startCol = Math.floor(flickOffsetX / scaledSpacing)
        const endCol = Math.ceil((flickOffsetX + flickWidth) / scaledSpacing)
        const startRow = Math.floor(flickOffsetY / scaledSpacing)
        const endRow = Math.ceil((flickOffsetY + flickHeight) / scaledSpacing)
        // 仅绘制可视范围内的点
        for (let col = startCol; col <= endCol; col++) {
            for (let row = startRow; row <= endRow; row++) {
                const x = col * scaledSpacing + 2
                const y = row * scaledSpacing + 2
                ctx.beginPath()
                ctx.arc(x, y, 2, 0, 2 * Math.PI)
                ctx.fill()
            }
        }
    }

    // 属性变化时触发重绘
    Connections {
        target: page
        function onContentScaleChanged() { page.requestPaint() }
        function onFlickOffsetXChanged() { page.requestPaint() }
        function onFlickOffsetYChanged() { page.requestPaint() }
        function onFlickWidthChanged() { page.requestPaint() }
        function onFlickHeightChanged() { page.requestPaint() }
    }
}

主文件代码

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{
        id: flick
        clip: true
        anchors.fill: parent
        contentWidth: 10000
        contentHeight: 10000
        DottedPaper{
            id: paper
            anchors.fill: parent
            flickOffsetX: flick.contentX
            flickOffsetY: flick.contentY
            flickWidth: flick.width
            flickHeight: flick.height
        }
    }

    Slider{
        from: 1
        to: 3
        onValueChanged: paper.contentScale = value
    }
}

更高性能可选方案：ShaderEffect GPU渲染 #

如果需要支持超大缩放范围、更高的渲染效率，可以直接用ShaderEffect实现GPU级别的点格渲染，完全消除CPU侧的计算开销：

import QtQuick 2.15

ShaderEffect {
    id: page
    property int spacing: 50
    property real contentScale: 1.0
    property real offsetX: 0
    property real offsetY: 0
    property color dotColor: "red"
    property real dotRadius: 2

    fragmentShader: "
        uniform lowp float qt_Opacity;
        uniform highp float spacing;
        uniform highp float contentScale;
        uniform highp float offsetX;
        uniform highp float offsetY;
        uniform lowp vec4 dotColor;
        uniform highp float dotRadius;
        void main() {
            highp float scaledSpacing = spacing * contentScale;
            highp vec2 pos = vec2(gl_FragCoord.x + offsetX, gl_FragCoord.y + offsetY);
            highp vec2 gridPos = mod(pos, scaledSpacing);
            highp float dist = distance(gridPos, vec2(scaledSpacing/2.0));
            gl_FragColor = dist < dotRadius ? dotColor * qt_Opacity : vec4(0.0);
        }
    "
}

额外优化注意点 #

• 不要给大尺寸Item开启clip属性，会触发额外的离屏渲染开销，原实现中DottedPaper的clip可以直接删除
• 避免生成超出可视范围的Item，QML中不可见的Item依然会参与属性绑定、布局计算等流程，存在固定开销
• 如果一定要用Repeater方案，需要实现视口裁剪逻辑，动态调整Repeater的model数量，仅生成可视区域内的Item，但是实现复杂度高，性能远不如前两种方案，不推荐。

内容的提问来源于stack exchange，提问作者user1466885