QML 窗口在更改大小和位置时弹跳

Question

我的目的是在调整大小时将窗口粘贴到屏幕的右对齐。 在窗口宽度和 x（绑定到宽度）的动画（或更改显式）期间，ApplicationWindow 向左弹跳（显式更改闪烁）。

我已经在寻找解决方案，但没有什么对我有用。 添加属性：

QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);

帮了很多忙，但窗口仍然左右弹跳。

main.qml:

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

ApplicationWindow {
    id: root
    height: 300
    width: 300
    visible: true
    flags: Qt.FramelessWindowHint
    x: Screen.width - width

    Material.theme: Material.Dark
    
    NumberAnimation on width {
        id: animation
        easing.type: Easing.InOutQuad
    }

    property var lowerSize: true

    Rectangle {
        anchors.fill: parent
        
        Button { 
            anchors.centerIn: parent
            
            enabled: !animation.running
            text: lowerSize ? 'Size up' : 'Size down'
            onClicked: { 
                animation.from = lowerSize ? 300 : 600
                animation.to = lowerSize ? 600 : 300
                animation.start()
                lowerSize = !lowerSize
            }
        }
    }
}

我已经在 github qml-flickering-example 上制作了用于重现问题的示例代码。

Answer 1

我在 macOS 上的行为与您在 Windows 中看到的略有不同（对我来说收缩时口吃），但它确实仍然口吃。

这似乎是因为您正在为宽度设置动画，然后依赖 QML 绑定来更新 x。因此，x 更新比宽度更新滞后一帧。

使用 ParallelAnimation 并同时为其设置动画为我修复了它：

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

ApplicationWindow {
    id: root
    height: 300
    width: 300
    visible: true
    flags: Qt.FramelessWindowHint

    Component.onCompleted: {
        x = Screen.width - width;
        y = 0;
    }

    Material.theme: Material.Dark

    ParallelAnimation {
        id: animation

        NumberAnimation {
            id: widthAnimation
            target: root
            property: "width"
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            id: xAnimation
            target: root
            property: "x"
            easing.type: Easing.InOutQuad
        }
    }

    property bool lowerSize: true

    Rectangle {
        anchors.fill: parent
        
        Button { 
            anchors.centerIn: parent
            
            enabled: !animation.running
            text: lowerSize ? 'Size up' : 'Size down'
            onClicked: { 
                widthAnimation.from = lowerSize ? 300 : 600
                widthAnimation.to = lowerSize ? 600 : 300

                xAnimation.from = lowerSize ? Screen.width - 300 : Screen.width - 600
                xAnimation.to = lowerSize ? Screen.width - 600 : Screen.width - 300

                animation.start()
                lowerSize = !lowerSize
            }
        }
    }
}