QML

Question

我正在尝试将 DropShadow 效果应用到我的矩形中。完成后，里面的文字和图标变得模糊。知道如何解决吗？

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

App {    
    Rectangle {
        id: buttonOverview
        width: app.width * 0.12
        height: buttonQuit.width
        color: "#439fd0"
        radius: 3
        anchors.left: parent.left
        anchors.leftMargin: app.width * 0.034
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#48a4d5"
            }

            GradientStop {
                position: 1
                color: "#01618c"
            }
        }
        AppImage {
            id: appImage
            width: 44
            height: 43
            anchors.bottom: spacerProjectOverview.top
            anchors.horizontalCenter: parent.horizontalCenter
            source: "../../../WinCan/Icons/projectOverview.png"
            fillMode: Image.PreserveAspectFit
        }

        Text {
            id: textOverview
            color: "#ffffff"
            text: qsTr("Project\nOverview")
            anchors.topMargin: 5
            anchors.top: spacerProjectOverview.bottom
            anchors.bottomMargin: parent.height * 0.18
            anchors.bottom: parent.bottom
            font.bold: true
            horizontalAlignment: Text.AlignHCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 14
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                buttonQuit.opacity = 0
            }
        }

        Rectangle {
            id: spacerProjectOverview
            width: parent.width
            height: parent.height * 0.05
            color: "transparent"
            anchors.verticalCenter: parent.verticalCenter
        }


        anchors.verticalCenter: parent.verticalCenter
    }

    DropShadow {
    anchors.fill: buttonOverview
    horizontalOffset: 1
    verticalOffset: 6
    radius: 5
    samples: 5
    source: buttonOverview
    color: "black"

    }
}

预期：获得阴影和漂亮的文字和图标实际：有阴影但文字和图标模糊

Answer 1

您的 DropShadow 正在应用于 buttonOverview 组件区域，因为它是在 buttonOverview 下方定义的，所以它将位于它的顶部。如果我理解您的要求，您应该将 DropShadow 移动到 buttonOverview 矩形组件上方。

QML - DropShadow 模糊文本和 img

QML - DropShadow blurring text & img

qt

shadow

dropshadow