2

I have a problem making the QQuickWidget background transparent.

I want to place a QQuickWidget underneath a QWidget. The QQuickWidget uses a source qml file. When I worked with Qt 4.8, I used QDeclarativeView. Porting from Qt 4 to Qt 5, QDeclarativeView is no longer used. Therefore, I am usingQQuickWidget instead of QDeclarativeView, as follows:

 QWidget *mainWidget = new QWidget();
 mainWidget->setStyleSheet("background-image: url(:/background.png);");

 QQuickWidget *quick = new QQuickWidget(mainWidget);
 quick->setAttribute(Qt::WA_TranslucentBackground, true);
 quick->setAttribute(Qt::WA_AlwaysStackOnTop, true);
 quick->setClearColor(Qt::transparent);
 quick->setSource(QUrl("qrc:/image.qml"));

 QWidget *topWidget = new QWidget(mainWidget);
 topWidget->setStyleSheet("background-image: url(:/semitransparent.png);");

If I do:

setAttribute(Qt::WA_AlwaysStackOnTop, true);

then the background becomes transparent, but breaks the stacking order involving the other widgets underneath the QQuickWidget inside the same window.

I want to make a QQuickWidget transparent when it is underneath a QWidget. Is this possible? If not, what workarounds do you suggest?

(1) This is mainWidget's background image:

enter image description here

(2) This is QQuickWidget's background. qml file use this image:

enter image description here

(3) This is topWidget's background image:

enter image description here

(4) What I want:

enter image description here

(5) What I get when I set WA_AlwaysStackOnTop as false:

enter image description here

(6) What I get when I set WA_AlwaysStackOnTop as true:

enter image description here

Okan yılmaz
  • 21
  • 5
  • Why do you care whether the QQuickWidget is transparent or not, since it is at the bottom? Is it only partially visible, and you want to make sure that even the partially visible parts are not seen at all? – Sabuncu Jan 17 '17 at 12:04
  • I edited your question, but please review this part: "involving the other widgets underneath the QQuickWidget inside the same window." The original sentence did not have a verb ("fiil") so I extrapolated the meaning based on context. – Sabuncu Jan 17 '17 at 12:06
  • It would help to provide a screenshot that shows the problem, when `WA_AlwaysStackOnTop` is used. Provide a link to an imgur screen capture and I'll put it into the body of the question. – Sabuncu Jan 17 '17 at 12:41
  • First of all thanks @Sabuncu . [Images](http://imgur.com/a/FJ4lB). I hope this image help to explain my problem – Okan yılmaz Jan 17 '17 at 14:01
  • I added the images inline, but I don't see any difference b/w 1 and 2 except for minor color variation? Also, you should post separately `background.png` and `semitransparent.png`. – Sabuncu Jan 17 '17 at 14:11
  • I add images.This images show you difference between `WA_AlwaysStackOnTop,true` and `WA_AlwaysStackOnTop,false`.[images](http://imgur.com/a/uPFcI).@Sabuncu – Okan yılmaz Jan 18 '17 at 07:03

2 Answers2

1

Official QT documentation here http://doc.qt.io/qt-5/qquickwidget.html says that breaking of the stacking order is to be 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.

Also see this official blog entry: http://blog.qt.io/blog/2014/07/02/qt-weekly-16-qquickwidget/

This recent blog entry is for a feature that is new in QT 5.1: http://www.ics.com/blog/combining-qt-widgets-and-qml-qwidgetcreatewindowcontainer

Conclusion: What you are seeing is not a bug, but a known, recognized, advertised limitation of the QT framework.

My advice: Do not try to solve this with a hack, but redesign your UI approach. For example, maybe you can make topWidget alpha-blend (semi-transparent).

EDIT: For example, like this:

enter image description here

Sabuncu
  • 5,095
  • 5
  • 55
  • 89
1

This is quite old but...

In many cases embedding a QML widget in a Qt Widgets application is useless unless you can make it transparent without breaking the stack order.

I do not have an implemented solution as at the end I did not need to do it. But I am explaining what was my approach in case someone want to give it a try.

1) Get a pixmap with parent background:

void QuickRoomWidget::showEvent(QShowEvent *event) 
{
    QPoint p1 = mapTo(parentWidget(), QPoint(0, 0));
    QPixmap px = parent->grab(QRect(p1, size()));
}

2) Use a QQuickImageProvider to pass image inside the QML:

https://doc.qt.io/qt-5/qquickimageprovider.html

https://doc.qt.io/qt-5/qtquick-imageprovider-example.html

3) Let the root item of your qml widget to draw the backgound using the pixmap.

Of course the performance of doing that will not be great so depending on where you need to use it probably will not be an option. But in my case this was not a problem.

If someone tries it please let me know if it worked!

Javier De Pedro
  • 2,219
  • 4
  • 32
  • 49