Qt 图片按钮

清疚 2022-07-15 00:46 224阅读 0赞

1.给QPushButton添加背景图片；

2.QWidget窗口部件提升；

3.QSignalMapper使用；

4.简单样式表。

界面如下，随便找的一些图片素材，点击底部按钮显示和隐藏上面的六个图标面板。

![SouthEast][]

1>六个图标的面板是一个单独的QWidget，代码如下：

**\[cpp\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#ifndef FORM\_H
2.  \#define FORM\_H
3.  
4.  \#include <QWidget>
5.  
6.  **namespace** Ui \{ 
7.  **class** Form; 
8.  \} 
9.  
10. **class** QSignalMapper; 
11. **class** Form : **public** QWidget 
12. \{ 
13.  Q\_OBJECT 
14. 
15. **public**: 
16. **explicit** Form(QWidget \*parent = 0); 
17.  ~Form(); 
18. 
19. signals: 
20. **void** sigButtonClick(QString); 
21. 
22. **private** slots: 
23. **void** onAllButton(QString objName); 
24. 
25. **private**: 
26. **virtual****void** paintEvent(QPaintEvent \*); 
27. 
28. **private**: 
29.  Ui::Form \*ui; 
30.  QSignalMapper \*mapper; 
31. \}; 
32. 
33. \#endif // FORM\_H

**\[cpp\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#include "form.h"
2.  \#include "ui\_form.h"
3.  \#include <QtWidgets>
4.  
5.  Form::Form(QWidget \*parent) : 
6.   QWidget(parent), 
7.   ui(**new** Ui::Form) 
8.  \{ 
9.   ui->setupUi(**this**); 
10. 
11. **this**\->setAttribute(Qt::WA\_TranslucentBackground); 
12.  QPixmap image1(":/skin/1.png"); 
13.  QPixmap image2(":/skin/2.png"); 
14.  QPixmap image3(":/skin/3.png"); 
15.  QPixmap image4(":/skin/4.png"); 
16.  QPixmap image5(":/skin/5.png"); 
17.  QPixmap image6(":/skin/6.png"); 
18. 
19.  ui->pb1->setIcon(image1); 
20.  ui->pb2->setIcon(image2); 
21.  ui->pb3->setIcon(image3); 
22.  ui->pb4->setIcon(image4); 
23.  ui->pb5->setIcon(image5); 
24.  ui->pb6->setIcon(image6); 
25. 
26.  ui->pb1->setFixedSize(image1.size()); 
27.  ui->pb2->setFixedSize(image2.size()); 
28.  ui->pb3->setFixedSize(image3.size()); 
29.  ui->pb4->setFixedSize(image4.size()); 
30.  ui->pb5->setFixedSize(image5.size()); 
31.  ui->pb6->setFixedSize(image6.size()); 
32. 
33.  ui->pb1->setCursor(QCursor(Qt::PointingHandCursor)); 
34.  ui->pb2->setCursor(QCursor(Qt::PointingHandCursor)); 
35.  ui->pb3->setCursor(QCursor(Qt::PointingHandCursor)); 
36.  ui->pb4->setCursor(QCursor(Qt::PointingHandCursor)); 
37.  ui->pb5->setCursor(QCursor(Qt::PointingHandCursor)); 
38.  ui->pb6->setCursor(QCursor(Qt::PointingHandCursor)); 
39. 
40.  mapper = **new** QSignalMapper(**this**); 
41.  connect(mapper, SIGNAL(mapped(QString)), **this**, SLOT(onAllButton(QString))); 
42.  connect(ui->pb1, SIGNAL(clicked()), mapper, SLOT(map())); 
43.  mapper->setMapping(ui->pb1, ui->pb1->objectName()); 
44.  connect(ui->pb2, SIGNAL(clicked()), mapper, SLOT(map())); 
45.  mapper->setMapping(ui->pb2, ui->pb2->objectName()); 
46.  connect(ui->pb3, SIGNAL(clicked()), mapper, SLOT(map())); 
47.  mapper->setMapping(ui->pb3, ui->pb3->objectName()); 
48.  connect(ui->pb4, SIGNAL(clicked()), mapper, SLOT(map())); 
49.  mapper->setMapping(ui->pb4, ui->pb4->objectName()); 
50.  connect(ui->pb5, SIGNAL(clicked()), mapper, SLOT(map())); 
51.  mapper->setMapping(ui->pb5, ui->pb5->objectName()); 
52.  connect(ui->pb6, SIGNAL(clicked()), mapper, SLOT(map())); 
53.  mapper->setMapping(ui->pb6, ui->pb6->objectName()); 
54. \} 
55. 
56. Form::~Form() 
57. \{ 
58. **delete** ui; 
59. \} 
60. 
61. **void** Form::paintEvent(QPaintEvent \*) 
62. \{ 
63.  QPainter p(**this**); 
64.  QColor clr(97, 175, 175, 100); 
65.  QBrush brush(clr); 
66. //p.drawPixmap(0, 0, QPixmap(":/skin/login.png"));
67.  p.setRenderHint(QPainter::Antialiasing); 
68.  p.setBrush(brush); 
69.  p.setPen(clr); 
70.  p.drawRoundedRect(rect(), 10, 10); 
71. \} 
72. 
73. **void** Form::onAllButton(QString objName) 
74. \{ 
75.  emit sigButtonClick(objName); 
76. \}

Form的使用者只需要connect sigButtonClick信号就可以处理这六个按钮的点击事件  
2>在QDialog上放置的是一个QWidget，在上面右键单击“提升为...”，然后填写Form类名，注意头文件也要对应起来，最后添加就可以了

**\[cpp\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#ifndef DIALOG\_H
2.  \#define DIALOG\_H
3.  
4.  \#include <QDialog>
5.  
6.  **namespace** Ui \{ 
7.  **class** Dialog; 
8.  \} 
9.  
10. **class** Dialog : **public** QDialog 
11. \{ 
12.  Q\_OBJECT 
13. 
14. **public**: 
15. **explicit** Dialog(QWidget \*parent = 0); 
16.  ~Dialog(); 
17. 
18. **private** slots: 
19. **void** on\_pb\_logo\_clicked(**bool** checked); 
20. **void** onAllButton(QString objName); 
21. 
22. **private**: 
23.  Ui::Dialog \*ui; 
24. \}; 
25. 
26. \#endif // DIALOG\_H

**\[cpp\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#include "dialog.h"
2.  \#include "ui\_dialog.h"
3.  \#include "form.h"
4.  \#include <QMessageBox>
5.  
6.  Dialog::Dialog(QWidget \*parent) : 
7.   QDialog(parent), 
8.   ui(**new** Ui::Dialog) 
9.  \{ 
10.  ui->setupUi(**this**); 
11. **this**\->setStyleSheet("background-color:rgb(64, 128, 128);"); 
12.  ui->pb\_logo->setStyleSheet("background-color:transparent;background-image:url(:/skin/game\_box.png)"); 
13.  ui->widget->hide(); 
14. 
15.  connect(ui->widget, SIGNAL(sigButtonClick(QString)), **this**, SLOT(onAllButton(QString))); 
16. \} 
17. 
18. Dialog::~Dialog() 
19. \{ 
20. **delete** ui; 
21. \} 
22. 
23. 
24. **void** Dialog::on\_pb\_logo\_clicked(**bool** checked) 
25. \{ 
26. **if** (checked) \{ 
27.  ui->widget->setVisible(**true**); 
28.  \} **else** \{ 
29.  ui->widget->setVisible(**false**); 
30.  \} 
31. \} 
32. 
33. **void** Dialog::onAllButton(QString objName) 
34. \{ 
35.  QMessageBox::information(**this**, tr("show"), objName); 
36. \}

工程地址：[https://github.com/tujiaw/qtest3][https_github.com_tujiaw_qtest3]

网址：http://blog.csdn.net/tujiaw/article/details/33297159

[SouthEast]: /images/20220715/7528f4cc768b4e23a8d5887b5047265d.png
[view plain]: http://blog.csdn.net/tujiaw/article/details/33297159#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/401808
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/401808/fork
[https_github.com_tujiaw_qtest3]: https://github.com/tujiaw/qtest3