Qt 之QToolButton 实现QQ界面按钮效果

我们知道在QtDesigner中拖出来的空间都是最原始状态的，样式不是很美观，但是Qt提供了QSS，我们可以对控件设置样式来达到我们想要的效果。因此单独一个控件可以实现多种的样式。我们可以通过继承控件并重写paintEvent可以重绘控件，也可以通过简单地设置样式来达到不一样的效果。当然也可以通过控件的组合来达到我们想要的效果。

看一下QQ的效果：

看一下用Qt实现的效果：

自己P的图，大家可以对照图片参考一下样式

按钮背景

小箭头

不得不佩服QQ的界面，十分美观、漂亮。每一处细节都做的很好。下面来讲解一下如何实现QQ界面联系人群组按钮的实现。

其实实现很简单，继承了QToolButton,添加了样式以及一些控制事件。不过外观不是很美观（可惜不大会PS，完全靠截图和抠图再组合），但是功能基本实现，大家有兴趣可以试试，下面直接上代码。

// 设置按钮图标void MyToolButton::setIcon(QString strIcon){    m_strIcon = strIcon;}//按钮的初始化void MyToolButton::initControl(){       this->setPopupMode(QToolButton::MenuButtonPopup);    this->setFixedSize(QSize(45, 34));    // 设置样式    this->setStyleSheet(QString("QToolButton\                        {\                            border-image: url(%1) 0 0 68 0;\                        }\                        QToolButton:hover\                        {\                            border-image: url(%1) 34 0 34 0;\                        }\                        QToolButton:pressed,QToolButton:checked\                        {\                            border-image: url(%1) 68 0 0 0;\                        }\                        QToolButton::menu-arrow\                        {\                            border:none\                        }\                        QToolButton::menu-button\                        {\                        background-image:url(:/Resources/toolButton_arrow_tranparent.png);\                        }").arg(m_strIcon));    connect(this, SIGNAL(pressed()), this, SLOT(onMousePress()));       // 可以在这个onMousePress槽中实现QQ界面中的联系人、群组、空间等界面的切换;}

// 设置菜单void MyToolButton::initMenu(){    m_menu = new QMenu(this);    QAction* actionOne = m_menu->addAction("one");    QAction* actionTwo = m_menu->addAction("two");    this->setMenu(m_menu);}

// 鼠标进出按钮事件void MyToolButton::enterEvent(QEvent *event){    if (this->isChecked())    {        showMenuArrow();    }    QToolButton::enterEvent(event);}void MyToolButton::leaveEvent(QEvent *event){    hideMenuArrow();    QToolButton::leaveEvent(event);}

// 显示菜单小箭头void MyToolButton::showMenuArrow(){    QString styleSheet = this->styleSheet();    styleSheet += "QToolButton::menu-button\                    {\                    background-image:url(:/Resources/toolButton_arrow.png);\                    }";    this->setStyleSheet(styleSheet);}//隐藏菜单小箭头void MyToolButton::hideMenuArrow(){    QString styleSheet = this->styleSheet();    styleSheet += "QToolButton::menu-button\                    {\                    background-image:url(:/Resources/toolButton_arrow_tranparent.png);\                    }";    this->setStyleSheet(styleSheet);}

以上代码实现了单个按钮的效果，但是还需要将按钮组合起来。以下代码实现了将多个按钮组合，并且控制当一个按钮被按下时，将之前被按下的按钮setChecked(false)。

//初始化void MyTabButton::initControl(){    m_hLayout = new QHBoxLayout(this);    m_hLayout->setSpacing(0);    MyToolButton* toolButtonOne = new MyToolButton(0, ":/Resources/toolButton.png");    MyToolButton* toolButtonTwo = new MyToolButton(0, ":/Resources/group_contact.png");    MyToolButton* toolButtonThree = new MyToolButton(0, ":/Resources/toolButton.png");    MyToolButton* toolButtonFour = new MyToolButton(0, ":/Resources/group_contact.png");    addToolButton(toolButtonOne);    addToolButton(toolButtonTwo);    addToolButton(toolButtonThree);    addToolButton(toolButtonFour);    m_hLayout->addStretch(0);    m_checkButtonId  = 0;    m_tButtonList[0]->setChecked(true);    QSignalMapper *signalMap = new QSignalMapper(this);    for (int i = 0; i < m_tButtonList.size(); i++)    {        signalMap->setMapping(m_tButtonList[i], i);        connect(m_tButtonList[i], SIGNAL(clicked()), signalMap, SLOT(map()));    }    connect(signalMap, SIGNAL(mapped(int)), this, SLOT(onToolButtonClicked(int)));}//将按钮添加到ButtonList中void MyTabButton::addToolButton(MyToolButton *myToolButton){    m_hLayout->addWidget(myToolButton);    m_tButtonList.push_back(myToolButton);}// 将上一个被按下的按钮setChecked(false);void MyTabButton::onToolButtonClicked(int id){    m_tButtonList[m_checkButtonId]->setChecked(false);    m_checkButtonId = id;}

以上是最近模仿 QQ做的一个小例子，最初的想法是用两个button进行组合来实现，一个button充当默认的button另一个button充当小箭头，但是这样显得多余，绞尽脑汁最后还是用一个QToolButton实现了这样的效果。

写了几篇博客才发现，想要真正写完一篇质量高一点的博客不是那么容易，不过还是想用心写好每一篇与大家一起分享。也感谢前辈们写的一篇篇博文，让我们不断学习，也让我们更加自信。欢迎大家一起交流讨论！

进步始于交流，收获源于分享！

虽然能力有限，但努力无极限！

加油！！！

---

代码下载

QToolButton 的扩展、多样化