使用透明背景的 QQuickWidget

Question

我在QDialog中添加了一个QQuickWidget来加载一个.qml文件，但它的背景颜色是白色的。我的qml文件声明了一个Rectangle没有填满整个QQuickWidget表面。我需要未填充的表面具有与对话框相同的背景颜色。有什么方法可以实现透明背景？

- MirkoBanchi

Answer 1

在QQuickWidget文档中有解释：QQuickWidget的限制

将其他小部件放在下面，并使QQuickWidget透明将无法产生预期结果：下面的小部件将不可见。这是因为实际上，在所有常规的非OpenGL小部件之前绘制QQuickWidget，因此透明类型的解决方案不可行。其他类型的布局，例如在QQuickWidget上方放置小部件，将按预期运行。

在绝对必要时，可以通过在QQuickWidget上设置Qt :: WA_AlwaysStackOnTop属性来克服此限制。但请注意，这会破坏堆叠顺序。例如，将无法在QQuickWidget上方放置其他小部件，因此应仅在需要在其他小部件下方显示半透明QQuickWidget的情况下使用。

- GrecKo

---

对于所有努力使背景透明的人，仅设置Qt::WA_AlwaysStackOnTop属性不会使背景透明。您还需要将QQuickWidget的clearColor设置为透明。 - NelDav

Answer 2

浮动云：

auto quickWidget = new QQuickWidget();
quickWidget->setWindowFlags(Qt::SplashScreen);
quickWidget->setAttribute(Qt::WA_AlwaysStackOnTop);
quickWidget->setAttribute(Qt::WA_TranslucentBackground);
quickWidget->setClearColor(Qt::transparent);
quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
quickWidget->setSource(QUrl("qrc:/cloud.qml"));
quickWidget->show();

---

cloud.qml

import QtQuick 2.0

Item {
    id: root
    width: 400
    height: 300
    Canvas {
        id: cloud
        anchors.fill: parent

        onPaint: {
            var ctx = getContext("2d");
            ctx.beginPath();
            var x = 100;
            var y = 170;
            ctx.arc(x, y, 60, Math.PI * 0.5, Math.PI * 1.5);
            ctx.arc(x + 70, y - 60, 70, Math.PI * 1, Math.PI * 1.85);
            ctx.arc(x + 152, y - 45, 50, Math.PI * 1.37, Math.PI * 1.91);
            ctx.arc(x + 200, y, 60, Math.PI * 1.5, Math.PI * 0.5);
            ctx.moveTo(x + 200, y + 60);
            ctx.lineTo(x, y + 60);
            ctx.strokeStyle = "#797874";
            ctx.stroke();
            ctx.fillStyle = "#8ED6FF";
            ctx.fill();
        }
    }
}

- Leo

Answer 3

使用QQuickWidget::setClearColor(Qt::transparent)，并通过setFormat调用设置一个alpha通道。

- Kuba hasn't forgotten Monica

Answer 4

project.pro

QT += core gui widgets qml quickwidgets
CONFIG += c++17  

main.cpp

#include <QApplication>
#include <QObject>
#include <QDialog>
#include <QVBoxLayout>
#include <QtQuickWidgets/QQuickWidget>

/*****************************************************************************/

void show (QUrl component) {
    QDialog* dialog = new QDialog();
    dialog->setStyleSheet("background-color: green;");
    QObject::connect(
        QCoreApplication::instance(),
        SIGNAL(aboutToQuit()),
        dialog,
        SLOT(deleteLater())
    );
    /*QObject::connect(dialog,&QObject::destroyed,[](){
       qDebug() << "destroyed";
    });*/
    QQuickWidget* content = new QQuickWidget(component, dialog);
    content->setResizeMode(QQuickWidget::SizeRootObjectToView);
    content->setAttribute(Qt::WA_AlwaysStackOnTop);
    content->setClearColor(Qt::transparent);
    dialog->show();
}

/*****************************************************************************/

int main(int argc, char *argv[]) {
    QApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QApplication a(argc, argv);

    show(QStringLiteral("qrc:/qml/Button.qml"));
    show(QStringLiteral("qrc:/qml/Button.qml"));
    show(QStringLiteral("qrc:/qml/Button.qml"));
    show(QStringLiteral("qrc:/qml/Button.qml"));

    return a.exec();
}

/*****************************************************************************/

Button.qml

import QtQuick 2.12
import QtQuick.Controls 2.5

Button {
    height: 100
    width: 100
    text: "lol"
}

结果

也可以尝试渐变背景

dialog->setStyleSheet(
    "background-color: qlineargradient(spread:pad,x1:0,y1:1,x2:0,y2:0," \
    "    stop:0 rgba(34, 34, 44, 255)," \
    "    stop:1 rgba(56, 55, 72, 255)" \
    ");"
);

- Petr Tripolsky