Question

这是与此问题部分相关的问题：Cast a shadow with Popup

我与那里拥有相同的MWE。除了投射阴影外，弹出窗口还应该模糊主窗口中的所有内容。问题是，要么我可以模糊不是图像的东西，但可以使Text属性模糊？

Answer 1

我知道了，这是一个例子：

import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtQuick 2.0
import QtGraphicalEffects 1.0

ApplicationWindow
{
    id: window
    width: 400
    height: 400
    visible: true

    Rectangle
    {
        id: rectMain;
        width: parent.width;
        height: parent.height;

        Button
        {
            text: "Open"
            onClicked: popup.open()
        }

        Popup
        {
            id: popup

            x: 100
            y: 100
            width: 200
            height: 300
            modal: true
            focus: true
            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside

            leftPadding: 0;
            rightPadding: 0;
            topPadding: 0;
            bottomPadding: 0;

            Rectangle
            {
                id: popRect;
                color: "red";

                //anchors.centerIn: parent
                width: parent.width;
                height: parent.height;
            }

            DropShadow
            {
                width: popup.width;
                height: popup.height;

                source: popRect;

                horizontalOffset: 0;
                verticalOffset: 5;
                radius: 10;
                samples: 7;
                color: "black";
            }

            onOpened: theBlur.visible = true;
            onClosed: theBlur.visible = false;
        }

        GaussianBlur
        {
            id: theBlur;
            visible: false;
            anchors.fill: rectMain;
            source: rectMain;
            radius: 8
            samples: 16
        }
    }
}

Answer 2

您可以使用ApplicationWindow的{{3}}属性（或Qt 5.10+中弹出窗口的Overlay.modal附加属性）来实现。它定义了打开模型Popup时要使用和实例化的组件（类似地，对于modeless但dim: true的弹出窗口，有一个modal: false组件属性）。

在您的示例中，这翻译为：

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.0

ApplicationWindow {
    id: window
    width: 400
    height: 400
    visible: true

    Rectangle {
        id: rectMain;
        width: parent.width
        height: parent.height

        Canvas {
            anchors.fill: parent

            property real hue: 0
            RotationAnimation on hue {
                from: 0
                to: 360
                duration: 4000
                running: true
                loops: Animation.Infinite
            }
            onHueChanged: requestPaint()
            onPaint: {
                var ctx = getContext("2d");
                ctx.fillStyle = Qt.hsla(hue / 360, 1, 0.5, 1);
                ctx.fillRect(0, 0, width, height);
            }
        }
        Button {
            text: "Open"
            onClicked: popup.open()
        }

        Popup {
            id: popup

            x: 100
            y: 100
            width: 200
            height: 300
            modal: true
            focus: true
            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside

            // new attached property in 5.10, in 5.9 and older use the overlay.modal property of ApplicationWindow.
            Overlay.modal: GaussianBlur {
                source: ShaderEffectSource { // you can just do source: window.contentItem if you just want a live blur.
                    sourceItem: window.contentItem
                    live: false
                }
                radius: 8
                samples: 16
            }

            padding: 0

            Rectangle {
                id: popRect;
                color: "red";

                width: parent.width
                height: parent.height
            }

            background: DropShadow {
                source: popup.contentItem

                horizontalOffset: 0
                verticalOffset: 5
                radius: 10
                samples: 7
                color: "black"
            }
        }
    }
}

带有模糊效果的弹出窗口

2 个答案: