Qt自定义按钮

#ifndef QmayaLabelButton_H_
#define QmayaLabelButton_H_ 1

#include "QLabelHint.h"
#include <QtGui/QtGui>

class QmayaLabelButton : public QPushButton
{
    Q_OBJECT
public:
    QmayaLabelButton(QWidget * parent =0 );
    void setChildWidget(QWidget * widget);
private:
    QWidget * fChildWidget ;
};
#endif


#include "QmayaLabelButton.h"

QmayaLabelButton::QmayaLabelButton(QWidget * parent )
: QPushButton(parent)
, fChildWidget(NULL)
{
    this->setStyleSheet(QLatin1String("QPushButton{border-width:0px;}")) ;
}

void QmayaLabelButton::setChildWidget(QWidget * widget)
{
    if (fChildWidget)
    {
        delete fChildWidget ;
        fChildWidget = NULL ;
    }
    fChildWidget = widget ;
    fChildWidget->setParent(this);
    this->setFixedSize(fChildWidget->sizeHint()) ;

}

转自http://blog.youkuaiyun.com/starcloud_zxt/article/details/5185556

Qt自带的PushButton样式比较单一，在开发的时候往往按钮的形状各异，所以需要自定义Qt的按钮。其方法是做一张图片来作为按钮，如果需要动态效果的话，可以做两张图片进行替换。按钮的载体可以是QLabel、QPushButton，可以通过QStyle类来设计样式，如果对QStyle不太了解的话，可以用下面的方法来实现。

1. 使用QPushButton

    通过自定义一个按钮样式函数，在该函数中设置按钮的样式。（可以设计一个QPushButton的子类来完成设置）

实现代码：

[c-sharp] view plain copy

1. QPushButton *custButton(QString str,QString str1)  
2. {  
3.     QPushButton *pushButton= new QPushButton;  
4.   
5.     pushButton->setGeometry(10,10,200,200); //按钮的位置及大小  
6.     pushButton->clearMask();  
7.     pushButton->setBackgroundRole( QPalette::Base);  
8.   
9.     QPixmap mypixmap;   mypixmap.load(str);  
10.   
11.     pushButton->setFixedSize( mypixmap.width(), mypixmap.height() );  
12.     pushButton->setMask(mypixmap.createHeuristicMask());  
13.     pushButton->setIcon(mypixmap);  
14.     pushButton->setIconSize(QSize(mypixmap.width(),mypixmap.height()));  
15.     pushButton->setToolTip(str1);  
16.     return pushButton;  
17. }  

调用代码：

[c-sharp] view plain copy

1. QPushButton *btn=custButton("../login.png", "LOGIN");  
2.   
3. connect(btn, SIGNAL(clicked()), this, SLOT(slotLogin()));  

 

2. 通过QLabel

   我们可以把一个图片放在QLabel里面作为按钮，因为我没有找到QLabel是否有当点击后发出的信号，所以自定义了一个鼠标事件用来检测是否在QLabel上点击了鼠标。在自定义的鼠标事件中检测QLabel所在的区域，当在该区域发生鼠标点击事件后，发送信号。

   设计时通过Qt Creator在widget.ui中加入一个QLabel即可，不需要进行设置。

代码widget.h

[c-sharp] view plain copy

1. #ifndef WIDGET_H  
2. #define WIDGET_H  
3.  
4. #include <QWidget>  
5.   
6. namespace Ui {  
7.     class Widget;  
8. }  
9.   
10. class Widget : public QWidget {  
11.     Q_OBJECT  
12. public:  
13.     Widget(QWidget *parent = 0);  
14.     ~Widget();  
15.   
16. signals:  
17.     void clicked();  
18.   
19. protected:  
20.     void mousePressEvent(QMouseEvent *e);  
21.   
22. protected slots:  
23.     void slotClicked();  
24.   
25. private:  
26.     Ui::Widget *ui;  
27. };  
28.  
29. #endif // WIDGET_H  

 

代码widget.cpp

[c-sharp] view plain copy

1. #include "widget.h"  
2. #include "ui_widget.h"  
3. #include <QMouseEvent>  
4. #include <QMessageBox>  
5. #include <QPixmap>  
6. #include <QLabel>  
7.   
8. Widget::Widget(QWidget *parent) :  
9.     QWidget(parent),  
10.     ui(new Ui::Widget)  
11. {  
12.     ui->setupUi(this);  
13.     //使用label作为按钮，通过自定义鼠标事件，点击label所在区域实现鼠标单击  
14.     QPixmap pm;   pm.load("../logo.png");  
15.     ui->label->setGeometry(0,0,pm.width(), pm.height());  
16.     ui->label->setPixmap(pm);  
17.   
18.     connect( this, SIGNAL(clicked()), this, SLOT(slotClicked()));   //信号连接  
19. }  
20.   
21. Widget::~Widget()  
22. {  
23.     delete ui;  
24. }  
25.   
26.   
27. void Widget::mousePressEvent(QMouseEvent *e)  
28. {  
29.     int x = e->x();  
30.     int y = e->y();  
31.   
32.     //假如在QRect( 0, 0, 48, 48 )这个区域里(图片大小为48X48)，就发出信号  
33.     if (x>0 && x<48 && y>0 && y<48){  
34.         emit clicked();  
35.     }  
36. }  
37.   
38. void Widget::slotClicked()  
39. {  
40.     QMessageBox::about( this, "Mouse Example", "You have pressed mouse, exit now!");  
41.     close();  
42.   
43. } 
    

       /*边框变蓝*/

       ui->lupushButton->setAutoFillBackground(true);
      ui->lupushButton->setPalette(QColor(255,0,0));

       ui->lupushButton->setPalette(Qt::blue);

label->setScaledContents(true);
图片会自动缩放，适应label的大小。