入门
前言
qt版本:Qt5.12.9
个人理解:这个Qt
和pcl库
一样,都是一种C++扩展库,也是编译链接之类的。不过这个Qt自带编辑器和一些插件Qt Creator
,也是和普通的项目结构一样。这种模式感觉和自己当初matlab课设时做界面一样,嘿嘿嘿。
特色:
- Qt Designer 方式:Qt对于C++来说的特色就是具有
.ui文件
,用于表示编程后的UI界面,可以往里边儿放一些控件
之类的,再进到这些控件里的函数进行相关编程。 - Qt Designer 方式虽然可以直接看到界面布局,但是控件太多就表达不清,所以用代码来布局界面更直观,且锻炼我们代码逻辑能力和空间想象力。
- Qt界面的编写也是基于基类类的(还是逃不了最基础的东西),3种基类:
QMainWindow
,主窗口类,常用,由 QWidget 继承封装而来。
QWidget
,是可视界面类的基类,一般用于嵌入式。
QDialog
,对话框类,不推荐。 - 一个界面就是一个
ui类的对象
,一个组件就是一个组件类的对象
,组件位于界面中,他们都具有自己的槽函数
,由各种信号触发。
一、信号与槽
信号与槽
在Qt开发中具有关键作用。
Qt 信号与槽机制
信号(Signal)
:就是在特定情况下被发射的事件。
槽(Slot)
:就是对信号响应的函数。
信号与槽关联
:是用 QObject::connect() 函数
QObject::connect(sender, SIGNAL(signal()), receiver, SLOT(slot()));
//connect() 是 QObject 类的一个静态函数,而 QObject 是所有 Qt 类的基类,在实际调用时可以忽略前面的限定符
信号与槽连接:
- 一对一
- 一对多
- 多对一
信号与槽断开
:是用 QObject::disconnect() 函数
bool QObject::disconnect(const QObject *sender, const char *signal, const QObject *receiver, const
char *method)
以上的信号与槽的操作都会被写到setupUi()函数。
信号与槽的创建
- 信号:只需声明, 无需定义。
例如:
//MainWindow类的定义中
signals:
void pushButtonTextChanged();
- 槽:声明槽必须写槽的定义
可以是任何成员函数、普通全局函数、静态函数;
槽函数和信号的参数和返回值要一致。
例如:
//MainWindow类的定义中
public slots:
void changeButtonText();
//MainWindow类成员函数定义
void MainWindow::changeButtonText()
{
pushButton->setText("被点击了! ");
}
- 连接:在项目中连接信号与槽
例如:
//MainWindow类的构造函数中
connect(this, SIGNAL(pushButtonTextChanged()), this, SLOT(changeButtonText()));
二、Qt Creator 的使用技巧
Qt Creator 的快捷键
常用快捷键:
另外:工具->选项->环境->键盘里也能设置快捷键。
Qt 帮助文档的使用
三、Qt 控件
Qt界面都是由一个个小控件组成。本章只学习常用的控件初始化方法,一些简单的例子,举一反三。
最权威的还得看 Qt 帮助文档
。
3.1 按钮
Qt 内置了六种按钮部件:
QPushButton
:下压按钮,常用于执行命令或触发事件。- QToolButton:工具按钮,用于命令或者选项的可以快速访问的按钮。
- QRadioButton:选择按钮
- QCheckBox:检查框
- QCommandLinkButton:命令链接按钮
QDialogButtonBox
:对话框按钮,比如“确定”和“取消” 按钮。
1、QPushButton
按钮:文本
示例:窗口换肤(通过单击不同的按钮,改变窗口的颜色。)
mainwindow.h
...
/* 引入 QPushButton 类 */
#include <QPushButton>
...
class MainWindow : public QMainWindow
{
...
private:
/* 声明一个 QPushButton 对象 pushButton1 */
QPushButton *pushButton1;
private slots:
/* 声明对象 pushButton1 的槽函数 */
void pushButton1_Clicked();
};
mainwindow.cpp
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
/* 设置宽高为 800×480,位置在 0, 0。(0, 0)代表原点, Qt 默认最左上角的点为原点*/
this->setGeometry(0, 0, 800, 480);
/* 实例化两个按钮对象,并设置其显示文本为窗口皮肤 1 和窗口皮肤 2 */
pushButton1 = new QPushButton("窗口皮肤 1", this);
/* 设定两个 QPushButton 对象的位置 */
pushButton1->setGeometry(300,200,80,40);
/* 信号槽连接 */
connect(pushButton1, SIGNAL(clicked()), this,SLOT(pushButton1_Clicked()));
}
/* 槽函数的实现 */
void MainWindow::pushButton1_Clicked()
{
/* 设置主窗口的样式 1 */
this->setStyleSheet("QMainWindow { background-color: rgba(255, 245,238, 100%); }");
}
效果:
2、QToolButton
按钮:文本
图标
示例:自定义工具栏
mainwindow.h
...
/* 引入 QToolButton 类 */
#include <QToolButton>
/* 引入 QToolBar 类 */
#include <QToolBar>
...
class MainWindow : public QMainWindow
{
...
private:
/* 声明一个 QToolButton 对象 */
QToolButton *toolButton;
/* 声明一个 QToolBar 对象 */
QToolBar *toolBar;
};
mainwindow.cpp
...
#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);
}
效果:
3、QRadioButton
按钮:文本
单选框
多选一
示例:仿手机开关效果(使用到了Qt 样式表
,加载 qss 样式表文件,没添加图片,则使用默认效果)
新建项目中新添了Resources目录,就疯狂新建,这里添加了图片资源,位于/image下。
.qss文件是帮助图片被程序读取。
mainwindow.h
...
/* 引入 QRadioButton */
#include <QRadioButton>
...
class MainWindow : public QMainWindow
{
...
private:
/* 声明两个 QRadioButton 对象 */
QRadioButton *radioButton1;
QRadioButton *radioButton2;
};
mainwindow.cpp
...
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);
}
...
main.cpp
...
/* 引入 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 用于描述样式, Qt 帮助文档有语法说明,搜索“qt style”。
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
按钮:文本
三态选择
示例:待写。。。
效果:
5、QCommandLinkButton
按钮:文本
调出系统框
示例:待写
效果:
6、QDialogButtonBox
按钮:系统的自带的对话框按钮
/自己定义对话框按钮
常用按钮:
button_Box = new QDialogButtonBox(QDialogButtonBox::Ok
| QDialogButtonBox::Cancel
| QDialogButtonBox::Open
| QDialogButtonBox::Save
| QDialogButtonBox::Close
| QDialogButtonBox::Discard
| QDialogButtonBox::Apply
| QDialogButtonBox::Reset
| QDialogButtonBox::RestoreDefaults
| QDialogButtonBox::Help
| QDialogButtonBox::SaveAll);
示例:自定义 QDialogButtonBox 里的按钮
mainwindow.h
...
/* 引入 QDialogButtonBox */
#include <QDialogButtonBox>
/* 引入 QPushButton */
#include <QPushButton>
...
class MainWindow : public QMainWindow
{
...
private:
/* 声明一个 QDialogButtonBox 对象 */
QDialogButtonBox *dialogButtonBox;
/* 声明一个 pushButton 对象 */
QPushButton *pushButton;
private slots:
/* 声明信号槽,带 QAbstractButton *参数,用于判断点击了哪个按钮 */
void dialogButtonBoxClicked(QAbstractButton *);
};
mainwindow.cpp
...
/* 引入 QDebug */
#include <QDebug>
...
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
/* 主窗体设置位置和显示的大小 */
this->setGeometry(0, 0, 800, 480);
/* 实例化并设置按钮的盒子的大小和位置 */
dialogButtonBox = new QDialogButtonBox(this);
dialogButtonBox->setGeometry(300, 200, 200, 30);
/*使用 Qt 的 Cancel 按钮*/
dialogButtonBox->addButton(QDialogButtonBox::Cancel);
/*将英文"Cancel"按钮设置为中文"取消" */
dialogButtonBox->button(QDialogButtonBox::Cancel)->setText("取消
/* 设定位置与大小 */
pushButton = new QPushButton(tr("自定义"));
/* 将 pushButton 添加到 dialogButtonBox,并设定 ButtonRole 为 ActionRole*/
dialogButtonBox->addButton(pushButton,QDialogButtonBox::ActionRole);
/* 信号槽连接,带参数 QAbstractButton *,用于判断用户点击哪个按键 */
connect(dialogButtonBox, SIGNAL(clicked(QAbstractButton * )),
this, SLOT(dialogButtonBoxClicked(QAbstractButton *)));
}
...
void MainWindow::dialogButtonBoxClicked(QAbstractButton *button)
{
/* 判断点击的对象是否为 QDialogButtonBox::Cancel */
if(button == dialogButtonBox->button(QDialogButtonBox::Cancel)) {
/* 打印“单击了取消键” */
qDebug() <<"单击了取消键"<<endl;
/* 判断点击的对象是否为 pushButton */
}else if(button == pushButton) {
/* 打印“单击了自定义键” */
qDebug() <<"单击了自定义键"<<endl;
}
}
注意:
//这句话就是将子定义的对话框添加到QDialogButtonBox中
dialogButtonBox->addButton(pushButton,QDialogButtonBox::ActionRole);
效果: