Question

我的qml弹出通知窗口代码（期望上下文参数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()
        }
    }
}

所以我们的想法是，我们显示窗口由半透明区域和两个标签组成，启动计时器，当触发时开始淡化（不透明度从1到0）动画并启动另一个计时器（这次关闭窗口）然后衰落就完成了。）

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

所有者cpp类代码

#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

可以通过添加＆quot; layer.enabled：true＆＃39;来修复。进入背景

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

衰落区域中的文本变为黑色

1 个答案: