QT按钮部件总结

文章目录

• 系列文章目录
• 前言
• 一、普通按钮
• 二、工具按钮
• 三、单选按钮
• 四、复选按钮
• 五、命令连接按钮
• 六、总结

前言

默认部件基类
QT提供的默认部件基类包括QMainWindow、QWidget、和QDialog这三种，这三个部件基类也是用的最多的。
QMainWindow是带有菜单栏、工具栏、状态栏的主窗口类，它有自己单独的布局。布局有一个中心区域，通常是标准的Qt部件，也可以是定制部件，且必须有一个中心小部件。setCentralWidget()方法可设置中心部件。
QWidget类是所有部件对象的基类，被称为基础窗口部件，继承关系详看QWidget类关系图。QWidget提供自我绘制和处理用户输入等基本功能，如接收鼠标、键盘和其它事件，并且在屏幕上绘制自己的表现。每一个窗口部件都是矩形，并且它们按Z轴顺序排列的。一个窗口部件可以被它的父窗口部件或者它前面的窗口部件盖住一部分。一个没有父窗口部件的窗口部件一直是顶级窗口部件。非顶级窗口部件是父窗口的子部件。QWidget构造函数有两个参数：QWidget *parent = 0,Qt::WindowFlags f = 0。parent即父窗口，默认为0，即没有父窗口，是顶级窗口，如果指定parent值则当前窗体将会是一个子部件。Qt::WindowFlags是Qt::WindowType枚举值的组合，用来设置窗口的属性，f = 0表默认为Qt::Widget风格，其余窗口属性详见附件表一。setWindowState（）可设置窗体的状态，参数由Qt::WindowStates枚举值指定，窗体状态如下表所示

一、按钮类

1.普通按钮（QPushButton）

实现效果：窗口换肤，通过单击不同的按钮，改变窗口的颜色

• 创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类
• 头文件 “mainwindow.h” 中具体代码如下

QPushButton：下压按钮，继承 QAbstractButton 类，被 QCommandLinkButton 继承。常用于执行命令或触发事件 

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
/* 引入 QPushButton 类 */
#include <QPushButton>

class MainWindow : public QMainWindow {
	Q_OBJECT
public:
	MainWindow(QWidget *parent = nullptr);
	~MainWindow();
private:
	/* 声明一个 QPushButton 对象 pushButton1 */
	QPushButton *pushButton1;
	/* 声明一个 QPushButton 对象 pushButton2 */
	QPushButton *pushButton2;
private slots:
	/* 声明对象 pushButton1 的槽函数 */
	void pushButton1_Clicked();
	/* 声明对象 pushButton2 的槽函数 */
	void pushButton2_Clicked();
};
#endif // MAINWINDOW_H

• 源文件 “mainwindow.cpp” 中具体代码如下

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) {
	/* 设置宽高为 800×480,位置在 0,0。（0,0）代表原点，默认最左上角的点为原点 */
	this->setGeometry(0, 0, 800, 480);
	/* 实例化两个按钮对象，并设置其显示文本为窗口皮肤 1 和窗口皮肤 2 */
	pushButton1 = new QPushButton("窗口皮肤 1", this);
	pushButton2 = new QPushButton("窗口皮肤 2", this);
	/* 设定两个 QPushButton 对象的位置 */
	pushButton1->setGeometry(300,200,80,40);
	pushButton2->setGeometry(400,200,80,40);
	/* 信号槽连接 */
	connect(pushButton1, SIGNAL(clicked()), this, SLOT(pushButton1_Clicked()));
	connect(pushButton2, SIGNAL(clicked()), this, SLOT(pushButton2_Clicked()));
}

MainWindow::~MainWindow() {
}

/* 槽函数的实现 */
void MainWindow::pushButton1_Clicked() {
	/* 设置主窗口的样式 1 */
	this->setStyleSheet("QMainWindow { background-color: rgba(255, 245, 238, 100%); }");
}

/* 槽函数的实现 */
void MainWindow::pushButton2_Clicked() {
	/* 设置主窗口的样式 2 */
	this->setStyleSheet("QMainWindow { background-color: rgba(238, 122, 233, 100%); }");
}

• 源文件 “main.cpp” 代码，由新建项目时生成，无需改动

• #include "mainwindow.h" 
  #include <QApplication> 
  
  int main(int argc, char *argv[]) 
  { 
  	QApplication a(argc, argv); 
  	MainWindow w; 
  	w.show(); 
  	return a.exec(); 
  }
  

2.工具按钮（ QToolButton）

工具按钮（QToolButton）区别于普通按钮（QPushButton）的一点是，工具按钮（QToolButton）可带图标

以下示例实现效果：自定义工具栏

• 创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类
• 头文件 “mainwindow.h” 中具体代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QToolButton>	/* 引入QToolButton类 */
#include <QToolBar>		/* 引入QToolBar类 */

class MainWindow : public QMainWindow{
    Q_OBJECT
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
private:    
    QToolButton *toolButton;	/* 声明一个QToolButton对象 */    
    QToolBar *toolBar;			/* 声明一个QToolBar对象 */
};
#endif // MAINWINDOW_H

• 源文件 “mainwindow.cpp” 中具体代码如下

• #include "mainwindow.h"
  #include <QApplication>
  #include <QStyle>
  
  MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) {
      /* 设置主窗体的位置和大小 */
      this->setGeometry(0, 0, 800, 480);
  
      /* 实例化QToolBar对象 */
      toolBar = new QToolBar(this);
      /* 设置toolBar的位置和大小 */
      toolBar->setGeometry(0, 0, 800, 100);
  
      /* 实例化QStyle类对象，用于设置风格，调用系统类自带的图标 */
      QStyle *style = QApplication::style();
  
      /* 使用Qt自带的标准图标，可以在帮助文档里搜索QStyle::StandardPixmap */
      QIcon icon = style->standardIcon(QStyle::SP_TitleBarContextHelpButton);
  
      /* 实例化QToolButton对象 */
      toolButton = new QToolButton();
      /* 设置图标 */
      toolButton->setIcon(icon);
      /* 设置要显示的文本 */
      toolButton->setText("帮助");
      /* 调用setToolButtonStyle()方法，设置toolButoon的样式，设置为文本置于图标下方 */
      toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
      /* 最后将toolButton添加到ToolBar里 */
      toolBar->addWidget(toolButton);
  }
  
  MainWindow::~MainWindow() {
  }
  

• 源文件 “main.cpp” 代码，由新建项目时生成，无需改动
• 程序编译及运行后。

3、单选按钮（ QRadioButton）

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

以下实例实现效果：手机开关效果，需要用到Qt 样式表 qss

创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类
添加资源文件和 qss 样式表文件
按如下图示步骤添加资源文件

新建完资源文件后，会进入 res.qrc 文件编辑模式，点击 Add Prefix 添加前缀，目的是方便分类管理文件，前缀 “/” 一定需要写，否则会找不到路径

添加 qss 文件，QSS 文件样式表文件。由 GUI 元素的外观和感觉，包括布局，颜色，鼠标的行为，大小和字体。是纯文本的格式定义，在应用程序运行时可以载入和解析这些样式定义，从而使应用程序的界面呈现不同的效果
头文件 “mainwindow.h” 中具体代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
/* 引入QRadioButton */
#include <QRadioButton>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    /* 声明两个QRadioButton对象 */
    QRadioButton *radioButton1;
    QRadioButton *radioButton2;
};
#endif // MAINWINDOW_H

源文件 “mainwindow.cpp” 中具体代码如下

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 主窗体设置位置和显示的大小 */
    this->setGeometry(0, 0, 800, 480);
    this->setStyleSheet("QMainWindow {background-color: rgba(200, 50, 100, 100%);}");

    /* 实例化对象 */
    radioButton1 = new QRadioButton(this);
    radioButton2 = new QRadioButton(this);

    /* 设置两个QRadioButton的位置和显示大小 */
    radioButton1->setGeometry(300, 200, 100, 50);
    radioButton2->setGeometry(400, 200, 100, 50);

    /* 设置两个QRadioButton的显示文本 */
    radioButton1->setText("开关一");
    radioButton2->setText("开关二");

    /* 设置初始状态，radioButton1的Checked为false,另一个为true*/
    radioButton1->setChecked(false);
    radioButton2->setChecked(true);
}

MainWindow::~MainWindow()
{
}

源文件 “main.cpp” 代码中具体代码如下

#include "mainwindow.h"

#include <QApplication>
/* 引入QFile */
#include <QFile>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    /* 指定文件 */
    QFile file(":/style.qss");

    /* 判断文件是否存在 */
    if (file.exists() ) {
        /* 以只读的方式打开 */
        file.open(QFile::ReadOnly);
        /* 以字符串的方式保存读出的结果 */
        QString styleSheet = QLatin1String(file.readAll());
        /* 设置全局样式 */
        qApp->setStyleSheet(styleSheet);
        /* 关闭文件 */
        file.close();
    }
    MainWindow w;
    w.show();
    return a.exec();
}

style.qss编程后的代码
 

QRadioButton{
    spacing: 2px;
    color: white;
}
QRadioButton::indicator {
    width: 45px;
    height: 30px;
}
QRadioButton::indicator:unchecked {
    image: url(:/images/switch_off.png);
}
QRadioButton::indicator:checked {
    image: url(:/images/switch_on.png);
}

4、复选框（QCheckBox）

QCheckBox 继承 QAbstractButton。复选按钮（复选框）与 RadioButton 的区别是选择模式，单选按钮提供多选一，复选按钮提供多选多

实现效果：三态选择框，用户通过点击可改变当选择框的状态

• 创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类
• 添加资源文件和 qss 样式表文件（方法见上一小节）
• 头文件 “mainwindow.h” 中具体代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
/* 引入QCheckBox */
#include <QCheckBox>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    /* 声明一个QCheckBox对象 */
    QCheckBox *checkBox;
private slots:
    /* 声明QCheckBox的槽函数，并带参数传递，用这个参数接收信号的参数 */
    void checkBoxStateChanged(int);

};
#endif // MAINWINDOW_H

• 源文件 “mainwindow.cpp” 中具体代码如下

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 主窗体设置位置和显示的大小及背景颜色 */
    this->setGeometry(0, 0, 800, 480);
    this->setStyleSheet("QMainWindow {background-color: rgba(100, 100, 100, 100%);}");

    /* 实例化对象 */
    checkBox = new QCheckBox(this);

    /* 设置QCheckBox位置和显示大小 */
    checkBox->setGeometry(350, 200, 250, 50);

    /* 初始化三态复选框的状态为Checked */
    checkBox->setCheckState(Qt::Checked);

    /* 设置显示的文本 */
    checkBox->setText("初始化为Checked状态");

    /* 开启三态模式，必须开启，否则只有两种状态，即Checked和Unchecked */
    checkBox->setTristate();

    /* 连接checkBox的信号stateChanged(int)，与我们定义的槽checkBoxStateChanged(int)连接 */
    connect(checkBox, SIGNAL(stateChanged(int)), this, SLOT(checkBoxStateChanged(int)));
}

MainWindow::~MainWindow()
{
}

/* 槽函数的实现 */
void MainWindow::checkBoxStateChanged(int state)
{
    /* 判断checkBox的state状态，设置checkBox的文本 */
    switch (state) {
    case Qt::Checked:
        /* 选中状态 */
        checkBox->setText("Checked状态");
        break;
    case Qt::Unchecked:
        /* 未选中状态 */
        checkBox->setText("Unchecked状态");
        break;
    case Qt::PartiallyChecked:
        /* 半选状态 */
        checkBox->setText("PartiallyChecked状态");
        break;
    default:
        break;
    }
}

 

• 源文件 “main.cpp” 代码中具体代码如下

#include "mainwindow.h"

#include <QApplication>
#include <QFile>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    /* 指定文件 */
    QFile file(":/style.qss");

    /* 判断文件是否存在 */
    if (file.exists() ) {
        /* 以只读的方式打开 */
        file.open(QFile::ReadOnly);
        /* 以字符串的方式保存读出的结果 */
        QString styleSheet = QLatin1String(file.readAll());
        /* 设置全局样式 */
        qApp->setStyleSheet(styleSheet);
        /* 关闭文件 */
        file.close();
    }
    MainWindow w;
    w.show();
    return a.exec();
}

• style.qss编程后的代码

QCheckBox{
        spacing: 5px;
        color: white;
}
QCheckBox::indicator {
        width: 50px;
        height: 50px;
}
QCheckBox::indicator:enabled:unchecked {
        image: url(:/images/unchecked.png);
}
QCheckBox::indicator:enabled:checked {
        image: url(:/images/checked.png);
}
QCheckBox::indicator:enabled:indeterminate {
        image: url(:/images/indeterminate.png);
}

程序编译及运行后，多次点击 checkBox，即可看到 QCheckBox 的三种状态切换

5、命令连接按钮（QCommandLinkButton）

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

实现效果：使用一个 QCommandLinkButton，点击打开系统的窗口

• 创建新项目，注意不勾选 “Generate form”，默认继承 QMainWindow 类
• 头文件 “mainwindow.h” 中具体代码如下

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
/* 引入QCommandLinkButton */
#include <QCommandLinkButton>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    /* 声明一个QCommandLinkButton对象 */
    QCommandLinkButton *commandLinkButton;

private slots:
    /* 声明槽函数，用于点击commandLinkButton后触发 */
    void commandLinkButtonClicked();


};
#endif // MAINWINDOW_H

• 源文件 “mainwindow.cpp” 中具体代码如下

#include "mainwindow.h"
/* 引入桌面服务，用来打开系统文件夹对话框 */
#include <QDesktopServices>
/* 引入QUrl */
#include <QUrl>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 主窗体设置位置和显示的大小 */
    this->setGeometry(0, 0, 800, 480);

    /* 实例化对象 */
    commandLinkButton = new QCommandLinkButton(
                "打开/home目录", "点击此将调用系统的窗口打开/home目录",this);

    /* 设置QCommandLinkButton位置和显示大小 */
    commandLinkButton->setGeometry(300, 200, 250, 60);

    /* 信号槽连接 */
    connect(commandLinkButton, SIGNAL(clicked()), this,
            SLOT(commandLinkButtonClicked()));
}

MainWindow::~MainWindow()
{
}

void MainWindow::commandLinkButtonClicked()
{
    /* 调用系统服务打开/home目录 */
    QDesktopServices::openUrl(QUrl("file:/home/") );
}

 

---

总结

QPushButton：下压按钮，继承 QAbstractButton 类，被 QCommandLinkButton 继承。常用于执行命令或触发事件
QToolButton：工具按钮，继承 QAbstractButton 类，是一种用于命令或者选项的可快速访问的按钮
QRadioButton：选择按钮，继承 QAbstractButton 类，通常成组出现，用于提供两个或多个互斥选项
QCheckBox：检查框，继承 QAbstractButton 类，与 RadioButton 的区别是选择模式，单选按钮提供多选一，复选按钮提供多选多
QCommandLinkButton：命令链接按钮，继承 QPushButton 类，与 RadioButton 相似，用于在互斥选项中选择一项， 区别是CommandLinkButton 除带有正常文字描述文本外，默认携带一个箭头图标，表明按下按钮将打开另一个窗口或页面
QDialogButtonBox：对话框按钮，由 QDialogButtonBox 类包装而成，QDialogButtonBox 继承 QWidget，常用于对话框里自定义按钮，比如“确定”和“取消” 按钮