QQuickWidget with transparent background - qt

Question

I added in a QDialog aQQuickWidget to load a .qml but its background color is white. My qml declares a Rectangle not filling all QQuickWidget surface. I need the not filled surface having the same background color of the dialog. What is the way to have a transparent background?

Answer 1

Floating cloud:
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();
}
}
}

Answer 2

It's explained in the QQuickWidget documentation : QQuickWidget Limitations
Putting other widgets underneath and making the QQuickWidget transparent will not lead to the expected results: the widgets underneath will not be visible. This is because in practice the QQuickWidget is drawn before all other regular, non-OpenGL widgets, and so see-through types of solutions are not feasible. Other type of layouts, like having widgets on top of the QQuickWidget, will function as expected.
When absolutely necessary, this limitation can be overcome by setting the Qt::WA_AlwaysStackOnTop attribute on the QQuickWidget. Be aware, however that this breaks stacking order. For example it will not be possible to have other widgets on top of the QQuickWidget, so it should only be used in situations where a semi-transparent QQuickWidget with other widgets visible underneath is required.

Answer 3

Use QQuickWidget::setClearColor(Qt::transparent) and set an alpha channel via the setFormat call.

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"
}
result
also try gradient background
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)" \
");"
);