QML - DropShadow размывает текст и изображение

Я пытаюсь применить эффект 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"

    }
}

Ожидается: появляется тень и красиво выглядящий текст и значки. Фактически: появляется тень, но текст и значки размыты.


person Kacper Sitarz    schedule 21.01.2019    source источник


Ответы (1)


Ваш DropShadow применяется к области компонентов buttonOverview, и, поскольку он определен ниже buttonOverview, он будет расположен поверх него. Если я понимаю ваши требования, вы должны переместить DropShadow над компонентом ButtonOverview Rectangle.

person teh_raab    schedule 22.01.2019
comment
Вау, не знал, что размещение тени под или над прямоугольником будет иметь значение, так как это связано с ID. Вау, это действительно работает, большое вам спасибо! Мои волосы поседели после поиска решения :) Большое спасибо!! - person Kacper Sitarz; 22.01.2019
comment
Без проблем. С QML вам нужно учитывать позицию кода. Вы также можете использовать z-упорядочение, чтобы разместить его перед или за объектами, но я нахожу это немного беспорядочным, особенно с большими приложениями. Если ответ помог, пожалуйста, сделайте его принятым ответом :) - person teh_raab; 22.01.2019
comment
О да, извините, я здесь новенький, забыл об этом :) Сейчас я на стажировке в качестве фронтенда, и у меня есть проект QML, хотя я никогда раньше не видел QML. Большое спасибо еще раз :) - person Kacper Sitarz; 22.01.2019
comment
Не волнуйтесь. QML — это весело. Удачи на стажировке :) - person teh_raab; 22.01.2019
comment
Извините, что вмешиваюсь еще раз, но не хочу создавать новую тему, чтобы не спамить. После размещения тени над прямоугольником моя область мыши на прямоугольнике перестала работать. После добавления z к прямоугольнику ничего не произошло. Что мне делать в этом сценарии? - person Kacper Sitarz; 22.01.2019
comment
Я бы предложил создать новый пост с новым обновленным кодом и проблемой :) - person teh_raab; 22.01.2019