Transparent QQuickView inside a QWidget

[Nitish Puri]

-I have been trying to show a translucent QQuickView inside a QWidget, i have tried the following two methods

1. Use QWidget::createWindowWidget()
   @
   QQuickView* quickView = new QQuickView;
   quickView->setResizeMode(QQuickView::SizeRootObjectToView);
   quickView->setSurfaceType(QSurface::OpenGLSurface);

QSurfaceFormat surfaceFormat(QSurfaceFormat::StereoBuffers);
surfaceFormat.setRenderableType(QSurfaceFormat::OpenGL);
surfaceFormat.setStereo(true);
surfaceFormat.setStencilBufferSize(8);
surfaceFormat.setSwapBehavior(QSurfaceFormat::DoubleBuffer);
surfaceFormat.setDepthBufferSize(24);
quickView->setFormat(surfaceFormat);

quickView->setClearBeforeRendering(true);
quickView->setColor(QColor(Qt::transparent));

quickView->setSource(QString::fromStdString("example.qml"));

QWidget* quickViewWidget = QWidget::createWindowContainer(quickView, this);
quickViewWidget->setAttribute(Qt::WA_TranslucentBackground);
quickViewWidget->show();
quickViewWidget->setGeometry(0, 0, 500, 500);
@

However using this method I get a black background in place of transparent background.

example.qml
@
import QtQuick 2.0

Item {
width: 400
height: 400

// we need the transform to flip the framebuffer contents
transform: Scale { origin.x: width / 2; origin.y: height / 2; yScale: -1 }

Canvas {
id: canvas

anchors.fill: parent

SequentialAnimation on rotation {
  loops: Animation.Infinite
  PropertyAnimation { to: 360; duration: 1000 }
}

onPaint: {
  var ctx = canvas.getContext('2d');

  var gradient = ctx.createLinearGradient(0, 0, 0, height);
  gradient.addColorStop(.0, "rgba(255, 0, 0, .5)");
  gradient.addColorStop(1.0, "rgba(255, 255, 255, .2)");
  ctx.fillStyle = gradient;

  ctx.translate(width / 2, height / 2);

  var a = 0.866025403784 * width / 2;

  ctx.beginPath();
  ctx.moveTo(width / 2, 0);
  ctx.lineTo(-width / 4, -a);
  ctx.lineTo(-width / 4, a);
  ctx.lineTo(width / 2, 0);
  ctx.fill();
}

}
}@

2. Second method I used is discussed here in this post: https://stackoverflow.com/a/14070477
   This post uses a sample that can draw a transparent QQuickView as a QWidget.
   https://code.google.com/p/quickwidget/

However, in this case, if i try to set this QuickWidget as a child of another QWidget, QuickWidget is not invisible.

Can anyone suggest how this can be done. (Showing a translucent QQuickView inside a QWidget).

Thanks,
Nitish Puri

[Ryan Lee]

@Nitish-Puri I has same problem, did you solve the problem?

[JKSH]

@Ryan-Lee said in Transparent QQuickView inside a QWidget:

@Nitish-Puri I has same problem, did you solve the problem?

Try using QQuickWidget (https://doc.qt.io/qt-5/qquickwidget.html ) instead of QQuickView + QWidget::createWindowContainer(). Does that work?

[Ryan Lee]

@JKSH now I use QQuickWidget, but it't still black background. the following is my code.

declarativeView = new QQuickWidget;
QSurfaceFormat fmt;
fmt.setAlphaBufferSize(8);
declarativeView->setFormat(fmt); 
QHBoxLayout* lyt = new QHBoxLayout(this);
lyt->setMargin(0);
lyt->addWidget(declarativeView);
quick_view->setLayout(lyt); 
setWindowFlags(this->windowFlags() |Qt::FramelessWindowHint);
declarativeView->setResizeMode(QQuickWidget::SizeRootObjectToView);
declarativeView->setAttribute(Qt::WA_TranslucentBackground);
declarativeView->setAttribute(Qt::WA_NoBackground);
declarativeView->setAttribute(Qt::WA_NoSystemBackground);
declarativeView->setStyleSheet("background:transparent;");

declarativeView->rootContext()->setContextProperty("importPicDlg",this);
declarativeView->setClearColor(Qt::transparent);
declarativeView->setSource(QUrl("qrc:/snapshot/CameraSnapView.qml"));
quick_view->setStyleSheet("background:red;border:4px solid green;"); //testing

[Ryan Lee]

@JKSH Thank you very much, I solved the problem.

declarativeView = new QQuickWidget(this);
declarativeView->setAttribute(Qt::WA_AlwaysStackOnTop); // the key function
declarativeView->setClearColor(Qt::transparent);
QHBoxLayout* lyt = new QHBoxLayout(this);
lyt->setMargin(0);
lyt->addWidget(declarativeView);