How to lay a QQuickWidget (with transparency) on top of a QWidget

1.3k views Asked by At

I'm trying to use a QQuickWidget as an overlay over a QWidget. The QQuickWidget contains some buttons and a couple other widgets laid out along the bottom.

I've found that I can get the QQuickWidget to properly overlay the QWidget by using a combination of setAttribute(Qt::WA_AlwaysStackOnTop) and setClearColor(Qt::transparent). But the problem I'm having is that all the mouse events are being directed to the main window instead of the underlying QWidget.

I setup a sample project to reproduce my problem.

OverlayItem.qml is defined as follows:

import QtQuick 2.6
import QtQuick.Controls 1.4

Item {
    width: parent.width
    height: parent.height

    Row {
        anchors { 
            horizontalCenter: parent.horizontalCenter; 
            bottom: parent.bottom; 
            bottomMargin: 15 
        }
        spacing: 15
        Button {
            text: "Button1"
            onClicked: {
                console.log("Button1 CLICKED!")
            }
        }
        Button {
            text: "Button2"
            onClicked: {
                console.log("Button2 CLICKED!")
            }
        }
        Button {
            text: "Button3"
            onClicked: {
                console.log("Button3 CLICKED!")
            }
        }
    }
}

The QQuickWidget is created and the QML loaded when MainWindow is created:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow),
    qw(NULL)
{
    ui->setupUi(this);

    qw = new QQuickWidget(ui->frame);
    qw->setResizeMode(QQuickWidget::SizeRootObjectToView);
    qw->setAttribute(Qt::WA_AlwaysStackOnTop);
    qw->setClearColor(Qt::transparent);
    qw->setSource(QUrl("OverlayItem.qml"));
}

void MainWindow::showEvent(QShowEvent *event)
{
    if (auto pw = qw->parentWidget())
    {
        qw->resize(pw->size());
    }
}

void MainWindow::resizeEvent(QResizeEvent *event)
{
    if (auto pw = qw->parentWidget())
    {
        qw->resize(pw->size());
    }
}

And here's the MainWindow UI code:

class Ui_MainWindow
{
public:
    QWidget *centralWidget;
    QGridLayout *gridLayout_2;
    QFrame *frame;
    QGridLayout *gridLayout;
    QTextBrowser *textBrowser;

    void setupUi(QMainWindow *MainWindow)
    {
        if (MainWindow->objectName().isEmpty())
            MainWindow->setObjectName(QStringLiteral("MainWindow"));
        MainWindow->resize(800, 600);

        QSizePolicy sizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::MinimumExpanding);
        sizePolicy.setHorizontalStretch(0);
        sizePolicy.setVerticalStretch(0);
        sizePolicy.setHeightForWidth(MainWindow->sizePolicy().hasHeightForWidth());
        MainWindow->setSizePolicy(sizePolicy);

        centralWidget = new QWidget(MainWindow);
        centralWidget->setObjectName(QStringLiteral("centralWidget"));

        gridLayout_2 = new QGridLayout(centralWidget);
        gridLayout_2->setSpacing(6);
        gridLayout_2->setContentsMargins(11, 11, 11, 11);
        gridLayout_2->setObjectName(QStringLiteral("gridLayout_2"));

        frame = new QFrame(centralWidget);
        frame->setObjectName(QStringLiteral("frame"));
        frame->setFrameShape(QFrame::StyledPanel);
        frame->setFrameShadow(QFrame::Raised);

        gridLayout = new QGridLayout(frame);
        gridLayout->setSpacing(6);
        gridLayout->setContentsMargins(11, 11, 11, 11);
        gridLayout->setObjectName(QStringLiteral("gridLayout"));

        textBrowser = new QTextBrowser(frame);
        textBrowser->setObjectName(QStringLiteral("textBrowser"));
        textBrowser->setReadOnly(false);

        gridLayout->addWidget(textBrowser, 0, 0, 1, 1);

        gridLayout_2->addWidget(frame, 0, 0, 1, 1);

        MainWindow->setCentralWidget(centralWidget);

        retranslateUi(MainWindow);

        QMetaObject::connectSlotsByName(MainWindow);
    } // setupUi
};

As you can see, the CentralWidget contains a QFrame which, in turn, contains a QTextBrowser. The desired behavior of this example code is for the QTextBrowser to remain functional while 3 buttons are overlaid at the bottom. However, when I run this code, I'm unable to click on the QTextBrowser in order to give it focus. Instead, MainWindow receives all of the non-button-click mouse events.

I've played around with event filters and reparenting, but I don't seem to be getting anywhere. Has anyone had success trying something like this?

0

There are 0 answers