QT开发(基础知识)

大家好，欢迎来到IT知识分享网。

目录

0. QT背景介绍

0.1 什么是QT

0.2 Qt 的发展史 && 支持平台

 0.3 Qt 版本&& 优点

0.4 Qt 的应⽤场景

0.5 QT成功案例

 0.6 Qt 的发展前景

1. 搭建 Qt 开发环境 

1.1 Qt SDK 的下载

1.2 Qt SDK 的安装

1.3 配置环境变量

 2. 认识QT Creator

2.1 使⽤ Qt Creator 新建项⽬

2.2 认识新建项目

 2.2.1 main.cpp

2.2.2 widget.h

 2.2.3 widget.cpp

2.2.4 widget.ui

 2.2.5 临时文件

2.3. 第一个hello world

2.3.1 图形化

2.3.2 纯代码

2.3.3 验证对象树会统一析构

​编辑

 2.4 快捷键

2.5 使⽤帮助⽂档 

2.6 Qt 中的命名规范

2.7 Qt 窗⼝坐标体系

3. 信号与槽

 3.1 connect函数

3.2 深度理解connect函数参数

​编辑

3.2 查看信号与槽

3.3 自定义槽

 3.3.1 纯代码​编辑

3.3.2 图形化

​编辑

3.4 自定义信号(了解)

3.6 带参数的信号与槽

3.7 额外说明

3.7.1 前置条件

 3.7.2 设计目的

 3.7.3 disconnect断开连接

3.7.4 lambda表达式 

4. 常用控件

 4.1 QWidget 核心属性

4.1.0 objectName 

4.1.1 enabled

 4.1.2 geometry && window frame

4.1.3 windowTitie 

 4.1.4 windowlcon

4.1.5 windowOpacity 

4.1.6 cursor

 ​编辑

4.1.7 font

4.1.8 tooltip(解释说明的意思)

4.1.9 focusPolicy(设置控件获取到焦点)

4.1.10 styleSheet

4.2 按钮类 

4.2.1 Pushbutton(普通按钮)

​编辑

​编辑

4.2.2 Radio Buttion(单选)  

4.2.3 QButtonGroup(按钮组)

4.2.4 Check Box(多选)

​编辑 4.2.5 Tool Button(工具按钮)

4.3 显示类

4.3.1 Lable(普通文本框)

4.3.2 LCD Number(LCD电子数字)

4.3.3  ProgressBar(进度条)

 4.3.4 Calendar Widget(日历)

4.4 输入类控件 

4.4.1 Line Edit(单行输入框)

4.4.2 Text Edit(多行输入框)

 4.4.3 Combo Box(下拉选择框)

4.4.4 Spin Box(微调框) 

4.4.5 Date Edit & Time Edit  (日期&时间微调框)

4.4.6 Dial(旋转按钮)

4.4.7 Slider(滑动条) 

4.5 多元素控件

4.5.0 xxWidget vs xxView是什么区别

 4.5.1 List Widget(纵向列表)

 4.5.2 Table Widget(表单)

4.5.3 Tree Widget (树状形节点表单)

 4.6 容器类控件

4.6.1 Group Box(控件组)

4.6.2 Tab Widget(多页面) 

 4.7 布局控件

4.7.1 QVBoxLayout(垂直布局)

4.7.2 QHBoxLayout(水平布局) 

4.7.3 QGridLayout(网格布局) 

 4.7.4 QFormLayout(表单布局)

4.7.5 Spacer(空白布局) 

5. QT窗口

​编辑

5.1 菜单栏

5.1.1 创建菜单栏&&菜单&&菜单项 

 5.1.2 添加快捷键 && 链接信号槽 

5.1.3 创建子菜单

​编辑

5.1.4 设置菜单项图标

5.1.5 关于正确创建QMenuBar类 

5.2 ⼯具栏

5.2.1 创建工具栏 

5.2.2 设置工具栏停靠位置 

5.3 状态栏

5.3.1 创建工具栏 

5.4 滑动窗口 

5.4.1 创建滑动窗口

5.5 对话框

5.5.1 创建对话框

5.5.2 自定义对话框 

5.5.3 模态与非模态

 5.5.4 QMessageBox(消息对话框)

 ​编辑

 5.5.5 QColorDialog(调色板对话框)

5.5.6  QFileDialog(文件对话框)

5.5.7 QInputDialog(输入对话框) 

5.5.8 QFontDialog(字体对话框) 

6.系统相关

6.1 事件

6.1.0 为什么会出现事件

6.1.1 QMouseEvent(鼠标事件)

6.1.2 QWheelEvent(鼠标滚轮事件)  

6.1.3 QKeyEvent(键盘事件) 

 6.1.4 QTimerEvent(时间事件)

6.1.5 QMoveEvent(窗口移动事件) 

6.1.6 QResizeEvent(窗口尺寸事件) 

6.2 文件

6.2.1 QFile类的各种操作

6.2.2 QFileInfo(文件相关属性) 

 6.3 线程

6.3.1 QThread

6.3.2 QMutex

​编辑 ​编辑

6.3.3 QMutexLocker 

6.3.4 其他补充说明

6.4 网路

6.4.1 UDP协议的回显交互

6.4.2 TCP协议的回显交互

6.4.3 HTPP协议

7. QSS

7.1 纯代码引入 

7.2 qrc机制引入 

7.3 ui界面中引入(推荐) 

7.4 子控件

8. 绘画 

9. 思维导图

0. QT背景介绍

0.1 什么是QT

Qt 是⼀个 跨平台的 C++
图形⽤⼾界⾯应⽤程序框架
。

开发者可以通过简单的
拖拽
和
组合
来实现复杂的应⽤程序，

0.2 Qt 的发展史 && 支持平台

• 1991 年 Qt 最早由奇趣科技开发；
• 1996 年 进⼊商业领域，它也是⽬前流⾏的 Linux 桌⾯环境 KDE 的基础；
• 2008 年 奇趣科技被诺基亚公司收购，Qt 成为诺基亚旗下的编程⼯具；
• 2012 年 Qt ⼜被 Digia 公司收购；
• 2014 年 4 ⽉ 跨平台的集成开发环境 Qt Creator3.1.0 发布，同年 5 ⽉ 20 ⽇发布了 Qt 5.3 正式版，⾄此 Qt 实现了对 IOS、Android、Embedded 等各平台的全⾯⽀持。

• Unix/X11 ‒ Linux、Sun Solaris、HP-UX、Compaq Tru64 UNIX、IBM AIX、SGI IRIX、FreeBSD、
  BSD/OS、和其他很多 X11 平台
•  
  Macintosh ‒ Mac OS X
• Embedded ‒ 有帧缓冲⽀持的嵌⼊式 Linux 平台，Windows CE
   
• Android

 0.3 Qt 版本&& 优点

虽然目前最新的QT版本是QT6,但是我这里使用的是QT5

• 跨平台
  ，⼏乎⽀持所有的平台；
• 接⼝简单，容易上⼿
  ，学习 QT 框架对学习其他框架有参考意义。
• ⼀定程度上简化了内存回收机制；
• 开发效率⾼，能够快速的构建应⽤程序。
• 有很好的社区氛围，市场份额在缓慢上升。
• 可以进⾏嵌⼊式开发。

0.4 Qt 的应⽤场景

• 主要: 桌⾯应⽤程序, 嵌⼊式系统
• 次要: 移动应⽤程序

注: 嵌入式系统指的是日常使用的: 冰箱,洗衣机,路由器,投影仪…之类的
      这些设备里面就使用了嵌入式系统

0.5 QT成功案例

 0.6 Qt 的发展前景

• Qt 是⼀个
  强⼤且⼴泛应⽤于跨平台软件开发的框架
  。它提供了丰富的⼯具和库，可⽤于开发⾼质量、 ⾼效率的图形⽤⼾界⾯（GUI）应⽤程序

1. 搭建 Qt 开发环境 

第一部分: c++编译器(gcc,cl.exe….不是visual studio)

第二部分: Qt SDK(软件安装包)

第三部分: Qt 集成开发环境(IDE)

• Qt 官方提供的Qt creator(不需要额外的配置,适合初学者)
• Visual Studio 功能更强,但是需要额外的配置更多
• Eclipse 不推荐

注: 这里只安装一个QT SDK就行了

1.1 Qt SDK 的下载

官网: Index of /archive/qt

• 注: 如果无法访问,则可以使用网盘链接: 链接：提取码bite

1.2 Qt SDK 的安装

这里建议在双击之前断网，否则需要我们注册 Qt 账号登录后才能进⼊下 ⼀步安装 

• 其他的，就不断下一步，下一步就行了 

1.3 配置环境变量

  至于为什么要配置这个环境变量: 

• 为了让操作系统/QT Creator工具,能够找到Qt SDK中提供的exe,也就是运行Qt 程序的时候,能够找到对应.dll 动态库

 2. 认识QT Creator

2.1 使⽤ Qt Creator 新建项⽬

•  其实,一路next,next也行

2.2 认识新建项目

 2.2.1 main.cpp

2.2.2 widget.h

 2.2.3 widget.cpp

2.2.4 widget.ui

• Qt中使用xml文件就是去描述程序界面是什么样的
• 进一步的qmake会调用相关的工具,依据这个xml文件生成一些c++代码,从而把完整的界面构建出来

 2.2.5 临时文件

• 在运行一次程序之后,就会在 项目并列的地方,多出一个”build-xxxx”目录
• 这个目录里面就是该项目运行过程中,生成的一些临时文件

2.3. 第一个hello world

2.3.1 图形化

• 刚才往界面上拖拽了一个QLabel控件,此时,ui文件的xml中就会多出来这一段代码
• 进一步的qmake就会在编译项目的时候,基于这个内容,生成一段C++代码,通过这个C++代码构建出界面内容

2.3.2 纯代码

• 一般通过代码来构造界面的时候,通常会把构造界面放到Widget/MainWindow的构造函数中
• 这里的this指针,是给当前这个label对象,指定一个父对象(以后会说的对象树)
• 在QT中的字符串和C++/C中的字符串是不一样的,当时C++/C的字符串不好用,所以QT为了字节的开发能变的顺畅,就自己发明了一套轮子,搞了一系列基础类,来支持QT的开发,包括但不限于
  字符串->QString 动态数组->QVector 链表->QList 字典->QMap
• 在QString中也提供了 C风格字符串作为参数的构造函数,不显示构造QString,上述代码中,C风格字符串也会隐式构造成QString对象 
• 每个标签都有一个同名的头文件,但有时候也会被其他头文件间接包含,
  比如: QString 对应的头文件,已经被很多Qt内置的其他类给间接包含了,因此一般不需要显示包含QString头文件

这里还有一个值得思考的点: 一个对象new出来了,但是却没有delete,这难道不会造成内存泄漏吗

• ​​​​在上述代码中,Qt不会产生内存泄漏,label对象会在合适的时候被析构函数释放~~
• 之所以能够把对象释放掉,主要是因为把这个对象挂到了对象树上了,交给Qt的对象树统一管理
• 但如果这个对象是在栈上创建的话,就有可能会存在一些”提前释放“的问题,此时就会导致对应的控件就在界面上不存在了
• 推荐: 在堆上创建对象,并挂在对象树上

2.3.3 验证对象树会统一析构

• 注: 上面少写了个delete
•  自己实现label类,并继承QLabel,然后再自主实现析构函数
• 则可以在输出日志中观察到 自己实现的析构函数被调用了,则对象树的确会统一析构
• 这里使用qDebug进行输出日志(不建议使用cout),还有一个好处->可以进行统一关闭
  输出日志一般是在开发阶段,调试程序的时候使用

 2.4 快捷键

• 注释：ctrl + /
• 运⾏：ctrl + R
• 编译：ctrl + B
• 字体缩放：ctrl + ⿏标滑轮
• 查找：ctrl + F

2.5 使⽤帮助⽂档 

• 光标放到要查询的类名/⽅法名上, 直接按 F1(推荐)
• Qt Creator 左侧边栏中直接⽤⿏标单击 “帮助” 按钮
• 找到 Qt Creator 的安装路径，在 “bin” ⽂件夹下找到 assistant.exe，双击打开；

2.6 Qt 中的命名规范

• 类名：⾸字⺟⼤写，单词和单词之间⾸字⺟⼤写；MyClass  MyAdd
• 函数名及变量名：⾸字⺟⼩写，单词和单词之间⾸字⺟⼤写；studentCount

2.7 Qt 窗⼝坐标体系

计算机中的坐标系和数学中的坐标系是不一样的,y轴是向下增长的

•  对于嵌套窗口,其坐标是相对于父窗口来说的

3. 信号与槽

优点: 松散耦合   缺点: 效率较低

信号源: 由那个控件发出的信号

信号类型: 用户进行不同的操作,就可能会触发不同的信号

信号处理的方式: 槽(slot) -> 函数,这个函数的本质就是一种回调函数(callback)

Qt中可以使用connect这样的函数,把一个信号和一个槽关联起来,后续只要信号触发了,Qt就会自动执行槽函数

 而在Qt中,一定是先关联信号 和 槽 ,然后再触发这个信号,顺序不能颠倒否则信号就不知道如何处理

 3.1 connect函数

在 Qt 中，
QObject
类提供了⼀个静态成员函数 connect() ，该函数专⻔⽤来关联指定的信号函数和槽 函数

• connect(const QObject * sender,const char* signal,const QObject* receiver
  const char* method, Qt::ConnectionType type = Qt::AutoConnection)
• sender: 描述当前信号是那个控件发出的
• signal: 描述信号类型
• receiver: 描述了那个控件负责处理
• method: 描述了这个控件怎么处理(要处理信号的对象提供成员函数)

3.2 深度理解connect函数参数

• 我们上面传信号和槽都是传递的函数指针,而在C++中是不允许使用2个不同指针类型,相互传参相互赋值的(函数传参,本质就是赋值)
• 其实这个函数声明是以前旧版本的QT的connect函数声明,以前个信号参数传参,要搭配要给SIGNAL宏,给槽函数传参要搭配一个SLOT宏(这样做的目的是 将 传入参数 转成char*)
• connect(button,SIGNAL(&QPuhsButton::clicked),this,SLOT(&Widget::close))

但是后来因为书写起来太麻烦了,在Qt5时进行了改进

•  使用模板实现泛型编程,重载构造函数  
•   此时connect函数就有一定的参数检查功能:参数1和参数2不匹配 or 参数3和参数4不匹配,
  都会编译出错
• 则要求参数2必须是参数1的成员函数,参数4必须是参数3的成员函数

3.2 查看信号与槽

 自己平时的积累 + 查看文档

•  QPushButton自己本身没有clicked信号,但是它继承了QAbstractButton
• 在QAbstractButton中就有一个clicked点击信号
• 注: 这个QAbstractButton又使继承QWidget

•  我们写的widget在定义的时候就是继承QWidget的,而QWidget就有close这个关闭槽
• 注: QWidget这个类又是继承自QObject类的

3.3 自定义槽

 3.3.1 纯代码

3.3.2 图形化

• 使用图形化的方式创建,QTCreator 会直接给我们生成好一个函数on_pushButton_clicked 

• 在Qt中,除了通过connect来连接信号槽之外,还可以通过函数名字的方式自动连接

•  Qt中调用这个函数的时候,就会触发上述自动连接信号槽的规则
• 这个正是在自动生成的ui_widget.h中调用的

3.4 自定义信号(了解)

• 自定义信号,本质就是一个函数,只需要声明就行了,而这个函数的定义,是Qt在编译过程中,自动生成的(我们无法干预)
• 而作为信号参数,这个函数的返回值,必须是void的,有没有参数都是可以的,甚至可以支持重载
• Qt内置的信号,不需要手动触发,而自定义信号,需要手动代码触发  emit mySignal();
• 这里使用图形化方式创建一个按钮,在通过这个按钮发送 自定义信号
• 发送信号的操作, 也可以在任意合适的代码中. 不一定非得在构造函数里

3.6 带参数的信号与槽

•  带有参数的信号，要求信号的参数和槽的参数要一致
• 类型,个数要满足要求(信号的参数个数要多于槽的参数个数)

3.7 额外说明

3.7.1 前置条件

•  Qt 中如果要让某个类能够使用信号槽(可以在类中定义信号和槽函数),则必须要在类最开始的地方,写下Q_OBJECT宏
• 将这个宏展开,会得到一大段代码,然后而这一大段代码又可以展开

 3.7.2 设计目的

• 解耦,: 把触发 用户操作的控件 和 处理对应用户的操作逻辑 解耦合
• 实现”多对多”效果
  一个信号,可以connect到多个槽函数上
  一个槽函数也可以被多个信号connect
• 但是多对多的需求实际中并不常见,所以以后图形化开发框架都没有支持多对多

 3.7.3 disconnect断开连接

主动断开往往是把信号重新绑定到另一个槽函数上

• 如果没有 disconnect, 就会构成 一个信号绑定了两个槽函数. 触发信号的时候, 两个槽函数都会执行

3.7.4 lambda表达式 

定义槽函数的时候,也是可以使用lambda表达式的,

•  为了解决lambda访问作用域的问题,就需要引入变量捕捉的语法规则
• lambda语法是c++11中引入的，对于Qt5及其更高版本,默认就是按照c++ 11来编译的
• 如果使用Qt4或者更老的版本,就需要手动在.pro文件中加上C++的编译选项:CONFIG += c++11

4. 常用控件

 4.1 QWidget 核心属性

4.1.0 objectName 

4.1.1 enabled

 4.1.2 geometry && window frame

geometry: x y width height

•  注意: setGeometry(QRect),使用这个函数可能会改变原来的控件的width 和 heiv

4.1.3 windowTitie 

 4.1.4 windowlcon

通过
qrc
管理图⽚作为图标

 给Qt项目引入一个额外的xml文件(后缀名使用.qrc表示),在这个xml中把要使用的图片资源给导入进来,并且在xml中记录

Qt在编译项目的时候,就会根据qrc中描述的图片信息,找到图片内容,并且提取出图片的二进制数据,把这些二进制数据转换成C++代码,最终编译到exe里

 新建qrc文件

• 注意
  : 添加的⽂件必须是在 qrc ⽂件的同级⽬录, 或者同级⽬录的⼦⽬录中. 

•  在引入了qrc机制之后,就可以直接用相对路径访问的这个图片
• qrc机制主要解决2个问题:
  确保图片所在的路径在目标用户机器上存在
  确保图片不会被用户搞没了

4.1.5 windowOpacity 

•  注意: 窗口的不透明度,变化并非是精确的,这主要和浮点数在内存中的存储有关

4.1.6 cursor

• QPixmap是一个位图对象 

4.1.7 font

 关于 QFont

•  也可以使用ui界面直接修改

4.1.8 tooltip(解释说明的意思)

4.1.9 focusPolicy(设置控件获取到焦点)

设置控件获取到焦点的策略. ⽐如某个控件能否⽤⿏标选中或者能否通过 tab 键选中.

• Qt::NoFocus ：控件不会接收键盘焦点
• Qt::TabFocus ：控件可以通过Tab键接收焦点
• Qt::ClickFocus ：控件在⿏标点击时接收焦点
• Qt::StrongFocus ：控件可以通过Tab键和⿏标点击接收焦点 (默认值)
• Qt::WheelFocus
  : 类似于
  Qt::StrongFocus
  , 同时控件也通过⿏标滚轮获取到焦点 (新增
  的选项, ⼀般很少使⽤)

• 在ui界面上也可以直接更改 

4.1.10 styleSheet

通过 CSS 设置 widget 的样式.

•  也可以在ui界面上右键,然后再添加编辑样式表,

• 注意:这里的css样式别写错了,如果写错了Qt是不会报错的

4.2 按钮类 

4.2.1 Pushbutton(普通按钮)

•  QAbstractButton 作为 QWidget 的⼦类, 当然也继承了 QWidget 的属性. 上⾯
  介绍的
  QWidget
  ⾥的各种属性⽤法, 对于
  QAbstractButton
  同样适⽤

4.2.2 Radio Buttion(单选)  

4.2.3 QButtonGroup(按钮组)

• QButtonGroup表示: 每⼀组内部来控制排他, 但是组和组之间不能排他 

4.2.4 Check Box(多选)

 4.2.5 Tool Button(工具按钮)

QToolButton
的⼤部分功能, 和
QPushButton
是⼀致的. 但是
QToolButton
主要应⽤在⼯

具栏, 菜单等场景. 

4.3 显示类

4.3.1 Lable(普通文本框)

• 虽然 QPushButton 也可以通过设置图标的⽅式设置图⽚, 但是并⾮是⼀个好的选择. 更多的时候还是希望通过 QLabel 来作为⼀个
  更单纯的显⽰图⽚
  的⽅式.

 上述的案例存在一个问题,用户在拉伸窗口时,图片的size并没有随之改变,我们需要引入事件来解决

Qt中,表示用户的操作,有两类概念:一个是信号,另一个是事件~~

• 当用户拖拽窗口大小的时候,就会触发resize事件(resizeEvent)
• 像resize这样的事件,是连续变化的,把窗口尺寸从A拖到B这个过程中,就会触发一系列的resizeEvent,然后就可以借助resizeEvent来完成上述的功能

• 此处设置的缩进,即使文本换行了后续的行也会产生缩进,不仅仅是首行缩进

• 在QT中,QLabel中写的文本,是可以指定”快捷键”,但这里的快捷键的规则功能上,要比QPushButton要弱一点
• 它表示快捷键的操作是 & 跟上一个字符来表示快捷键
  比如: &A => 通过键盘上的alt+a来触发
• 而绑定了伙伴关系之后,通过快捷键就可以选中对应的单选按钮/复选按钮

4.3.2 LCD Number(LCD电子数字)

QLCDNumer 是⼀个专⻔⽤来显⽰数字的控件. 类似于 “⽼式计算器” 的效果.  

关于定时器 

•  在C++标准库中,没有提供定时器的实现,但Boost里面提供了对应的功能
• 而在Qt中也封装了对应的定时器~~(结合了信号槽机制)
• 通过QTimer这个类创建处理的对象,就会产生一个timeout这样的信号
• 再结合connect,把这个timeout信号绑定到需要的槽函数中,就可以执行周期性的修改LCDNumber中的数字

•  在Qt里面,界面中有一个专门的线程去负责维护更新(主线程->main函数所在的线程)
• 而对于GUI来说,内部包含了很多的隐藏状态,Qt为了保证修改界面的过程中,线程安全是不会受影响的,所以Qt就禁止了其他线程直接修改界面
  ui->lcdNumer->display(value),形如这种操作,就是在修改界面
• 对于Qt的槽函数来说,默认情况下,槽函数都是由主线程调用的,在槽函数中修改界面是没有任何问题的
  但要是自己创建了一个新线程,再修改界面就会出错,程序就会异常退出

4.3.3  ProgressBar(进度条)

• 进度条的更新也是需要搭配定时器来完成的

 4.3.4 Calendar Widget(日历)

4.4 输入类控件 

4.4.1 Line Edit(单行输入框)

核⼼信号

• inputMask 只能进⾏简单的输⼊格式校验.
  实际开发中, 基于
  正则表达式
  的⽅式是更核⼼的⽅法

要求在输⼊框中输⼊⼀个合法的电话号码(1 开头, 11 位, 全都是数字). 如果验证不通过, 则确定按钮⽆法点击

•  这里说明一下state validator(QString&,int &)函数的2个参数,
• 第一个参数是要验证的字符串,参数类型是QString & 不是const QString&,所以这里我创建了一个临时对象
• 第二个参数表示,如果这个字符串不符合规则,是从那个位置开始的

4.4.2 Text Edit(多行输入框)

QTextEdit 表⽰多⾏输⼊框. 也是⼀个富⽂本 & markdown 编辑器. 并且能在内容超出编辑框范围时⾃动提供滚动条

核心信号

 4.4.3 Combo Box(下拉选择框)

•  下拉框里的条目,一般都是从网络/文件中读取的
• QString::fromStdString(s);// 把std::string 转换成QString
• s.toStdString();//把QString转换成std::string

4.4.4 Spin Box(微调框) 

4.4.5 Date Edit & Time Edit  (日期&时间微调框)

这⼏个控件⽤法⾮常相似, 这里以
QDateTimeEdit
为例进⾏介绍

•  UTC 时间是⼀个基于原⼦钟的标准时间
• 如我们使⽤的北京时间, 位于 “东⼋区”, 就需要在 UTC 时间基础上 +8 个⼩时的时差

 核⼼信号

4.4.6 Dial(旋转按钮)

核心信号

4.4.7 Slider(滑动条) 

• 通过这些设置,就可以让滑动条控制拉伸窗口的大小 

•  也可以通过QShortcut这里个类实现快捷键,并connect槽函数

4.5 多元素控件

• QListWidget QListView 列表
• QTableWidget QTableView 表格
• QTreeWidget QTreeView 树形

4.5.0 xxWidget vs xxView是什么区别

• xxView是MVC结构的一种典型实现,MVC是软件开发中,非常经典的软件结构组织形式
  M model数据,V view 视图(界面),C controller控制器 数据和视图之间的业务流程
• xxView只是负责实现了视图,不负责数据如何存储表示,更不负责数据和视图之间的交互
• 而xxWidget是基于xxView封装而来的,同时吧model和controller都帮我们实现好了
  可以直接使用,它提供了功能很方便的api,让我们直接使用

 4.5.1 List Widget(纵向列表)

 核⼼⽅法

•  对于添加条目,可以直接通过图形化界面的方式

•  使用QListWidget时,记得包含头文件<QListWidget>

 4.5.2 Table Widget(表单)

TableWidget控件相当于二维ListWidget

 核⼼信号

Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); ui->lineEdit->setPlaceholderText("请输入一列名"); ui->lineEdit_2->setPlaceholderText("请输入一行名"); // 初始化表单 // 创建 3 行 ui->tableWidget->insertRow(0); ui->tableWidget->insertRow(1); ui->tableWidget->insertRow(2); // 给 3 行设定行名 ui->tableWidget->setVerticalHeaderItem(0, new QTableWidgetItem("NO.1")); ui->tableWidget->setVerticalHeaderItem(1, new QTableWidgetItem("NO.2")); ui->tableWidget->setVerticalHeaderItem(2, new QTableWidgetItem("NO.3")); // 创建 3 列 ui->tableWidget->insertColumn(0); ui->tableWidget->insertColumn(1); ui->tableWidget->insertColumn(2); // 给 3 列设定列名 ui->tableWidget->setHorizontalHeaderItem(0, new QTableWidgetItem("学号")); ui->tableWidget->setHorizontalHeaderItem(1, new QTableWidgetItem("姓名")); ui->tableWidget->setHorizontalHeaderItem(2, new QTableWidgetItem("年龄")); // 设置初始数据 ui->tableWidget->setItem(0, 0, new QTableWidgetItem("1001")); ui->tableWidget->setItem(0, 1, new QTableWidgetItem("张三")); ui->tableWidget->setItem(0, 2, new QTableWidgetItem("20")); ui->tableWidget->setItem(1, 0, new QTableWidgetItem("1002")); ui->tableWidget->setItem(1, 1, new QTableWidgetItem("李四")); ui->tableWidget->setItem(1, 2, new QTableWidgetItem("21")); ui->tableWidget->setItem(2, 0, new QTableWidgetItem("1003")); ui->tableWidget->setItem(2, 1, new QTableWidgetItem("王五")); ui->tableWidget->setItem(2, 2, new QTableWidgetItem("19")); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_addrow_clicked() { int row = ui->tableWidget->rowCount(); ui->tableWidget->insertRow(row); const QString& name = ui->lineEdit_2->text(); ui->tableWidget->setVerticalHeaderItem(row,new QTableWidgetItem(name)); } void Widget::on_pushButton_addcolum_clicked() { int col = ui->tableWidget->columnCount(); ui->tableWidget->insertColumn(col); const QString& name = ui->lineEdit->text(); ui->tableWidget->setHorizontalHeaderItem(col,new QTableWidgetItem(name)); } void Widget::on_pushButton_delrow_clicked() { int row = ui->tableWidget->currentRow(); ui->tableWidget->removeRow(row); } void Widget::on_pushButton_delcolum_clicked() { int cur = ui->tableWidget->currentColumn(); ui->tableWidget->removeColumn(cur); }

4.5.3 Tree Widget (树状形节点表单)

Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); ui->treeWidget->setHeaderLabel("动物"); QTreeWidgetItem* item1 = new QTreeWidgetItem(); item1->setText(0, "猫"); ui->treeWidget->addTopLevelItem(item1);//添加顶层节点 QTreeWidgetItem* item2 = new QTreeWidgetItem(); item2->setText(0, "狗"); ui->treeWidget->addTopLevelItem(item2);//添加顶层节点 QTreeWidgetItem* item3 = new QTreeWidgetItem(); item3->setText(0, "鸟"); ui->treeWidget->addTopLevelItem(item3);//添加顶层节点 } Widget::~Widget() { delete ui; } void Widget::on_pushButton_clicked() { const QString& text = ui->lineEdit->text(); if(text.isEmpty()){ return; } // 添加到顶层节点中 QTreeWidgetItem* item = new QTreeWidgetItem(); item->setText(0,text); ui->treeWidget->addTopLevelItem(item); } void Widget::on_pushButton_2_clicked() { const QString& text = ui->lineEdit->text(); if (text.isEmpty()) { return; } // 获取到当前选中的节点 QTreeWidgetItem* currentItem = ui->treeWidget->currentItem(); if (currentItem == NULL) { return; } // 构造新的 item QTreeWidgetItem* newItem = new QTreeWidgetItem(); newItem->setText(0, text); // 添加 item 到选中节点 currentItem->addChild(newItem); // 展开父节点 currentItem->setExpanded(true); } void Widget::on_pushButton_3_clicked() { QTreeWidgetItem* cur = ui->treeWidget->currentItem(); if(cur == NULL){ return; } // 获取当前节点的父节点 QTreeWidgetItem* parent = cur->parent(); if(parent == NULL){ // 顶层节点 // 查询指定节点是顶层节点中的下标 int index = ui->treeWidget->indexOfTopLevelItem(cur); ui->treeWidget->takeTopLevelItem(index); } else{ // 非顶层节点 parent->removeChild(cur); } }

•  QTreeWidget控件虽然是树形结构,但是这个树形结构,没有体现出根节点,
  是从根节点的下一次子节点开始计算的
• 针对顶层节点来说,这里也是一个类似于”List”这样的结构

 4.6 容器类控件

4.6.1 Group Box(控件组)

4.6.2 Tab Widget(多页面) 

属性	说明
currentChanged(int)	在标签⻚发⽣切换时触发, 参数为被点击的选项卡编号
tabBarClicked(int)	在点击选项卡的标签条的时候触发. 参数为被点击的选项卡编号
tabBarDoubleClicked(int)	在双击选项卡的标签条的时候触发. 参数为被点击的选项卡编号.
tabCloseRequest(int)	在标签⻚关闭时触发. 参数为被关闭的选项卡编号. ​​​​​​

• Qt 中使⽤
  ⽗⼦关系
  决定控件的相对位置

 4.7 布局控件

4.7.1 QVBoxLayout(垂直布局)

Layout 只是⽤于界⾯布局, 并没有提供信号 

• 界⾯上的按钮就存在于布局管理器中. 随着窗⼝尺⼨变化⽽发⽣改变  

• 界面上的按钮不会随窗口尺寸变化而发生改变 
• 通过 Qt Designer 创建的布局管理器, 其实是先创建了⼀个 widget, 设置过 geometry 属性
  的. 再把这个 layout 设置到这个 widget 中.
• 实际上, ⼀个 widget 只能包含⼀个 layout.

4.7.2 QHBoxLayout(水平布局) 

Layout 只是⽤于界⾯布局, 并没有提供信号 

• 界⾯上的按钮就存在于布局管理器中. 随着窗⼝尺⼨变化⽽发⽣改变 

• 布局控件是可以嵌套的所以 结合 QHBoxLayout 和 QVBoxLayout , 就可以做出各种复杂的界⾯了 

4.7.3 QGridLayout(网格布局) 

•  使⽤ addWidget 添加控件到布局管理器中. 但是添加的同时会指定两个坐标. 表⽰放在第⼏⾏, 第⼏列
• 任意调整⾏列, 即可看到不同的效果

• 注意: 如果要设置垂直方法的拉伸
  直接
  setRowStretch
  效果不明显, 因为每个按钮的⾼度是固定的. 需要
• 把按钮的垂直⽅向的
  sizePolicy
  属性设置为
  QSizePolicy::Expanding
  尽可能填
  充满布局管理器, 才能看到效果
  
  
  btn1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

 4.7.4 QFormLayout(表单布局)

属于是 QGridLayout
的特殊情况, 专⻔⽤于实现
两列表单的布局

这种表单布局多⽤于让⽤⼾填写信息的场景. 左侧列为提⽰, 右侧列为输⼊框 

4.7.5 Spacer(空白布局) 

使⽤布局管理器的时候, 可能需要
在控件之间, 添加⼀段空⽩
. 就可以使⽤
QSpacerItem
来表⽰.

• 调整 QSpacerItem 不同的尺⼨, 即可看到不同的间距 

5. QT窗口

Qt 窗⼝ 是通过
QMainWindow
类 来实现的。

• 菜单栏（menu bar）
• ⼯具栏(tool bars)
• 浮动窗⼝（铆
  接部件）(dock widgets)
• 状态栏(status bar)
• 中⼼部件(central widget)

5.1 菜单栏

⼀个主窗⼝最多只有⼀个菜单栏

5.1.1 创建菜单栏&&菜单&&菜单项 

• 这里的菜单项和后面的工具栏的工具是同一个类,都是QAction 

 5.1.2 添加快捷键 && 链接信号槽 

•  菜单项点击的时候会触发triggered信号,和前面那个信号类似

5.1.3 创建子菜单

• 就是在菜单中嵌套另一个菜单,就叫做子菜单

5.1.4 设置菜单项图标

•  如果给菜单也加上图标的话,就会把菜单的text覆盖掉

5.1.5 关于正确创建QMenuBar类 

•  如果我们之前创建的项目,没有勾选ui文件,此时这2种代码都是正确的
• 但是如果勾选了自动生成ui文件,那么第2种代码就会引起内存泄漏,因为Qt已经自动生成了一个QMenuBar(在ui文件中,各个类的结构中可以看到),同时后面的QStatusBar也是一样的问题

5.2 ⼯具栏

⼯具栏是应⽤程序中集成各种功能实现快捷键使⽤的⼀个区域 

5.2.1 创建工具栏 

•  工具栏是可以有多个,并且可以像浮动窗口一样浮动和移动的

5.2.2 设置工具栏停靠位置 

•  Qt::LeftToolBarArea 停靠在左侧
• Qt::RightToolBarArea 停靠在右侧
• Qt::TopToolBarArea 停靠在顶部
• Qt::BottomToolBarArea 停靠在底部
• Qt::AllToolBarAreas 以上四个位置都可停靠
• Qt中很多枚举类型值,都不建议死记,建议不清楚的时候查查文档

5.3 状态栏

状态栏是应⽤程序中输出简要信息的区域

5.3.1 创建工具栏 

5.4 滑动窗口 

5.4.1 创建滑动窗口

• 浮动窗口内部, 添加一些其他的控件,不能直接给这个浮动窗口添加子控件, 而是需要创建出一个单独的 QWidget, 把要添加的控件加入到 QWidget 中
• 然后再把这个 QWidget 设置到 dockWidget 中.

5.5 对话框

5.5.1 创建对话框

• QDialog不同于其他控件,此处QDialog每次按下按钮,都会创建一个新的QDialog对象
• 而一个程序运行过程中,可能会无数次触发点击这个按钮,就会产生无数个这样的对象
  不好好处理,就会出现内存泄漏的问题,

• 而Qt为了方便我们使用,就封装了一层,在实际使用的时候,只要给dialog设置上下面这个属性
  就会在关闭的时候自动进行delete(这个属于Qt内置的功能)
• dialog->setAttribute(Qt::WA_DeleteOnClose);

5.5.2 自定义对话框 

•  想要自定义对话框,就需要继承自QDialog创建类,这里是通过代码自定义的

• 这个操作会创建出一个ui文件以及对应的类 
• 通过图形化的方式创建会比代码创建的更快一些,因为会自动生成ui文件

5.5.3 模态与非模态

• dialog->show() 非模态: 弹出对话框的时候,用户可以操作父窗口 
• dialog->exec() 模态: 弹出对话框的时候,用户无法操作父窗口

• Qt 提供了多种可复⽤的对话框类型，即 Qt 标准对话框。Qt 标准对话框全部继承于 QDialog类 

 5.5.4 QMessageBox(消息对话框)

•  QMessageBox 使用场景更多的是模态的.

•  也可以通过QMessageBox中的静态成员函数,快速生成消息对话框

 5.5.5 QColorDialog(调色板对话框)

•  直接调用QColorDialog静态成员函数生成对象是最快的

5.5.6  QFileDialog(文件对话框)

• 此处的打开/保存这里的功能都是需要额外去实现的,并不是直接一保存就保存好了 

5.5.7 QInputDialog(输入对话框) 

5.5.8 QFontDialog(字体对话框) 

6.系统相关

6.1 事件

事件是应⽤程序内部或者外部产⽣的事情或者动作的统称

信号槽 : 用户进行的各项操作,就可能会产生出信号,可以给某个信号指定槽函数,当信号触发时,就能够自动的执行到对应的槽函数

事件: 用户进行的各种操作,也会产生事件,程序员同样可以给事件关联上处理函数(处理的逻辑),当事件触发的时候,就能够执行到对应的代码

总结:信号槽就是对于事件的进一步封装,事件是信号槽的底层机制

6.1.0 为什么会出现事件

•  在实际Qt开发程序的过程中,绝大部分和用户之间进行的交互都是通过”信号槽”来完成的
• 但是在有些特殊情况下,信号槽不一定能搞定(某个用户的动作行为,Qt没有提供对应的信号)
• 此时就需要通过重写事件处理函数的形式,来手动处理事件的响应逻辑
• 让当前的类,重写某个事件处理函数,这里用到的是“多态”机制,创建子类,继承自Qt中已有的类
  再在子类中重写父类的事件处理函数,后续事件触发的过程中,就会通过多态这样的机制,执行到我们自己写的子类函数中

6.1.1 QMouseEvent(鼠标事件)

#ifndef LABEL_H #define LABEL_H #include <QWidget> #include <QLabel> #include <QMouseEvent> class Label : public QLabel { Q_OBJECT public: Label(QWidget* parent); void mousePressEvent(QMouseEvent *event);// 按下 void mouseReleaseEvent(QMouseEvent *event);// 释放 void mouseDoubleClickEvent(QMouseEvent *event);// 双击 }; #endif // LABEL_H 

#include "label.h" #include <QDebug> Label::Label(QWidget* parent) : QLabel(parent) { ; } void Label::mousePressEvent(QMouseEvent *event) { if(event->button() == Qt::LeftButton){ //qDebug() << "按下左键"; this->setText("按下左键"); } else if(event->button() == Qt::RightButton){ qDebug() << "按下右键"; } } void Label::mouseReleaseEvent(QMouseEvent *event) { if(event->button() == Qt::LeftButton){ qDebug() << "释放左键"; } else if(event->button() == Qt::RightButton){ qDebug() << "释放右键"; } } void Label::mouseDoubleClickEvent(QMouseEvent *event) { if(event->button() == Qt::LeftButton){ qDebug() << "双击左键"; } else if(event->button() == Qt::RightButton){ qDebug() << "双击右键"; } } 

• 先在ui界面中创建label控件,再新创建一个文件,继承QLabel
• 注意:这里需要再ui界面中把这个控件提升为我们自己写的类
• 这里是针对QLabel重写的事件,自然也只能在label控件中看到效果

• 这里是在widget中重写的事件,则这个大窗口都会有效果  
• Qt为了保证程序的流畅性,默认情况下不会对鼠标移动进行追踪,鼠标移动的时候不会调用
  mouseMoveEvent,除非显示告诉Qt要追踪鼠标位置

6.1.2 QWheelEvent(鼠标滚轮事件)  

6.1.3 QKeyEvent(键盘事件) 

 6.1.4 QTimerEvent(时间事件)

• 此处的timerId类似于linux中的文件描述符
• QTimer的背后是QTimerEvent定时器事件进行支持的,所以要实现定时器,通常使用QTimer

6.1.5 QMoveEvent(窗口移动事件) 

6.1.6 QResizeEvent(窗口尺寸事件) 

6.2 文件

6.2.1 QFile类的各种操作

#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QPlainTextEdit> QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACE class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = nullptr); ~MainWindow(); void test_read(); void test_write(); private: Ui::MainWindow *ui; QPlainTextEdit* edit;// 纯文件控件 }; #endif // MAINWINDOW_H 

#include "mainwindow.h" #include "ui_mainwindow.h" #include <QFileDialog> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui->setupUi(this); // 获取到菜单栏 QMenuBar* menuBar = this->menuBar(); // 添加菜单 QMenu* menu = new QMenu("文件"); menuBar->addMenu(menu); // 添加菜单项 QAction* action1 = new QAction("打开"); QAction* action2 = new QAction("保存"); menu->addAction(action1); menu->addAction(action2); // 指定一个输入框 edit = new QPlainTextEdit(); QFont font; font.setPixelSize(20); edit->setFont(font); // 添加中心控件 this->setCentralWidget(edit); // 链接信号槽 connect(action1,&QAction::triggered,this,&MainWindow::test_read); connect(action2,&QAction::triggered,this,&MainWindow::test_write); } MainWindow::~MainWindow() { delete ui; } void MainWindow::test_read() { // step1: 先弹出"打开文件" 对话框,让用户选择打开哪个文件 QString path = QFileDialog::getOpenFileName(this); // step2: 把文件名显示到状态栏中 QStatusBar* statusBar = this->statusBar(); statusBar->showMessage(path); // step3: 根据用户选择的路径,构建一个QFile对象,并打开文件 QFile file(path); bool ret = file.open(QFile::ReadOnly);// 只读 if(!ret){ statusBar->showMessage(path+"打开文件失败"); } // step4: 读取文件 QString text = file.readAll(); // step5: 关闭文件 file.close(); // step6: 将读取到的内容设置到输入框中 edit->setPlainText(text); } void MainWindow::test_write() { // step1: 先弹出"保存文件" 对话框,让用户选择打开哪个文件 QString path = QFileDialog::getSaveFileName(this); // step2: 把文件名显示到状态栏中 QStatusBar* statusBar = this->statusBar(); statusBar->showMessage(path); // step3: 根据用户选择的路径,构建一个QFile对象,并打开文件 QFile file(path); bool ret = file.open(QFile::WriteOnly);// 只写 if(!ret){ statusBar->showMessage(path+"打开文件失败"); } // step4: 写文件 const QString& text = edit->toPlainText(); file.write(text.toUtf8()); // step5: 关闭文件 file.close(); } 

•  在Qt 中提供的这一套文件操作,使用起来还是非常简单的

6.2.2 QFileInfo(文件相关属性) 

 6.3 线程

6.3.1 QThread

6.3.2 QMutex

•  这里创建了2个线程,一个线程对num循环5k次,由于没加锁导致结果不是1w

•  这里把锁加上就不会出现各个线程相互竞争的问题了

6.3.3 QMutexLocker 

• 因为上面的锁很容易忘记释放,忘记unlock,在逻辑复杂的情况下
• Qt中也有一个对互斥锁进行封装的类->QMutexLocker,类似与std::mutex智能指针 
• C++11 也引入了std::lock_guard

6.3.4 其他补充说明

条件变量：QWaitCondition

信号量：QSemaphore

读写锁：QReadLocker、QWriteLocker、QReadWriteLock

• 这里就暂不介绍了,这里类和API用法和Linux中的类似,就是对系统函数/接口的封装,
• 要用到的时候,再查查文档

6.4 网路

•  为了能够引入头文件,这里需要添加Network

6.4.1 UDP协议的回显交互

#include "widget.h" #include "ui_widget.h" #include <QMessageBox> #include <QNetworkDatagram> Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); // step1: 创建套接字对象 sock = new QUdpSocket(this); this->setWindowTitle("服务器"); // step2: 连接信号槽 connect(sock,&QUdpSocket::readyRead,this,&Widget::processRequest); // step3: 绑定端口 bool ret = sock->bind(QHostAddress::Any,9090);// 任意ip if(!ret){ QMessageBox::critical(this,"服务器启动出错",sock->errorString()); return; } } Widget::~Widget() { delete ui; } void Widget::processRequest() { // step1: 读取请求并解析 const QNetworkDatagram& requestDatagram = sock->receiveDatagram(); QString request = requestDatagram.data(); // step2: 根据请求计算响应(由于是回显服务器,响应不需要计算,就是请求本身) QString response = process(request); // step3: 把响应写回客户端 QNetworkDatagram responseDatagram(response.toUtf8(),requestDatagram.senderAddress(),requestDatagram.senderPort()); sock->writeDatagram(responseDatagram); // 把这次交互的信息, 显示到界面上. QString log = "[" + requestDatagram.senderAddress().toString() + ":" + QString::number(requestDatagram.senderPort()) + "] req: " + request + ", resp: " + response; ui->listWidget->addItem(log); } QString Widget::process(const QString &request) { return request; } 

• 这是Udp_server.cpp文件

#include "widget.h" #include "ui_widget.h" #include <QNetworkDatagram> // 定义2个常量,描述服务器的IP 和 端口 const QString& SERVER_IP = "127.0.0.1"; const quint16 SERVER_PORT = 9090; Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); // step1: 创建套接字对象 socket = new QUdpSocket(this); this->setWindowTitle("客户端"); // step2: 连接信号槽 connect(socket,&QUdpSocket::readyRead,this,&Widget::processResponse); } Widget::~Widget() { delete ui; } void Widget::on_pushButton_clicked() { // 1.获取到输入框的内容 const QString& text = ui->lineEdit->text(); // 2.构造UDP的请求数据 QNetworkDatagram requestDatagram(text.toUtf8(),QHostAddress(SERVER_IP),SERVER_PORT); // 3.发送请求数据 socket->writeDatagram(requestDatagram); // 4.把发送的请求也添加到列表框中 ui->listWidget->addItem("客户端说: " + text); // 5. 把输入框的内容也清空一下 ui->lineEdit->setText(""); } void Widget::processResponse() { // 通过这个函数来处理收到的响应 // 1.读取到响应数据 const QNetworkDatagram& responseDatagram = socket->receiveDatagram(); QString response = responseDatagram.data(); // 2. 把响应数据显示到界面上 ui->listWidget->addItem("服务器回应: " +response); } 

•  这是udp_client.cpp文件

6.4.2 TCP协议的回显交互

#include "widget.h" #include "ui_widget.h" #include <QMessageBox> #include <QTcpSocket> Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); //1. 创建QTcpServer实例 tcpServer = new QTcpServer(this); this->setWindowTitle("服务端"); // 2.连接信号槽 connect(tcpServer,&QTcpServer::newConnection,this,&Widget::processConnection); // 3. 绑定并监听端口号 bool ret = tcpServer->listen(QHostAddress::Any,9090); if(!ret){ QMessageBox::critical(this,"服务器启动失败!",tcpServer->errorString()); return; } } Widget::~Widget() { delete ui; } void Widget::processConnection() { // 1. 通过 tcpServer 拿到一个 socket 对象, 通过这个对象来和客户端进行通信. QTcpSocket* clientSocket = tcpServer->nextPendingConnection(); QString log = "[" + clientSocket->peerAddress().toString() + ":" + QString::number(clientSocket->peerPort()) + "] 客户端上线!"; ui->listWidget->addItem(log); // 2. 通过信号槽, 来处理客户端发来请求的情况. connect(clientSocket, &QTcpSocket::readyRead, this, [=]() { // a) 读取出请求数据. 此处 readAll 返回的是 QByteArray, 通过赋值转成 QString QString request = clientSocket->readAll(); // b) 根据请求处理响应 const QString& response = process(request); // c) 把响应写回到客户端 clientSocket->write(response.toUtf8()); // d) 把上述信息记录到日志中. QString log = "[" + clientSocket->peerAddress().toString() + ":" + QString::number(clientSocket->peerPort()) + "] " + " req: " + request + ", resp: " + response; ui->listWidget->addItem(log); }); // 3. 通过信号槽, 来处理客户端断开连接的情况. connect(clientSocket, &QTcpSocket::disconnected, this, [=]() { // a) 把断开连接的信息通过日志显示出来. QString log = "[" + clientSocket->peerAddress().toString() + ":" + QString::number(clientSocket->peerPort()) + "] 客户端下线!"; ui->listWidget->addItem(log); // b) 手动释放 clientSocket. 直接使用 delete 是下策, 使用 deleteLater 更加合适的. // delete clientSocket; clientSocket->deleteLater(); }); } // 此处写的是回显服务器. QString Widget::process(const QString request) { return request; } 

•  这是tcp_server.cpp文件

#include "widget.h" #include "ui_widget.h" #include <QMessageBox> Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); // 1. 设置窗口标题 this->setWindowTitle("客户端"); // 2. 创建 socket 对象的实例 socket = new QTcpSocket(this); // 3. 和服务器建立连接. socket->connectToHost("127.0.0.1", 9090); // 4. 连接信号槽, 处理响应 connect(socket, &QTcpSocket::readyRead, this, [=]() { // a) 读取出响应内容 QString response = socket->readAll(); // b) 把响应内容显示到界面上. ui->listWidget->addItem("服务器说: " + response); }); // 5. 等待连接建立的结果. 确认是否连接成功. bool ret = socket->waitForConnected(); if (!ret) { QMessageBox::critical(this, "连接服务器出错", socket->errorString()); exit(1); } } Widget::~Widget() { delete ui; } void Widget::on_pushButton_clicked() { // 1. 获取到输入框中的内容 const QString& text = ui->lineEdit->text(); // 2. 发送数据给服务器. socket->write(text.toUtf8()); // 3. 把发的消息显示到界面上. ui->listWidget->addItem("客户端说: " + text); // 4. 清空输入框的内容. ui->lineEdit->setText(""); } 

•  这是tcp_client.cpp文件

6.4.3 HTPP协议

7. QSS

Qt中的QSS和前端中的CSS类似,也是通过设置样式美化界面

7.1 纯代码引入 

7.2 qrc机制引入 

7.3 ui界面中引入(推荐) 

7.4 子控件

 查阅文档: Qt Style Sheets Reference

•  记不住就多查查

8. 绘画 

画图相关的操作,一般不会放到QWidget的构造函数中调用执行,而是Qt提供了要给paintEvet事件处理函数,在这里进行调用,和它对应的是QPaintEvent事件

• QPainter: 提供一系列的绘画方法,实现绘画动作的
• QPaintDevice: 画板,其实QWidget也是QPaintDevice的子类
• QPen: 画笔
• QBrush; 画刷(填充时的属性)

9. 思维导图