在调整大小时不重新绘制 window

Question

我的 QML 应用程序 (Qt 5.4) 基于 Window 项。应用程序可以由用户调整大小。调整应用程序大小时，应用程序的内容将分别调整大小（使用 onWidthChanged 和 onHeightChanged）。

这一切都很好。

但是为了避免闪烁，我不想在调整应用程序大小时更新应用程序的内容。 QML 是否有可能检测用户何时实际调整 window 的大小（将鼠标按钮按住 window 的边界）并且在调整大小完成之前不重新计算内容（松开鼠标按钮)?

Answer 1

编辑：Kuba Ober 的建议非常简单和强大，我仍然会在这里留下我的答案，因为我发现它有点有趣（并且可以修改 C++ 自定义组件方法以过滤 window建议的事件）。

对不起，我已经写了一个快速而丑陋的 hack 来查看是否可行，它只涵盖了你问题的第二部分（不更新内容）。我的解决方案会阻止项目的重新绘制，但也会在请求更新时立即隐藏它（这对您来说可能不是问题）。

阅读 QQuickItem::updatePaintNode 文档后，尤其是这个短语

The function is called as a result of QQuickItem::update(), if the user has set the QQuickItem::ItemHasContents flag on the item.

我在任意 QQuickItem 上创建了一个 C++ class 来 set/unset 这个标志：

#ifndef ITEMUPDATEBLOCKER_H
#define ITEMUPDATEBLOCKER_H

#include <QObject>
#include <QQuickItem>


class ItemUpdateBlocker : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QQuickItem* target READ target WRITE setTarget NOTIFY targetChanged)
    QQuickItem* m_target;

public:
    explicit ItemUpdateBlocker(QObject *parent = 0) : QObject(parent), m_target(nullptr) {  }
    QQuickItem* target() const { return m_target; }

signals:
    void targetChanged();

private:
    static void blockUpdate(QQuickItem* target)
    {
        if (target)
            target->setFlag(QQuickItem::ItemHasContents, false);
    }

    static void unblockUpdate(QQuickItem* target)
    {
        if (target)
        {
            target->setFlag(QQuickItem::ItemHasContents, true);
            target->update();
        }
    }


public slots:
    void setTarget(QQuickItem* target)
    {
        if (m_target == target)
            return;
        unblockUpdate(m_target);
        blockUpdate(target);
        m_target = target;
        emit targetChanged();
    }
};

#endif // ITEMUPDATEBLOCKER_H

下一步是注册这个 class 以便它可以在 QML 中使用：

qmlRegisterType<ItemUpdateBlocker>("com.mycompany.qmlcomponents", 1, 0, "ItemUpdateBlocker");

您可以像这样在 QML 中使用它：

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import com.mycompany.qmlcomponents 1.0

ApplicationWindow {

    width: 640
    height: 480
    visible: true

    Rectangle {
        color: "red"
        id: root
        anchors.fill: parent

        Text {
            text: blocker.target ? "Blocked" : "Not Blocked"
        }

        Rectangle {
            color: "white"
            anchors.centerIn: parent
            width: parent.width/2
            height: parent.height/2

            ItemUpdateBlocker {
                id: blocker;
            }

            MouseArea {
                anchors.fill: parent
                onClicked: blocker.target = blocker.target ? null : parent
            }
        }
    }
}

您当然可以向拦截器添加 active 属性以简化它的使用（比使用 null target 来禁用它更漂亮），但我会保留它作为练习。

也许您可以在 Window 的宽度或高度更改时启动计时器来使用它，我还没有找到直接的方法来查找 window 是否已调整大小。

Answer 2

But to avoid flickering I don't want to update the content of the application while the applicaiton is beeing resized.

我有同样的意图，然后发现在我的情况下，当 window 不经常重绘时，它已经足以避免闪烁和高 CPU 负载。这可以用定时器来实现：

import QtQuick 2.12
import QtQuick.Controls 2.12

Window {
    id: root

    onWidthChanged: {
        redrawTimer.running ? redrawTimer.restart() : redrawTimer.start()
    }

    onHeightChanged: {
        redrawTimer.running ? redrawTimer.restart() : redrawTimer.start()
    }

    Timer {
        id: redrawTimer
        interval: 100
        onTriggered: {
            content.width  = ...
            content.height = ...
        }
    }

    // Actual content of your window, here assumed to be in a custom QML type.
    WindowContent {
        id: content
    }
}

上面的代码创建了一个 window，只有在过去 100 毫秒内没有收到调整大小事件时才会重新绘制。这样，在调整大小结束和重新绘制之间有一个很小但几乎不明显的延迟，在调整大小和重新绘制期间鼠标移动暂停之间也有类似的延迟。

这种方法尤其有效。以及具有快速 low-qualit 和慢速 high-quality 重新绘制方式的元素，例如与 SVG 源一起使用的 Qt QML Image 类型。在这种情况下，基于光栅图形的缩放速度很快，并且可以在 window 使用 QML 布局或锚点机制调整大小时完成，创建“预览”。通过设置 Image#sourceSize 重新绘制 SVG 很慢，只有在由计时器触发时才会完成，如上所示。

在调整大小时不重新绘制 window

Do not repaint window during resize

qt

qml

qt-quick

qtquick2