使用QToolButton结合QGroupButton实现自定义按钮组排列

 

 

简介

将QToolButton添加入QGroupButton，使用自定义的行列间距实现按钮的组合排列。

 

 

 

原理

通过自定义间距结合按钮组的使用，实现按钮封装排列。

QToolButton可以显示图片和文字，并可以通过设置文字位于图片底部，实现代码：

button->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

QGroupButton类似一个容器，可以添加按钮存储数据

 

buttongroup->addButton(button,index);

 

 

源码

 

cbasebuttongroup.h

#ifndef CBASEBUTTONGROUP_H
#define CBASEBUTTONGROUP_H

#include <QButtonGroup>
#include<QToolButton>
class CBaseButtonGroup : public QButtonGroup
{
    Q_OBJECT
public:
    CBaseButtonGroup(QWidget *widget,QObject *parent = 0);
    int AddButton(const QStringList ButtonTextList);//添加按钮
    void SetPar(int PosX,int PosY,int ColumnNum,int ColumnWidth,int RowWidth,int Width_Button,int High_Button);//设置参数
    void SetSty(QString Sty);//设置样式
    int m_PosX;//起始位置X
    int m_PosY;//起始位置Y
    int m_ColumnNum;//一行按钮个数
    int m_ColumnWidth;//行距
    int m_RowWidth;//列距
    int m_Width_Button;//按钮宽度
    int m_High_Button;//按钮高度
    int m_RowWidthBegin;//起始的列距
    QButtonGroup *group;//按钮组
    QWidget * ParentWidget;//父窗口
    QString ButtonSty;//按钮样式
protected:

    QToolButton*button;//基类按钮

signals:

public slots:

};

#endif // CBASEBUTTONGROUP_H

cbasebuttongroup.cpp

#include "cbasebuttongroup.h"

CBaseButtonGroup::CBaseButtonGroup(QWidget *widget,QObject *parent) :
    QButtonGroup(parent)
{
   this->ParentWidget = widget;
   m_PosX = 0;
   m_PosY = 0;
   m_ColumnNum = 0;
   m_ColumnWidth = 0;
   m_RowWidth = 0;
   m_Width_Button = 0;
   m_High_Button = 0;
   m_RowWidthBegin = 0;
   group = new QButtonGroup();
   //group->setExclusive(true);//设置按钮组互斥
}


int CBaseButtonGroup::AddButton(const QStringList ButtonTextList)
{
    for(int i = 0; i < ButtonTextList.count();i++)
    {
       if(i%m_ColumnNum == 0)
       {
          m_RowWidthBegin = 0;
          m_PosY+=(m_ColumnWidth+m_High_Button);
       }
       button = new QToolButton(this->ParentWidget);
       button->setGeometry(m_PosX+m_RowWidthBegin,m_PosY-(m_ColumnWidth+m_High_Button),m_Width_Button,m_High_Button);
       button->setText(ButtonTextList.value(i));
       //button->setStyleSheet(ButtonSty);
       button->setCheckable(true);
       group->addButton(button,i+1);
       m_RowWidthBegin+=(m_RowWidth+m_Width_Button);
    }
    return 0;
}

void CBaseButtonGroup::SetPar(int PosX, int PosY, int ColumnNum, int RowWidth, int ColumnWidth, int Width_Button, int High_Button)
{
    this->m_PosX = PosX;
    this->m_PosY = PosY;
    this->m_ColumnNum =ColumnNum;
    this->m_ColumnWidth = ColumnWidth;
    this->m_RowWidth = RowWidth;
    this->m_Width_Button = Width_Button;
    this->m_High_Button = High_Button;
}

void CBaseButtonGroup::SetSty(QString Sty)
{
    this->ButtonSty = Sty;
}

 

 

示例

下面我们来实现下

ButtonGroup = new CBaseButtonGroup(parent);
ButtonGroup->SetPar(120,20,2,12,20,192,70);//设置按钮的参数-->起始位置x=120,y=20,一行2个按钮，行距12，列距20，按钮宽192，高70
ButtonGroup->SetSty("QPushButton:checked {background-color:#e5143d;border-radius:4px;font-size:30px; font:bold; color:#ffffff;}" "QPushButton{background-color:#53062a;border-radius:4px;font-size:30px; font:bold; color:#ffffff;}");//设置样式，关于样式的设置网上很多这边不多说哈
QStringList str;//传参数，设置按钮的名称，也可以传图片，甚至是一个容器链表结构体QList<struct>哦，看你怎么使用哈
str << "1张" << "2张" << "3张" << "4张" << "5张" << "6张";//会根据你链表中的个数，new出对应个数的按钮
ButtonGroup->AddButton(str);

 

 

效果

最后实现一个简单的槽函数，可以实现点击对应的按钮，触发对应事件

 

connect(groupbutton,SIGNAL(buttonClicked(QAbstractButton*)),this,SLOT(buttonJudge(QAbstractButton*)));

void CBaseButtonGroup::buttonJudge(QAbstractButton *index)

{

    qdebug() << index.text;

}

 

 

结论

这是我写的第一篇博客，在公司实习上班的时候无聊写的哈哈。有不足的欢迎地方大家讨论交流，有问题留言必答哦