How to make QToolButton go beyond the edge of QToolbar?

Question

How can I make the button go beyond the edge of QToolbar ?

Below is the code as I create the toolbar:

mainwindow.h

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    MainWindow(QWidget *parent = 0)

private:
    QToolBar* _toolBar;
};

mainwindow.cpp

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent)
{
   _toolBar = new QToolBar;
   QAction *actionAdd = new QAction(QIcon(":/images/add.png"), "", this);
   _toolBar->addAction(actionAdd);

    addToolBar(Qt::ToolBarArea::TopToolBarArea, _toolBar);

}

style.qss

QToolBar {
    background: #018ac4;
    height: 150px;

}

Answer 1

It is not possible with widgets. A QWidget can not paint outside of its area. See this answer : https://stackoverflow.com/a/48302076/6165833 .

However, the QToolBar is not really the parent of the QAction because addAction(QAction *action) does not take the ownership. So maybe the QMainWindow could paint your QAction the way you want but AFAIK this is not doable through the public API of Qt.

What you could do is use QML (but you would need to use QML for the whole window then).

Answer 2

As said before, it is not possible to solve this correctly using QtWidgets. However I see two options to visually create that effect:

1. Take the button out of the tool bar and add it to the main window instead, but do not add it to a layout. Usually i would say reposition it on resize events, but since it is in the top left, you might as well just call setGeometry() once on startup and not worry about it later. You probably have to add last, or call rise() though.

2. Make it look like the button sticks out, while it really doesn't. Make the toolbar as large as the button, but paint the lower part of the toolbar in the brighter blue, so that it looks like it is part of the widget below it.