一、Ot入门
1.Qt概述
Qt
是一种基于
C++的跨平台图形用户界面应用程序开发框架。
如何跨平台?上到服务器上位机,下到 嵌入式
GUI
,上天入地无所不能。
Qt
最早是由
1991
年由
Qt Company
开发,但是到
2008
年,Qt Company 科技被诺基亚公司收购,是的,就是拥有着我们很多情怀的诺基亚。但在
2012
年,
Qt
又被
Digia
收购。
Qt
的版本是按照不同的图形系统来划分的,目前分为四个版本:
适用于
Windows
平台;
适用于使用了
x
系统的各种
Linux
和
unix
的平台
;
Mac
版,适用于苹果
MacOS
;
embedded
版,适合于具有帧缓冲(
frame buffer
)的
Linux
的平台。
Qt
一般指代桌面版本,例如在
Linux
(
x86
),
Windows
,
Mac
系统上运行的。
QtE
全称是
Qt embedded
,特指嵌入式版本。它是
Qt
的
Embedded Linux
分支平台,在原始
Qt 的基 础上,做了许多出色的调整以适合嵌入式环境。删除掉了一些与嵌入式无关的
Lib 库,使其相对来说更加 节省嵌入式平台的内存空间,毕竟对嵌入式应用来讲,资源还是相对受限的,不像
PC 机、服务器这些通 用机系统有更大的内存和硬盘;为了稳定性以及成本考虑,嵌入式的产品一般更加简洁高效。
Qt
虽然经常被当做一个
GUI
库,用来开发图形界面应用程序,但这并不是
Qt
的全部;
Qt 除了可以 绘制漂亮的界面(包括控件、布局、交互),还包含很多其它功能,比如多线程、访问数据库、图像处理、 音频视频处理、网络通信、文件操作等,这些
Qt
都已经内置了。
Qt
是应用程序开发的一站式解决方案,有了
Qt
,你就可以高枕无忧了!
Qt 本身包含的模块也日益丰富, 一直有新模块和第三方模块加入进来。
使用
Qt
开发:
WPS
、
YY
语音、
Skype、豆瓣电台、虾米音乐、淘宝助理、千牛、暴雪的战网客户端、
VirtualBox
、
Opera
、咪咕音乐、
Google
地图、
Adobe Photoshop Album
等。
总的来说,Qt 主要用于桌面程序开发和嵌入式图形界面GUI的开发。
2.C++基础
c++
是
c
语言的升级版,在
c
的基础上增加了很多功能。是一种高级语言,常见后缀:
cpp
,
c++
,
cc
等。
g++
编译:
gcc
是一个通用命令,它会根据不同的参数调用不同的编译器或链接器,
GCC 为了让操作简 单推出
g++
命令用来编译
C++
。
1.什么是面向对象,什么又是面向过程
c
语言就是面向过程的,
c++
就是面向对象的,面向对象特点:封装,继承,多态。
举例:
a+b
直接计算
a+b
就是面向过程。
面向对象就是给
a+b
穿上了一层衣服。不是直接计算
a+b
。
2.c++的灵魂,c++的类
类,可以把他看成
c 语言结构体的升级版。类的成员不仅可以是变量,也可以是函数,类可以看做 是一种数据类型,这种数据类型是一个包含成员变量和成员函数的集合。
对象:类的实例化
直接定义:
student my; // student 就是类 my 就是对象
在堆里面定义:
student *my = new student;
删除对象:
delete my; 目的是释放堆里面的内存
my = NULL;
变成空指针,杜绝成为野指针。
3.怎么访问类的成员
student my;
student *my1 = new student;
my.age = 18;
my1->age =19;
cout << my.age << endl;
cout << my1->age << endl;
访问方法和
C
语言结构体是一样的,普通变量通过“
. ”
指针通过“
->”。
4.类的函数成员
因为类里面的成员不仅可以是变量,也可以是函数。
第一步:在类里面声明
第二步:实现这个函数。我们可以直接在类里面写,也可以写在类的外面。
直接写在类的里面:
class student
{
public:
char name[64];
int age;
void test(){
cout << 123 << endl;
};
};
写到类的外面:
class student
{
public:
char name[64];
int age;
void test();
};
void student::test(){ //student:表示属于这个类里面的函数,不加的话会被识别成普通函数。
cout << 123 << endl;
};
};
访问函数和访问变量是一样的。
5.类的访问修饰符
类的访问修饰符就是对类的成员进行权限管理。
public
: 表示函数和变量是公开的,任何人都可以访问。
private
: 表示函数和变量只能在自己的类里面自己访问自己,不能通过对象来访问。
能不能强行访问?可以的。
protected
:表示函数和变量只能在自己的类里面自己访问自己,但是可以被派生类来访问的。
二、Qtcreator的安装
Qtcreator
下载地址:
http://download.qt.io/new_archive/qt/5.11/
,进入选择版本号界面,我们使用的是
5.11.1
,也推荐读者选择此版本。
进入如图界面后,选择安装包,我们在
windows
下学习
Qt,所以选择 qt-opensource-windows-x86-5.11.1.exe
,点击即可下载。
![](https://i-blog.csdnimg.cn/blog_migrate/5543a33c07df887e4ae32f7bae27030d.png)
下载后右键点击
exe
文件,选择以管理员身份运行。没有Qt的账号得先注册账号,点击下一步(或
next),选择安装路径。如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/ef865e9f6bf7e95ca32e886ee2c03e07.png)
![](https://i-blog.csdnimg.cn/blog_migrate/78220a77702563f286888ffbdfb32754.png)
![](https://i-blog.csdnimg.cn/blog_migrate/38d5b0e413b0621d61bd16740afbd348.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2ef57cc223f8b06316c8ba9e9c0b6778.png)
选择下一步,勾选需要用到的组件,本阶段教程需要勾选以下七个选项:
![](https://i-blog.csdnimg.cn/blog_migrate/58cc8826221d9bc52892bcf45ba92560.png)
![](https://i-blog.csdnimg.cn/blog_migrate/525963387a13ed132b2c6dff44f2605a.png)
选择完后一直点下一步,安装完成后如图 :
![](https://i-blog.csdnimg.cn/blog_migrate/6967fe333bb25e4b0b67fce8fc079fdd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ca65859675ea92a81d3fd7e76ec70598.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ef908c359bc576083ffb495fd1243d3c.png)
到此为止,Qt就安装完毕。
三、创建一个 Qt 工程
1. 打开Qt
找到Qt的安装根目录\Qt5.11.1\Tools\QtCreator\bin\,找到其应用程序 " qtcreator.exe",也可以将其快捷方式发送到桌面。如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/0428d0dd7d1ae051fb5c30c7764080aa.png)
图标为![](https://i-blog.csdnimg.cn/blog_migrate/1d6fcb9ef3d587b81b7b42b0212150a0.png)
打开后主界面如下图所示。
![](https://i-blog.csdnimg.cn/blog_migrate/73343312c2acdc5cc1c93a9b895e2ada.png)
2. 创建工程
首先找开文件菜单,新建文件或项目,如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/e6897b6078334747e7c391c44a4543ff.png)
或者 点击快捷按钮,新建工程。如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/97af6a3f2768755d2d435e558c0c13ca.png)
打开后,如下图选择。
![](https://i-blog.csdnimg.cn/blog_migrate/6e1268899996a355cea63dd4c78279f0.png)
Widgets是在Qt中创建用户界面的主要元素,Widgets可以显示数据和状态信息,接收用户输入,并为其他应该分组在一起的Widget提供一个容器,没有嵌入父小部件的小部件称为窗口。
上一步选择操作后,填写项目名称,创建路径,下一步,不过不要有中文路径,如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/806c0deea612123d5db96346bc0e82c4.png)
默认下一步之后,出现类信息的填写,
选择 " QWidget " 类名,如下图。
创建成功后,如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/de5753b8b1a2e00e377cb4eeb077a096.png)
工程目录下的.pro 工程文件说明如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/39d2011e55b1a6240239460eb1796cd8.png)
点击 forms,然后双击用户界面 ui (User Interface,用户界面)文件,就可以进入 ui 编辑器。
![](https://i-blog.csdnimg.cn/blog_migrate/db4bd348d4f53f2fe06a4fe8f8aa3bd2.png)
下图为ui编辑器面板介绍。
![](https://i-blog.csdnimg.cn/blog_migrate/e71e5f28637e30c15847b4af2d6c2306.png)
3. 信号和槽
信号就是指控件发出的特定的信号。
槽就是槽函数的意思,信号和槽都位于类中,不是
C++
标准代码。
我们可以把槽函数绑定在某一个控件的信号上。当需要调用外部函数时,发送一个信号,此时与该信号相关联的槽便会被调用,槽其实就是一个函数,槽与信号的关联要由程序员来完成,关联方法有自动关联和手动关联。
(1)自动关联
使用
Qt
信号和槽的自动关联
,可加快开发速度,一般用于同一个窗体之间的控件关联,槽函数格式非常关键,格式为:
void on_<
窗口部件名称
>_<
信号名称
>(<signal parameters>);
自动关联步骤:
步骤一:手动选择相应的控件,然后右键
->
转到槽。
![](https://i-blog.csdnimg.cn/blog_migrate/2733c24cd14d1200c664ac52e65f057c.png)
选择信号类型。
![](https://i-blog.csdnimg.cn/blog_migrate/82564ded275b6d248715e94be536037f.png)
双击上图选择单击信号类型,自动关联到其所对应的槽函数定义处。槽函数在.h 文件声明,槽函数只能声明到 private slots 或者
public slots
下面。
按住
Ctrl+鼠标左键,跳转到
.cpp
文件对应的函数功能实现部分。填写功能代码,我们在槽函数内用
qDebug
打印信息。
保存,构建运行。如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/f6becf015645eb3d244b5008b8bd95e0.png)
每次点击,按钮都会发信号,对应的槽函数就会执行,结果如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/2a4447ebeecba3fcfa16010ea40af5d5.png)
(2)手动关联
信号和槽机制是
Qt
的核心机制,要精通
Qt 编程就必须对信号和槽有所了解。
信号和槽是一种高级接口,应用于对象之间的通信,它是
Qt
的核心特性,也是
Qt 区别于其它工具包的重要地方。此外如果遇到不懂的函数或类,可以先选中,然后按
F1
键,即可查看介绍。
虽然
Qt 有自动关联功能,但涉及到多个窗体和复杂事件的时候,只能使用手动关联,手动关联使用 connect
这个函数。
connect(const QObject *sender, const char *signal,
const QObject *receiver, const char *member,
Qt::ConnectionType = Qt::AutoConnection);
通常只传递前四个参数,参数含义:
sender
:发送对象;
singal
:发送对象里面的一个信号,格式一般为
SIGNAL(
信号
);
receiver
:接收对象;
member
:接收对象里面的槽函数,格式一般为
SLOT(
信号
)
。
ConnectionType
:设置信号和槽的同步异步
,
一般使用默认值
Qt::AutoConnection,可不填。
connect(A,SIGNAL(B),C,SLOT(D));
当对象
A
发出
B 信号时候,就会触发对象
C
的槽函数
D
signals,
是
Qt
的关键字,而非
C/C++
的。
signals 关键字指出进入了信号声明区,随后即可声明自己 的信号。
slots, 槽是普通的 C++ 成员函数,当与其关联的信号被发射时,这个槽函数就会被调用。槽函数有的 参数个数和类型,在对应的信号函数中必须一一对应,即信号函数的参数个数必须多于或等于槽函数的个数。
emit ,Qt
定义的一个宏,作用是发射信号,与此信号关联的槽函数就会被调用
。
例程:我们在
widget.h
中自定义一个信号和一个槽函数,如下图。
源代码为:
signals:
void my_signal(void); //自定义的信号
private slots:
void on_pushButton_clicked();
void my_slot(void);//自定义的槽函数
并在
widget.cpp
实现槽函数,如下图。
源代码为:
void Widget::my_slot(void)
{
qDebug("再按下");
}
然后在
widget.cpp
中绑定信号和槽,如下 图
源代码为:
Widget::Widget(QWidget *parent) :
QWidget(parent), ui(new Ui::Widget)
{
ui->setupUi(this);
connect(this,SIGNAL(my_signal()),this,SLOT(my_slot()));
}
在
widget.ui
中创建按钮,并转到槽,自动关联的槽函数如下图。
发射信号,如下图。
源代码为:
void Widget::on_pushButton_2_clicked()
{
emit my_slot();
}
构建项目,运行,点击按钮,就会发射自定义的信号
my_Signal()
,与
my_Signal()
相关联的
this
对象槽函数 my_Solt 就会被调用,槽函数就会输出打印出信息 “ 再按下 ”。如下图。
下面给出widget.h完整代码截图:
给出widget.cpp完整代码截图:
![](https://i-blog.csdnimg.cn/blog_migrate/5c9436612a9d4cc76d344b32e0223339.png)
4. 界面添加图片
(1)添加资源
选中项目名称,右键单击—
>
选择添加新文件,如下图。
在弹出窗口中选择 Qt—>Qt Resource File ,选择 Choose ,如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/e4bbfa84b18bb921f1b8564429d68b46.png)
填写
picture
后,在工程下的
Resources
会出现
picture.qrc
文件,成功后如下图
。
双击
picture.qrc
,点击 “ 添加前缀 ”。
![](https://i-blog.csdnimg.cn/blog_migrate/aa535b3c9c75ebbb694f6ba9b7608ba6.png)
前缀可以根据需要自定义填入,如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/746ad50ad2263be3cfe98c73b592581e.png)
(2)添加图片
我们添加图片之前,首先将要添加的图片复制到工程目录下。
右击
picture.qrc
,选择
Open With ->
资源编辑器,出现资源管理界面,点击下面的 添加
->添加前缀, 下方前缀栏填写的是 “
/
”,这个路径可以根据需要自定义,然后保存。
再次点击“添加”,点击“添加文件”,如下图。
打开工程的根目录,如下图,选中图片。
在资源编辑器中会看到添加的图片,然后ctrl+s保存。
点开 Resources 下的各个文件夹,即可看到添加的图片,此时图片已经添加到工程。
![](https://i-blog.csdnimg.cn/blog_migrate/dbc801f61d4b6c96379929ae403af309.png)
(3)Label 添加图片
在
ui
文件添加
QLabel
组件,右击
->
选择改变样式表,如下图。
弹出对话框,选择添加资源->border image,如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/03ac027c905aacee6f6d62ead5791bff.png)
选择要添加的图片,如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/24ce960403fb40a6d1b1177a3fd24297.png)
点击 OK,即可完成图片的添加,如下图。
![](https://i-blog.csdnimg.cn/blog_migrate/3fba6eb48049cfaf2ad7660ddacee0ec.png)
5. 界面布局
![](https://i-blog.csdnimg.cn/blog_migrate/54ff8791b37318918655caaa2e7593bf.png)
(1)水平布局
Horizontal Layout
水平方向布局,组件自动在水平方向上分布。
使用时先选中组件,然后点击水平布局即可完成,可看到组件变为水平排列。
![](https://i-blog.csdnimg.cn/blog_migrate/b518e1c14e583709631b494c75c4136f.png)
(2)垂直布局
Vertical Layout 垂直方向布局,组件自动在垂直方向上分布,操作方法和水平布局一致,在布局之后组件垂直排列。
我们点击打破布局按钮,重新选择要布局的组件,然后点击垂直布局按钮。
(3)栅格布局
Grid Layout
网格状布局,网状布局大小改变时,每个网格的大小都改变。
我们发现布局之后各个组件都是紧挨着的,这时候可以用“弹簧”控件来控制组件位置。
Horizontal Spacer
一个用于水平分隔的空格。
![](https://i-blog.csdnimg.cn/blog_migrate/ea4e30dfbff95064207f9248a46d8eea.png)