当前位置:   article > 正文

Qt教程 — 3.1 深入了解Qt 控件:Buttons按钮

Qt教程 — 3.1 深入了解Qt 控件:Buttons按钮

目录

1 Buttons按钮简介

1.1 Buttons按钮简介

1.2 Buttons按钮如何选择

2 如何使用Buttons按钮

2.1 QPushButton使用-如何自定义皮肤

2.2 QToolButton使用-如何设置帮助文档

2.3 QRadioButton使用-如何设置开关效果

2.4 QRadioButton使用-如何设置三态选择框

2.5 QCommandLinkButton使用-如何点击转到文件夹

2.6 QDialogButtonBox使用-如何设置链接窗口

3 完整代码


1 Buttons按钮简介

1.1 Buttons按钮简介

在Qt框架中,Buttons控件是用户界面编程中经常使用的一类控件,用于接收用户的点击事件,触发相应的操作。Qt提供了多种按钮控件,以满足不同的使用场景需求。下面是一些常见的Qt按钮控件:

  • QPushButton:QPushButton是最常用的按钮控件,可用于触发一个命令或者操作。它可以显示文本、图标或者两者结合。QPushButton还可以设置为可选中(像切换按钮那样)。

  • QRadioButton:QRadioButton代表单选按钮,通常用于一组选项中选择一个选项的场景。单选按钮之间是互斥的,即在同一组内,选中一个单选按钮将会自动取消选中其他单选按钮。

  • QCheckBox:QCheckBox是复选框控件,用于表示选项的开/关状态。与QRadioButton不同的是,复选框之间是独立的,用户可以同时选中多个复选框。

  • QToolButton:QToolButton是一个通常用于工具栏的按钮。它可以配置为显示一个图标、一个文本或者两者都有。QToolButton可以有不同的行为模式,如自动弹起、菜单模式等。

  • QToggleButton:QToggleButton提供了一个具有两种状态(开和关)的按钮。它类似于QPushButton,但是可以保持按下的状态,直到被再次点击。

1.2 Buttons按钮如何选择

  • 当需要执行一个命令或操作时,使用QPushButton
  • 当在一组选项中需要选择一个时,使用QRadioButton
  • 当需要表示设置或偏好的开/关状态时,使用QCheckBox
  • 在工具栏中提供快速访问操作时,使用QToolButton
  • 当需要一个可以切换状态的按钮时,使用QToggleButton

2 如何使用Buttons按钮

2.1 QPushButton使用-如何自定义皮肤

在2.2节(Qt教程 — 2.1 如何使用Qt Designer 开发UI程序-CSDN博客)我们就已经接触过 QPushButton 了,在 Qt Designer 里连接信号与槽,从而实现了关闭程序的功能。下面开始重新用编写程序的方法实现使用 QPushButton 连接信号和槽实现一个小例子。

(1)在头文件“mainwindow.h”修改代码。1)引入 QPushButton 类 —> 2)声明两个 QPushButton 的对象—>3)声明两个 QPushButton 对象的槽函数。完整代码如下:

  1. #ifndef MAINWINDOW_H
  2. #define MAINWINDOW_H
  3. #include <QMainWindow>
  4. // 导入QPushButton 类
  5. #include<QPushButton>
  6. QT_BEGIN_NAMESPACE
  7. namespace Ui { class MainWindow; }
  8. QT_END_NAMESPACE
  9. class MainWindow : public QMainWindow
  10. {
  11. Q_OBJECT
  12. public:
  13. MainWindow(QWidget *parent = nullptr);
  14. ~MainWindow();
  15. private:
  16. Ui::MainWindow *ui;
  17. // 声明两个pushButton
  18. QPushButton *pushButton1;
  19. QPushButton *pushButton2;
  20. private slots:
  21. // 声明两个pushButton的槽函数
  22. void pushButton1_Clicked();
  23. void pushButton2_Clicked();
  24. };
  25. #endif // MAINWINDOW_H

(2)在头文件“mainwindow.cpp”修改代码。1)设置程序窗口的显示位置和显示大小, 一般出现在中间。—> 2)实例化QPushButton 对象。在初始化的时候可以传入 QString 类型串,作为按钮的显示文本。—> 3)设置按钮的大小和位置。—> 4)连接两个 QPushButton 对象的信号与槽。—> 5)两个 QPushButton 的槽函数实现,设置主窗体的样式表,其中设置background-color 的 rgba 参数即可改变窗体的背景图片。完整代码如下:

  1. #include "mainwindow.h"
  2. #include "ui_mainwindow.h"
  3. MainWindow::MainWindow(QWidget *parent)
  4. : QMainWindow(parent)
  5. , ui(new Ui::MainWindow)
  6. {
  7. ui->setupUi(this);
  8. //设置宽高为 800×480,位置在 0, 0。(0, 0)代表原点, Qt 默认最左上角的点为原点
  9. this->setGeometry(0, 0, 1000, 600);
  10. //实例化两个按钮对象,并设置其显示文本为窗口皮肤 1 和窗口皮肤 2
  11. pushButton1 = new QPushButton("窗口皮肤 1", this);
  12. pushButton2 = new QPushButton("窗口皮肤 2", this);
  13. //设定两个 QPushButton 对象的位置
  14. pushButton1->setGeometry(0,5,80,40);
  15. pushButton2->setGeometry(100,5,80,40);
  16. //信号槽连接
  17. connect(pushButton1, SIGNAL(clicked()), this, SLOT(pushButton1_Clicked()));
  18. connect(pushButton2, SIGNAL(clicked()), this, SLOT(pushButton2_Clicked()));
  19. }
  20. MainWindow::~MainWindow()
  21. {
  22. delete ui;
  23. }
  24. void MainWindow::pushButton1_Clicked()
  25. {
  26. // 应用第一张图片作为背景皮肤,调整大小以铺满窗口
  27. this->setStyleSheet("QMainWindow {background-image: url(/home/qinlong/Qt/04_buttons_example/picture/a8.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}");
  28. }
  29. void MainWindow::pushButton2_Clicked()
  30. {
  31. // 应用第二张图片作为背景皮肤,调整大小以铺满窗口
  32. this->setStyleSheet("QMainWindow {background-image: url(/home/qinlong/Qt/04_buttons_example/picture/r8.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}");
  33. }

可以通过如下this->setStyleSheet()设置背景图片,函数中参数含义如下:

  • background-position: center; 确保图片在窗口中居中显示。
  • background-repeat:no-repeat: no-repeat; 防止图片在背景中重复显示。如果你希望图片完全填充窗口(可能会导致宽高比变化),可以将background-size设置为100% 100%
  • background-size:属性设置为cover(保持宽高比缩放图片,直到窗口被图片完全覆盖)或contain(保持宽高比缩放图片,直到图片能够完全显示在窗口内部),或者直接设置为100% 100%来强制图片铺满整个窗口但可能会改变图片的宽高比。

(3)运行效果如下:

2.2 QToolButton使用-如何设置帮助文档

工具按钮(QToolButton)区别于普通按钮(QPushButton)的一点是,工具按钮(QToolButton)
可以带图标。这里区别下图标和按钮的背景图片是不一样的。通常我们在 QToolBar 这种工具条
(工具栏)上设置不同的按钮,如果这些按钮还带图标和文本,那么 QToolButton 是个不错的
选择。继续在上面的项目中修改。

(1)在头文件“mainwindow.h”修改代码。1)同样,声明 QToolButton 对象和 QtoolBar 对象。具体代码如下:

  1. #ifndef MAINWINDOW_H
  2. #define MAINWINDOW_H
  3. #include <QMainWindow>
  4. // 导入QPushButton类
  5. #include<QPushButton>
  6. // 导入QToolButton 类和QToolBar类
  7. #include <QToolButton>
  8. #include <QToolBar>
  9. QT_BEGIN_NAMESPACE
  10. namespace Ui { class MainWindow; }
  11. QT_END_NAMESPACE
  12. class MainWindow : public QMainWindow
  13. {
  14. Q_OBJECT
  15. public:
  16. MainWindow(QWidget *parent = nullptr);
  17. ~MainWindow();
  18. private:
  19. Ui::MainWindow *ui;
  20. // 声明两个pushButton
  21. QPushButton *pushButton1;
  22. QPushButton *pushButton2;
  23. // 声明一个 QToolButton 对象和QToolBar 对象
  24. QToolButton *toolButton;
  25. QToolBar *toolBar;
  26. private slots:
  27. // 声明两个pushButton的槽函数
  28. void pushButton1_Clicked();
  29. void pushButton2_Clicked();
  30. };
  31. #endif // MAINWINDOW_H

(2)在源文件“mainwindow.cpp”修改代码。1)初始化 toolBar(工具条/工具栏)对象,然后初始化 toolButton(工具按钮)对象。—> 2)设置工具按钮的样式。—> 3)最后将 toolButton(工具按钮)添加到 toolBar(工具条/工具栏)上。这样就完成了自定义工具栏的设计。具体代码如下:

  1. #include "mainwindow.h"
  2. #include "ui_mainwindow.h"
  3. #include <QStyle>
  4. MainWindow::MainWindow(QWidget *parent)
  5. : QMainWindow(parent)
  6. , ui(new Ui::MainWindow)
  7. {
  8. ui->setupUi(this);
  9. //设置宽高为 800×480,位置在 0, 0。(0, 0)代表原点, Qt 默认最左上角的点为原点
  10. this->setGeometry(0, 0, 1000, 600);
  11. //实例化两个按钮对象,并设置其显示文本为窗口皮肤 1 和窗口皮肤 2
  12. pushButton1 = new QPushButton("窗口皮肤 1", this);
  13. pushButton2 = new QPushButton("窗口皮肤 2", this);
  14. //实例化 QToolBar 对象
  15. toolBar = new QToolBar(this);
  16. //实例化 QStyle 类对象,用于设置风格,调用系统类自带的图标
  17. QStyle *style = QApplication::style();
  18. //实例化 QToolButton对象
  19. toolButton = new QToolButton();
  20. //设定两个 QPushButton 对象的位置
  21. pushButton1->setGeometry(0,5,120,60);
  22. pushButton2->setGeometry(130,5,120,60);
  23. //设置 toolBar 的位置和大小
  24. toolBar->setGeometry(260, 5, 60,60);
  25. //信号槽连接
  26. connect(pushButton1, SIGNAL(clicked()), this, SLOT(pushButton1_Clicked()));
  27. connect(pushButton2, SIGNAL(clicked()), this, SLOT(pushButton2_Clicked()));
  28. //使用 Qt 自带的标准图标,可以在帮助文档里搜索 QStyle::StandardPixmap
  29. QIcon icon = style->standardIcon(QStyle::SP_TitleBarContextHelpButton);
  30. //设置图标
  31. toolButton->setIcon(icon);
  32. //设置要显示的文本
  33. toolButton->setText("帮助");
  34. //调用 setToolButtonStyle()方法,设置 toolButoon 的样式,设置为文本置于标下方
  35. toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
  36. //最后将 toolButton 添加到 ToolBar里
  37. toolBar->addWidget(toolButton);
  38. }
  39. MainWindow::~MainWindow()
  40. {
  41. delete ui;
  42. }
  43. void MainWindow::pushButton1_Clicked()
  44. {
  45. // 应用第一张图片作为背景皮肤,调整大小以铺满窗口
  46. this->setStyleSheet("QMainWindow {background-image: url(/home/qinlong/Qt/04_buttons_example/picture/a8.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}");
  47. }
  48. void MainWindow::pushButton2_Clicked()
  49. {
  50. // 应用第二张图片作为背景皮肤,调整大小以铺满窗口
  51. this->setStyleSheet("QMainWindow {background-image: url(/home/qinlong/Qt/04_buttons_example/picture/r8.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}");
  52. }

(3)实现的效果如下:

2.3 QRadioButton使用-如何设置开关效果

QRadioButton 部件提供了一个带有文本标签的单选框(单选按钮)。QRadioButton 是一个可以切换选中(checked)或未选中(unchecked)状态的选项按钮。单选框通常呈现给用户一个“多选一”的选择。也就是说,在一组单选框中,一次只能选中一个单选框。默认在同一个父对象下,初始化后点击它们是互斥状态。

本例将实现手机开关效果,需要使用到Qt 样式表,加载 qss 样式表文件。 这里我们慢慢接触 Qt 的样式表了,正因为有样式表我们才能写一些比较有实际应用的例子和比较炫的例子。在上面的项目文件中继续修改。

(1) 添加资源文件, 按如下步骤。 右键项目—> 选择 Add New…。

(2) 选择一个模板,选择 Qt 模板—>再选择 Qt Resource Files—>点击 Choose。

 (3) 填上资源文件的名称(可随意写一个, 笔者简写为 res),默认添加项目路径下。后面的步
骤默认即可,点击完成。


(4) 新建完成了资源文件后,默认会进入 res.qrc 文件编辑模式(如果关闭了,可以右键这个文
件点击选择“Open in Editor”)。—>点击 Add Prefix 添加前缀(添加前缀的目的是方便分类管理文
件)—>  添加了前缀 /。“/” 一定需要写, 否则会找不到路径。

(5)添加了前缀后,准备两张图片,放在/picture 路径下(文件夹先手动创建)。—> 点击Add Files添加两张照片。—> 添加完成需要按“Ctrl+ S”保存 res.qrc 才会看到左边的结果。添加完成如下图。


Qt样式表(QSS)是一种使用类似于CSS(层叠样式表)的语法来自定义Qt应用程序界面外观的方式。QSS可以用来设置控件的背景颜色、边框、字体等属性。它为Qt应用程序提供了一种强大而灵活的方式来控制UI元素的视觉表现,而无需改动代码逻辑。

(6) 通过如下的方式添加qss文件。右键选中res.qrc文件 —> 添加文件  —> Qt  —> Qt Ressource File —> Choose.

 (7) 新建一个 style.qss 文件,如下图,默认添加到项目的路径下,后面步骤默认即可,直至完成。

(8)  qss 文件添加后如下图。

(9) 在头文件“mainwindow.h”添加如下代码。

  1. #ifndef MAINWINDOW_H
  2. #define MAINWINDOW_H
  3. #include <QMainWindow>
  4. /* 引入 QRadioButton */
  5. #include <QRadioButton>
  6. class MainWindow : public QMainWindow
  7. {
  8. Q_OBJECT
  9. public:
  10. MainWindow(QWidget *parent = nullptr);
  11. ~MainWindow();
  12. private:
  13. /* 声明两个 QRadioButton 对象 */
  14. QRadioButton *radioButton1;
  15. QRadioButton *radioButton2;
  16. };
  17. #endif // MAINWINDOW_H

(10) 在源文件“mainwindow.cpp”添加如下代码。

  1. #include "mainwindow.h"
  2. MainWindow::MainWindow(QWidget *parent)
  3. : QMainWindow(parent)
  4. , ui(new Ui::MainWindow)
  5. {
  6. ui->setupUi(this);
  7. //设置宽高为 800×480,位置在 0, 0。(0, 0)代表原点, Qt 默认最左上角的点为原点
  8. this->setGeometry(0, 0, 1000, 600);
  9. //实例化QRadioButton对象
  10. radioButton1 = new QRadioButton(this);
  11. radioButton2 = new QRadioButton(this);
  12. /* 设置两个 QRadioButton 的位置和显示大小 */
  13. radioButton1->setGeometry(390, 5, 100, 50);
  14. radioButton2->setGeometry(500, 5, 100, 50);
  15. //设置两个 QRadioButton 的显示文本
  16. radioButton1->setText("开关一");
  17. radioButton2->setText("开关二");
  18. // 设置初始状态, radioButton1 的 Checked 为 false,另一个为 true
  19. radioButton1->setChecked(false);
  20. radioButton2->setChecked(true);
  21. }
  22. MainWindow::~MainWindow()
  23. {
  24. }

(11) 在源文件“main.cpp”具体代码如下。我们需要在 main.cpp 里加载 qss 文件。添加后的代码如下:

  1. #include <QApplication>
  2. /* 引入 QFile */
  3. #include <QFile>
  4. int main(int argc, char *argv[])
  5. {
  6. QApplication a(argc, argv);
  7. //指定文件
  8. QFile file(":/style.qss");
  9. //判断文件是否存在
  10. if(file.exists()){
  11. //以只读的方式打开
  12. file.open(QFile::ReadOnly);
  13. //以字符串的方式保存读出的结果
  14. QString styleSheet = QLatin1String(file.readAll());
  15. //设置全局样式
  16. qApp->setStyleSheet(styleSheet);
  17. //关闭文件
  18. file.close();
  19. }
  20. MainWindow w;
  21. w.show();
  22. return a.exec();
  23. }

在源文件“style.qss”具体代码如下,与 HTML 里的 css 语法相似。如果不会写 qss 的内容,
可以参考 Qt 帮助文档的内容,在里面搜索“qt style”。在里面找相关的例子参考,这里我们只
是初步了解下这个 qt style。

  1. <!DOCTYPE RCC>
  2. <RCC version="1.0"/>
  3. QRadioButton{
  4. spacing: 2px;
  5. color: white;
  6. }
  7. QRadioButton::indicator {
  8. width: 45px;
  9. height: 30px;
  10. }
  11. QRadioButton::indicator:unchecked {
  12. image: url(:picture/a8.jpg);
  13. }
  14. QRadioButton::indicator:checked {
  15. image: url(:picture/r8.jpg);
  16. }

运行后的效果如下: 

2.4 QRadioButton使用-如何设置三态选择框

QCheckBox 继承 QAbstractButton。复选按钮(复选框)与 RadioButton 的区别是选择模式,
单选按钮提供多选一,复选按钮提供多选多。
三态选择框,使用一个 QCheckBox,用户通过点击可改变当选择框的状态。在前面的项目基础上进行修改,也可以单独建立项目。

(1) 在头文件“mainwindow.h”中修改代码。导入QCheckBox —> 声明一个 QCheckBox 对象—> 声明 QCheckBox 的槽函数,并带参数传递,用这个参数接收信号的参数。添加的代码如下:

  1. #ifndef MAINWINDOW_H
  2. #define MAINWINDOW_H
  3. #include <QMainWindow>
  4. // 导入QCheckBox
  5. #include <QCheckBox>
  6. class MainWindow : public QMainWindow
  7. {
  8. Q_OBJECT
  9. public:
  10. MainWindow(QWidget *parent = nullptr);
  11. ~MainWindow();
  12. private:
  13. // 声明一个 QCheckBox 对象
  14. QCheckBox *checkBox;
  15. private slots:
  16. // 声明 QCheckBox 的槽函数,并带参数传递,用这个参数接收信号的参数
  17. void checkBoxStateChanged(int);
  18. };
  19. #endif // MAINWINDO

(2) 在源文件“mainwindow.cpp”中修改代码。

  1. #include "mainwindow.h"
  2. #include "ui_mainwindow.h"
  3. MainWindow::MainWindow(QWidget *parent)
  4. : QMainWindow(parent)
  5. , ui(new Ui::MainWindow)
  6. {
  7. ui->setupUi(this);
  8. //设置宽高为 800×480,位置在 0, 0。(0, 0)代表原点, Qt 默认最左上角的点为原点
  9. this->setGeometry(0, 0, 1000, 600);
  10. this->setStyleSheet("QMainWindow {background-color: rgba(200, 50, 100, 100%);}");
  11. //实例化对象
  12. checkBox = new QCheckBox(this);
  13. //设置 QCheckBox 位置和显示大小
  14. checkBox->setGeometry(630, 5, 300, 50);
  15. // 初始化三态复选框的状态为 Checked
  16. checkBox->setCheckState(Qt::Checked);
  17. // 设置显示的文本
  18. checkBox->setText("初始化为选项1");
  19. // 开启三态模式,必须开启,否则只有两种状态,即 Checked 和 Unchecked
  20. checkBox->setTristate();
  21. // 连接 checkBox 的信号 stateChanged(int),与我们定义的槽checkBoxStateChanged(int)连接
  22. connect(checkBox, SIGNAL(stateChanged(int)), this, SLOT(checkBoxStateChanged(int)));
  23. }
  24. MainWindow::~MainWindow()
  25. {
  26. }
  27. // 三态槽函数的实现
  28. void MainWindow::checkBoxStateChanged(int state)
  29. {
  30. /* 判断 checkBox 的 state 状态,设置 checkBox 的文本 */
  31. switch (state) {
  32. case Qt::Checked:
  33. /* 选中状态 */
  34. checkBox->setText("选项1");
  35. break;
  36. case Qt::Unchecked:
  37. /* 未选中状态 */
  38. checkBox->setText("选项2");
  39. break;
  40. case Qt::PartiallyChecked:
  41. /* 半选状态 */
  42. checkBox->setText("选项3");
  43. break;
  44. default:
  45. break;
  46. }
  47. }

(3) 在源文件“main.app”中修改代码。main.app与上节相同。

(4) 在源文件“style.qss”中修改代码。

  1. QCheckBox{
  2. spacing: 5px;
  3. color: white;
  4. }
  5. QCheckBox::indicator {
  6. width: 50px;
  7. height: 50px;
  8. }
  9. QCheckBox::indicator:enabled:unchecked {
  10. image: url(:/images/unchecked.png);
  11. }
  12. QCheckBox::indicator:enabled:checked {
  13. image: url(:/images/checked.png);
  14. }
  15. QCheckBox::indicator:enabled:indeterminate {
  16. image: url(:/images/indeterminate.png);
  17. }

(5) 编译程序运行的效果如下, 多次点击 checkBox,即可看到 QCheckBox 的三种状态切换

2.5 QCommandLinkButton使用-如何点击转到文件夹

QCommandLinkButton 控件中文名是“命令链接按钮 ”。 QCommandLinkButton 继承
QPushButton。CommandLinkButton 控件和 RadioButton 相似,都是用于在互斥选项中选择一项。表面上同平面按钮一样,但是 CommandLinkButton 除带有正常的按钮上的文字描述文本外,默认情况下,它也将携带一个箭头图标,表明按下按钮将打开另一个窗口或页面。

(1) 在头文件“mainwindow.h”中修改代码。

  1. #ifndef MAINWINDOW_H
  2. #define MAINWINDOW_H
  3. #include <QMainWindow>
  4. // 导入QCommandLinkButton
  5. #include <QCommandLinkButton>
  6. QT_BEGIN_NAMESPACE
  7. namespace Ui { class MainWindow; }
  8. QT_END_NAMESPACE
  9. class MainWindow : public QMainWindow
  10. {
  11. Q_OBJECT
  12. public:
  13. MainWindow(QWidget *parent = nullptr);
  14. ~MainWindow();
  15. private:
  16. // 声明一个 QCommandLinkButton 对象
  17. QCommandLinkButton *commandLinkButton;
  18. private slots:
  19. // 声明槽函数,用于点击 commandLinkButton 后触发
  20. void commandLinkButtonClicked();
  21. };
  22. #endif // MAINWINDOW_H

(2) 在源文件“mainwindow.cpp”具体代码如下。

  1. #include "mainwindow.h"
  2. #include "ui_mainwindow.h"
  3. #include <QDesktopServices>
  4. #include <QUrl>
  5. MainWindow::MainWindow(QWidget *parent)
  6. : QMainWindow(parent)
  7. , ui(new Ui::MainWindow)
  8. {
  9. ui->setupUi(this);
  10. //设置宽高为 800×480,位置在 0, 0。(0, 0)代表原点, Qt 默认最左上角的点为原点
  11. this->setGeometry(0, 0, 1000, 600);
  12. this->setStyleSheet("QMainWindow {background-color: rgba(255, 255, 255, 100%);}");
  13. //实例化QCommandLinkButton对象
  14. commandLinkButton = new QCommandLinkButton("打开/home目录", "点击",this);
  15. //设置 QCommandLinkButton 位置和显示大小
  16. commandLinkButton->setGeometry(0, 100, 250, 60);
  17. //信号槽连接
  18. connect(commandLinkButton, SIGNAL(clicked()), this, SLOT(commandLinkButtonClicked()));
  19. }
  20. MainWindow::~MainWindow()
  21. {
  22. delete ui;
  23. }
  24. void MainWindow::commandLinkButtonClicked()
  25. {
  26. //调用系统服务打开/home 目录
  27. QDesktopServices::openUrl(QUrl("file:home/") );
  28. }

(3)  编译程序运行的效果如下。点击打开/home 目录后,系统将弹出/home 目录路径窗口。

2.6 QDialogButtonBox使用-如何设置链接窗口

对话框和消息框通常以符合该平台界面指导原则的布局呈现按钮。不同平台的对话框总是有不同的布局。 QDialogButtonBox 允许开发人员向其添加按钮,并将自动使用适合用户桌面环境的布局。 也就是说我们可以使用系统的自带的对话框按钮,也可以自己定义对话框按钮。

QDialogButtonBox 常用的按钮有如下几种,

  • QDialogButtonBox::Ok:添加一个“确定”按钮。
  • QDialogButtonBox::Cancel:添加一个“取消”按钮。
  • QDialogButtonBox::Open:添加一个“打开”按钮。
  • QDialogButtonBox::Save:添加一个“保存”按钮。
  • QDialogButtonBox::Close:添加一个“关闭”按钮。
  • QDialogButtonBox::Discard:添加一个“丢弃”按钮,通常用于放弃当前的更改。
  • QDialogButtonBox::Apply:添加一个“应用”按钮,用于应用更改而不关闭对话框。
  • QDialogButtonBox::Reset:添加一个“重置”按钮,将界面恢复到默认或上一次保存的状态。
  • QDialogButtonBox::RestoreDefaults:添加一个“恢复默认设置”按钮,恢复到程序默认的设置。
  • QDialogButtonBox::Help:添加一个“帮助”按钮,通常用于打开帮助文档或提供帮助信息。
  • QDialogButtonBox::SaveAll:添加一个“保存所有”按钮,可能用于保存对多个项目或文件的更改。

(1) 在头文件“mainwindow.h”具体代码如下。

  1. #ifndef MAINWINDOW_H
  2. #define MAINWINDOW_H
  3. #include <QMainWindow>
  4. // 导入QDialogButtonBox
  5. #include <QDialogButtonBox>
  6. // 导入QPuhsButton
  7. #include <QPushButton>
  8. QT_BEGIN_NAMESPACE
  9. namespace Ui { class MainWindow; }
  10. QT_END_NAMESPACE
  11. class MainWindow : public QMainWindow
  12. {
  13. Q_OBJECT
  14. public:
  15. MainWindow(QWidget *parent = nullptr);
  16. ~MainWindow();
  17. private:
  18. // 声明一个 QDialogButtonBox 对象
  19. QDialogButtonBox *dialogButtonBox;
  20. // 声明一个 QPushButton 对象
  21. QPushButton *pushButton;
  22. private slots:
  23. // 声明信号槽,带 QAbstractButton *参数,用于判断点击了哪个按钮
  24. void dialogButtonBoxClicked(QAbstractButton *);
  25. };
  26. #endif // MAINWINDOW_H

(2) 在头文件“mainwindow.cpp”修改代码,具体代码如下。

  1. #include "mainwindow.h"
  2. #include "ui_mainwindow.h"
  3. #include <QDebug>
  4. MainWindow::MainWindow(QWidget *parent)
  5. : QMainWindow(parent)
  6. , ui(new Ui::MainWindow)
  7. {
  8. ui->setupUi(this);
  9. //设置宽高为 800×480,位置在 0, 0。(0, 0)代表原点, Qt 默认最左上角的点为原点
  10. this->setGeometry(0, 0, 1000, 600);
  11. this->setStyleSheet("QMainWindow {background-color: rgba(255, 255, 255, 100%);}");
  12. //实例化dialogButtonBox对象
  13. dialogButtonBox = new QDialogButtonBox(this);
  14. //设置 QdialogButtonBox 位置和显示大小
  15. dialogButtonBox->setGeometry(300, 200, 200, 30);
  16. //使用 Qt 的 Cancel 按钮
  17. dialogButtonBox->addButton(QDialogButtonBox::Cancel);
  18. //将英文"Cancel"按钮设置为中文"取消"
  19. dialogButtonBox->button(QDialogButtonBox::Cancel)->setText("取消");
  20. //设定位置与大小
  21. pushButton = new QPushButton(tr("自定义"));
  22. //将 pushButton 添加到 dialogButtonBox,并设定 ButtonRole 为 ActionRole
  23. dialogButtonBox->addButton(pushButton,
  24. QDialogButtonBox::ActionRole);
  25. //信号槽连接,带参数 QAbstractButton *,用于判断用户点击哪个按键
  26. connect(dialogButtonBox, SIGNAL(clicked(QAbstractButton * )),this, SLOT(dialogButtonBoxClicked(QAbstractButton *)));
  27. }
  28. MainWindow::~MainWindow()
  29. {
  30. delete ui;
  31. }
  32. void MainWindow::dialogButtonBoxClicked(QAbstractButton *button)
  33. {
  34. //判断点击的对象是否为 QDialogButtonBox::Cancel
  35. if(button == dialogButtonBox->button(QDialogButtonBox::Cancel)) {
  36. //打印“单击了取消键” */
  37. qDebug() <<"单击了取消键"<<endl;
  38. //判断点击的对象是否为 pushButton
  39. }else if(button == pushButton) {
  40. //打印“单击了自定义键”
  41. qDebug() <<"单击了自定义键"<<endl;
  42. }
  43. }

(3)  编译程序运行的效果如下。点击自定义按钮和取消按钮,在应用程序输出窗口可以看到对
应的点击事件。

3 完整代码

完整的mainwindow.h文件如下:

  1. #ifndef MAINWINDOW_H
  2. #define MAINWINDOW_H
  3. #include <QMainWindow>
  4. // 导入QPushButton类
  5. #include<QPushButton>
  6. // 导入QToolButton 类和QToolBar类
  7. #include <QToolButton>
  8. #include <QToolBar>
  9. // 导入QRadioButton
  10. #include <QRadioButton>
  11. // 导入QCheckBox
  12. #include <QCheckBox>
  13. // 导入QCommandLinkButton
  14. #include <QCommandLinkButton>
  15. // 导入QDialogButtonBox
  16. #include <QDialogButtonBox>
  17. // 导入QPuhsButton
  18. #include <QPushButton>
  19. QT_BEGIN_NAMESPACE
  20. namespace Ui { class MainWindow; }
  21. QT_END_NAMESPACE
  22. class MainWindow : public QMainWindow
  23. {
  24. Q_OBJECT
  25. public:
  26. MainWindow(QWidget *parent = nullptr);
  27. ~MainWindow();
  28. private:
  29. Ui::MainWindow *ui;
  30. // 声明两个pushButton
  31. QPushButton *pushButton1;
  32. QPushButton *pushButton2;
  33. // 声明一个 QToolButton 对象和QToolBar 对象
  34. QToolButton *toolButton;
  35. QToolBar *toolBar;
  36. // 声明两个 QRadioButton 对象
  37. QRadioButton *radioButton1;
  38. QRadioButton *radioButton2;
  39. // 声明一个 QCheckBox 对象
  40. QCheckBox *checkBox;
  41. // 声明一个 QCommandLinkButton 对象
  42. QCommandLinkButton *commandLinkButton;
  43. // 声明一个 QDialogButtonBox 对象
  44. QDialogButtonBox *dialogButtonBox;
  45. // 声明一个 QPushButton 对象
  46. QPushButton *pushButton;
  47. private slots:
  48. // 声明两个pushButton的槽函数
  49. void pushButton1_Clicked();
  50. void pushButton2_Clicked();
  51. // 声明 QCheckBox 的槽函数,并带参数传递,用这个参数接收信号的参数
  52. void checkBoxStateChanged(int);
  53. // 声明槽函数,用于点击 commandLinkButton 后触发
  54. void commandLinkButtonClicked();
  55. // 声明信号槽,带 QAbstractButton *参数,用于判断点击了哪个按钮
  56. void dialogButtonBoxClicked(QAbstractButton *);
  57. };
  58. #endif // MAINWINDOW_H

完整的main.cpp文件如下:

  1. #include "mainwindow.h"
  2. #include <QApplication>
  3. /* 引入 QFile */
  4. #include <QFile>
  5. int main(int argc, char *argv[])
  6. {
  7. QApplication a(argc, argv);
  8. //指定文件
  9. QFile file(":/style.qss");
  10. //判断文件是否存在
  11. if(file.exists()){
  12. //以只读的方式打开
  13. file.open(QFile::ReadOnly);
  14. //以字符串的方式保存读出的结果
  15. QString styleSheet = QLatin1String(file.readAll());
  16. //设置全局样式
  17. qApp->setStyleSheet(styleSheet);
  18. //关闭文件
  19. file.close();
  20. }
  21. MainWindow w;
  22. w.show();
  23. return a.exec();
  24. }

完整的mainwindow.cpp文件如下: 

  1. #include "mainwindow.h"
  2. #include "ui_mainwindow.h"
  3. #include <QStyle>
  4. #include <QDesktopServices>
  5. #include <QUrl>
  6. #include <QDebug>
  7. MainWindow::MainWindow(QWidget *parent)
  8. : QMainWindow(parent)
  9. , ui(new Ui::MainWindow)
  10. {
  11. ui->setupUi(this);
  12. //设置宽高为 800×480,位置在 0, 0。(0, 0)代表原点, Qt 默认最左上角的点为原点
  13. this->setGeometry(0, 0, 1000, 600);
  14. this->setStyleSheet("QMainWindow {background-color: rgba(255, 255, 255, 100%);}");
  15. //实例化两个按钮对象,并设置其显示文本为窗口皮肤 1 和窗口皮肤 2
  16. pushButton1 = new QPushButton("窗口皮肤 1", this);
  17. pushButton2 = new QPushButton("窗口皮肤 2", this);
  18. //实例化 QToolBar 对象
  19. toolBar = new QToolBar(this);
  20. //实例化 QStyle 类对象,用于设置风格,调用系统类自带的图标
  21. QStyle *style = QApplication::style();
  22. //实例化 QToolButton对象
  23. toolButton = new QToolButton();
  24. //实例化QRadioButton对象
  25. radioButton1 = new QRadioButton(this);
  26. radioButton2 = new QRadioButton(this);
  27. //实例化QCheckBox对象
  28. checkBox = new QCheckBox(this);
  29. //实例化QCommandLinkButton对象
  30. commandLinkButton = new QCommandLinkButton("打开/home目录", "点击",this);
  31. //实例化dialogButtonBox对象
  32. dialogButtonBox = new QDialogButtonBox(this);
  33. //设定两个 QPushButton 对象的位置
  34. pushButton1->setGeometry(0,5,120,60);
  35. pushButton2->setGeometry(130,5,120,60);
  36. //设置 toolBar 的位置和大小
  37. toolBar->setGeometry(260, 5, 60,60);
  38. //设置两个 QRadioButton 的位置和显示大小
  39. radioButton1->setGeometry(390, 5, 100, 50);
  40. radioButton2->setGeometry(500, 5, 100, 50);
  41. //设置 QCheckBox 位置和显示大小
  42. checkBox->setGeometry(630, 5, 300, 50);
  43. //设置 QCommandLinkButton 位置和显示大小
  44. commandLinkButton->setGeometry(0, 100, 250, 60);
  45. //设置 QdialogButtonBox 位置和显示大小
  46. dialogButtonBox->setGeometry(300, 200, 200, 30);
  47. //信号槽连接
  48. connect(pushButton1, SIGNAL(clicked()), this, SLOT(pushButton1_Clicked()));
  49. connect(pushButton2, SIGNAL(clicked()), this, SLOT(pushButton2_Clicked()));
  50. //使用 Qt 自带的标准图标,可以在帮助文档里搜索 QStyle::StandardPixmap
  51. QIcon icon = style->standardIcon(QStyle::SP_TitleBarContextHelpButton);
  52. //设置图标
  53. toolButton->setIcon(icon);
  54. //设置要显示的文本
  55. toolButton->setText("帮助");
  56. //调用 setToolButtonStyle()方法,设置 toolButoon 的样式,设置为文本置于标下方
  57. toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
  58. //最后将 toolButton 添加到 ToolBar里
  59. toolBar->addWidget(toolButton);
  60. //设置两个 QRadioButton 的显示文本
  61. radioButton1->setText("开关一");
  62. radioButton2->setText("开关二");
  63. // 设置初始状态, radioButton1 的 Checked 为 false,另一个为 true
  64. radioButton1->setChecked(false);
  65. radioButton2->setChecked(true);
  66. // 初始化三态复选框的状态为 Checked
  67. checkBox->setCheckState(Qt::Checked);
  68. // 设置显示的文本
  69. checkBox->setText("初始化为选项1");
  70. // 开启三态模式,必须开启,否则只有两种状态,即 Checked 和 Unchecked
  71. checkBox->setTristate();
  72. // 连接 checkBox 的信号 stateChanged(int),与我们定义的槽checkBoxStateChanged(int)连接
  73. connect(checkBox, SIGNAL(stateChanged(int)), this, SLOT(checkBoxStateChanged(int)));
  74. //信号槽连接
  75. connect(commandLinkButton, SIGNAL(clicked()), this, SLOT(commandLinkButtonClicked()));
  76. //使用 Qt 的 Cancel 按钮
  77. dialogButtonBox->addButton(QDialogButtonBox::Cancel);
  78. //将英文"Cancel"按钮设置为中文"取消"
  79. dialogButtonBox->button(QDialogButtonBox::Cancel)->setText("取消");
  80. //设定位置与大小
  81. pushButton = new QPushButton(tr("自定义"));
  82. //将 pushButton 添加到 dialogButtonBox,并设定 ButtonRole 为 ActionRole
  83. dialogButtonBox->addButton(pushButton,
  84. QDialogButtonBox::ActionRole);
  85. //信号槽连接,带参数 QAbstractButton *,用于判断用户点击哪个按键
  86. connect(dialogButtonBox, SIGNAL(clicked(QAbstractButton * )),this, SLOT(dialogButtonBoxClicked(QAbstractButton *)));
  87. }
  88. MainWindow::~MainWindow()
  89. {
  90. delete ui;
  91. }
  92. void MainWindow::pushButton1_Clicked()
  93. {
  94. // 应用第一张图片作为背景皮肤,调整大小以铺满窗口
  95. this->setStyleSheet("QMainWindow {background-image: url(/home/qinlong/Qt/04_buttons_example/picture/a8.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}");
  96. }
  97. void MainWindow::pushButton2_Clicked()
  98. {
  99. // 应用第二张图片作为背景皮肤,调整大小以铺满窗口
  100. this->setStyleSheet("QMainWindow {background-image: url(/home/qinlong/Qt/04_buttons_example/picture/r8.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}");
  101. }
  102. // 三态槽函数的实现
  103. void MainWindow::checkBoxStateChanged(int state)
  104. {
  105. /* 判断 checkBox 的 state 状态,设置 checkBox 的文本 */
  106. switch (state) {
  107. case Qt::Checked:
  108. /* 选中状态 */
  109. checkBox->setText("选项1");
  110. break;
  111. case Qt::Unchecked:
  112. /* 未选中状态 */
  113. checkBox->setText("选项2");
  114. break;
  115. case Qt::PartiallyChecked:
  116. /* 半选状态 */
  117. checkBox->setText("选项3");
  118. break;
  119. default:
  120. break;
  121. }
  122. }
  123. void MainWindow::commandLinkButtonClicked()
  124. {
  125. //调用系统服务打开/home 目录
  126. QDesktopServices::openUrl(QUrl("file:home/") );
  127. }
  128. void MainWindow::dialogButtonBoxClicked(QAbstractButton *button)
  129. {
  130. //判断点击的对象是否为 QDialogButtonBox::Cancel
  131. if(button == dialogButtonBox->button(QDialogButtonBox::Cancel)) {
  132. //打印“单击了取消键” */
  133. qDebug() <<"单击了取消键"<<endl;
  134. //判断点击的对象是否为 pushButton
  135. }else if(button == pushButton) {
  136. //打印“单击了自定义键”
  137. qDebug() <<"单击了自定义键"<<endl;
  138. }
  139. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/271300
推荐阅读
相关标签
  

闽ICP备14008679号