淡化区域中的文本变黑

Question

我的 qml 弹出通知代码 window（需要上下文参数 owner（对象）、messageText、messageTitle 和 messageTimeout）如下:

import QtQuick 2.4
import QtQuick.Window 2.0
import QtQuick.Controls 1.2

Window {
    id: notification
    x: Screen.width - width - 40
    y: 40
    width: 350
    height: background.height
    color: "transparent"
    flags: Qt.SplashScreen | Qt.WindowStaysOnTopHint

    Component.onCompleted: visible = true

    signal closeRequested

    Connections {
        target: owner
        onInitClose: {
            if (closeInitialized) {
                return
            }

            fadeTimer.stop()
            fadeOutAnimation.start()
            closeTimer.start()
        }
    }

    property int fadeoutDuration: 1000
    property bool closeInitialized: false

    NumberAnimation {
        id: fadeOutAnimation
        target: background
        property: "opacity"
        duration: fadeoutDuration
        easing.type: Easing.InOutQuad
        from: 1
        to: 0
    }

    Rectangle {
        id: background
        radius: 5
        color: "#D8226222"

        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        height: childrenRect.height + 20

        Label {
            id: caption
            color: "white"
            font.pixelSize: 18
            wrapMode: "WordWrap";

            text: messageTitle

            anchors.left: parent.left
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.topMargin: 10
            anchors.leftMargin: 15
            anchors.rightMargin: 15
        }

        Label {
            color: "white"
            font.pixelSize: 14
            wrapMode: "WordWrap";

            text: messageText

            anchors.top: caption.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.topMargin: 10
            anchors.leftMargin: 15
            anchors.rightMargin: 15
        }
    }

    Timer {
        id: fadeTimer
        interval: messageTimeout
        running: true
        repeat: false

        onTriggered: {
            closeInitialized = true
            fadeOutAnimation.start()
            closeTimer.start()
        }
    }

    Timer {
        id: closeTimer
        interval: fadeoutDuration
        running: false
        repeat: false

        onTriggered: {
            notification.close()
            owner.onClosed()
        }
    }
}

所以我们的想法是，我们显示 window 由带有两个标签的半透明区域组成，计时器启动，触发时开始淡出（不透明度从 1 到 0）动画并启动另一个计时器（这次关闭 window 则褪色完成。

问题是 - 当背景区域褪色时，文本颜色从白色变为（看似不透明的）黑色，尽管文本在本应变得绝对透明的容器中。我该如何解决这个问题？

拥有者cppclass代码

#include "popup.h"

#include <QQmlContext>

Popup::Popup(QString title, QString text, int delay, QObject *parent) : QObject(parent), m_engine(this)
{
    m_engine.rootContext()->setContextProperty("messageTitle", QVariant(title));
    m_engine.rootContext()->setContextProperty("messageText", QVariant(text));
    m_engine.rootContext()->setContextProperty("messageTimeout", QVariant(delay));
    m_engine.rootContext()->setContextProperty("owner", this);
    m_engine.load(QUrl(QStringLiteral("qrc:/popup.qml")));

    m_state = STATE_ACTIVE;
}

bool Popup::isOpen()
{
    return m_state == STATE_ACTIVE;
}

void Popup::onClosed()
{
    m_state = STATE_CLOSED;
    emit closed();
}

void Popup::close()
{
    if (!isOpen()) {
        return;
    }

    emit initClose();
}

Answer 1

可以通过将 'layer.enabled: true' 添加到背景中来解决

Rectangle {
    id: background
    layer.enabled: true
    ...
}

淡化区域中的文本变黑

Text in fading area turns black

qt

qml

qt5