Qt Quick Window/Frame with Inner Shadow在调整大小时闪烁

Posted 2023-02-14

【中文标题】Qt Quick Window/Frame with Inner Shadow在调整大小时闪烁

【英文标题】：Qt Quick Window/Frame with Inner Shadow flickers while resizing

【发布时间】：2020-01-20 03:08:32

【问题描述】：

当我调整包含 Frame 和 InnerShadow 的 Qt Quick ApplicationWindow 的大小时，我看到闪烁和视觉伪影。当我不替换默认边框或为Frame 对象使用简单矩形时，情况并非如此。

我在运行 64 位 Arch Linux 的笔记本电脑上对此进行了测试。它有一个 Nvidia GTX 1060 Max Q 显卡和一个集成的 Intel 显卡。我在有和没有bumblebee 的情况下运行了代码。

有什么方法可以解决或消除这种闪烁？这很糟糕。我的代码和一些屏幕截图如下

编辑：我尝试设置 AA_ShareOpenGLContexts 和 AA_UseOpenGLES（及其软件/桌面变体）属性，但没有成功。

更新：我在这里创建了一个问题：https://bugreports.qt.io/browse/QTBUG-81519，但我仍然希望有人可以设计一个解决方法。

test.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14

ApplicationWindow
    id: main
    width: 2*screen.width/3
    height: 2*screen.height/3
    title: "Test ApplicationWindow"  
    color: activeColorPalette.window 
    visible:true
    SystemPalette 
        id: activeColorPalette
        colorGroup: SystemPalette.Active
        
    Frame
        anchors.fill: parent 
        anchors.margins: 10
        background: Item
            id: root
            anchors.fill: parent
            Rectangle
                anchors.fill: parent
                anchors.margins: 1
                radius: 16
                color: activeColorPalette.window
            
            InnerShadow 
                anchors.fill: root
                horizontalOffset: 0
                verticalOffset: 0
                source: root
                radius: 16
                color: activeColorPalette.shadow
                spread: 0.6        
                samples: 32        
                cached: true
                fast:true
            
        
    

没有闪烁或伪影的窗口

调整大小时出现闪烁/视觉伪影的窗口

【参考方案1】：

我找到了一种解决方法，可以在调整大小时消除视觉伪影。

在我的问题代码中，InnerShadow 使用 Item QML 类型作为源，默认情况下它是透明的，并包含我在其中添加的灰色 Rectangle。透明源Item 和其中的较小子Rectangle 之间的视觉区别是InnerShadow 用来计算其中的阴影渐变的。最终结果是装饰性阴影边框。但是，调整应用程序的大小会导致有时会留下难看的视觉伪影。注意：将外部的Item 更改为透明的Rectangle 没有明显的效果。

但是当我将最里面的灰色矩形封装到另一个透明组件中时，比如

Item 透明Rectangle 灰色内Rectangle

或者喜欢

Rectangle透明Rectangle灰色内Rectangle

除了将中间透明Rectangle设置为InnerShadow的来源之外，还消除了视觉伪影。下面是 test_workaround.qml 的工作代码，您可以将其与上面的 test.qml 进行比较。

test_workaround.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14

ApplicationWindow
    id: main
    width: 2*screen.width/3
    height: 2*screen.height/3
    title: "Test ApplicationWindow"  
    color: activeColorPalette.window 
    visible:true
    SystemPalette 
        id: activeColorPalette
        colorGroup: SystemPalette.Active
        
    Frame
        anchors.fill: parent 
        anchors.margins: 10
        background: Item
            id: root
            anchors.fill: parent
            Rectangle
                 id: middleRect
                 anchors.fill: parent
                 color: "transparent"           
                Rectangle
                    id: innerRect
                    anchors.fill: parent
                    anchors.margins: 1
                    radius: 16
                    color: activeColorPalette.window
                
            
            InnerShadow 
                anchors.fill: root
                horizontalOffset: 0
                verticalOffset: 0
                source: middleRect
                radius: 16
                color: activeColorPalette.shadow
                spread: 0.6        
                samples: 32        
                cached: true
                fast:true
                smooth:true