QML DropShadow 有时渲染不好答案

【问题标题】：QML DropShadow sometimes renders badlyQML DropShadow 有时渲染不好
【发布时间】：2020-09-06 19:35:12
【问题描述】：

我正在使用 QML 的内置 DropShadow 类型（导入 QtGraphicalEffects）来生成包含在 Item 中的一些矩形的阴影。 DropShadow 也是上述Item 的子项。但是有时阴影渲染得非常糟糕。我正在动态创建屏幕并将其添加到 SwipeView；代码如下：

swipeView.addItem(tasksScreen.createObject(swipeView))
swipeView.incrementCurrentIndex()

“tasksScreen”是矩形和 DropShadow 所属的屏幕。以下视频描述了问题和产生此行为的代码：

https://yadi.sk/i/mwl_8IZmm_jetQ

【问题讨论】：

标签： qt qml

【解决方案1】：

我认为问题在于您将 DropShadow 设为其源的子级 - 这会创建循环依赖项。

相反，尝试将其设置为您的 Item 的兄弟，或者甚至更好，将其设置为您的 Item 的 layer.effect。

您可以在 DropShadow 文档中看到这些不同的技术：

https://doc.qt.io/qt-5/qml-qtgraphicaleffects-dropshadow.html

【讨论】：

【解决方案2】：

问题是代码中的源属性，您已将源设置为代码中的父项。将源作为您的视觉对象（矩形）。我附上了代码供您参考。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0

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

    Component {
        id: swipeviewComponentId
        Item {
            id: itemId
            Rectangle {
                id: rectangleId
                anchors.fill: parent
                anchors.margins: 10
                radius: 10
            }
            DropShadow {
                anchors.fill: source
                horizontalOffset: 3
                verticalOffset: 3
                radius: 8.0
                samples: 17
                color: "#80000000"
                source: rectangleId
            }
        }
    }

    Column {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        SwipeView {
            id: swipeViewId
            width: parent.width
            height: parent.height - addButtonId.height - (2 * parent.spacing) - pageIndicatorId.height
        }

        PageIndicator {
            id: pageIndicatorId
            currentIndex: swipeViewId.currentIndex
            count: swipeViewId.count
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Button {
            id: addButtonId
            width: parent.width
            height: 40
            text: "Add item"
            onClicked: {
                swipeViewId.addItem(swipeviewComponentId.createObject(swipeViewId,
                                                                      {height: swipeViewId.height, width: swipeViewId.width}))
                swipeViewId.incrementCurrentIndex()
            }
        }
    }
}

【讨论】：