Office like QToolButton - qt

Question

I currently try to make a QToolButton looks like equivalent in Office.
It should look like this:
I know I can access menu button with QToolButton::menu-button, but QToolButton::menu-button:hover is same as QToolButton:hover so I can't differ between both and I can't set a border just for QToolButton::menu-button. Any idea?

Answer 1

You can create something like split button.
class SplitButton : public QPushButton
{
Q_OBJECT
public:
explicit SplitButton(QWidget *parent = 0);
void setMenu(QMenu* menu);
protected:
void resizeEvent ( QResizeEvent * );
void mousePressEvent ( QMouseEvent * );
private:
QFrame* line;
};
Added opportunity to insert menu by setMenu() method. QFrame is needed for separating button and popup menu.
At constructor just initialize base class:
#include <QFrame>
#include <QMenu>
#include <QResizeEvent>
SplitButton::SplitButton(QWidget *parent):
QPushButton(parent)
{
}
Popup menu will be added like this:
void SplitButton::setMenu( QMenu* menu )
{
if (menu) {
line = new QFrame(this);
line->setFrameShape(QFrame::VLine);
line->setFrameShadow(QFrame::Sunken);
QPushButton::setMenu(menu);
connect(menu, &QMenu::triggered, [=](QAction *act) {
setText(act->text());
});
}
}
As you can see we used QPushButton::setMenu() method and connect menu triggered signal to slot, realized with labda, so you need include c++11 compatibility.
After we need to override resize, mousePress and keyPressed events. As minimal exmaple i done second ones.
void SplitButton::resizeEvent ( QResizeEvent * event )
{
if (menu()) {
int width = event->size().width();
int height = event->size().height();
line->setGeometry(QRect(width - 18, 4, 3, height - 8));
}
}
At resize event if menu is available we add frame by offset for pseudo-button.
void SplitButton::mousePressEvent( QMouseEvent * event )
{
if (menu()) {
if ( width()-event->x() <= 15 )
showMenu();
else
setDown(true);
} else {
QPushButton::mousePressEvent(event);
}
}
For mousePress event we just select what we want to do: show menu or push button.
Usage:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent), m_file(QString())
{
setupUi(this);
SplitButton *split = new SplitButton;
split->setText("B");
QMenu *menu = new QMenu;
menu->addAction("Y");
menu->addAction("B");
menu->addAction("U");
split->setMenu(menu);
split->setCheckable(true);
Ui::MainWindow::mainToolBar->addWidget(split);
}
And you can set button chechable for Office-like effects.
It's just one of possible ways to realize this, I hope it will be helpful for you.
It look like on screen for me:
Of cource, it is not final result, you need repaint it like you want or use styles for flat-style.