0.引言现在开始介绍的各种Qt中的控件都是继承自QWidget所以QWidget的属性在接下来的控件中都是可以使用的。也就是刚刚QWidget中涉及到的各种属性/函数/使用方法针对接下来要介绍的Qt中的各种控件都是有效的下面来学习Qt中提供的各种控件。1.PushButton使用QPushButton表示一个按钮QPushButton继承自QAbstractButton类这个类是个抽象类是其它按钮的父类(抽象类包含了纯虚函数无法创建出实例对象。需要创建子类重写上述的纯虚函数才能够创建出子类的实例)。这有个图描述了按钮类的继承体系QAbstractButton里提供了一些这样的属性接下来通过代码感受一下这些属性的效果先来给按钮加一个图标。先把图片导入到项目中使用qrc的方式管理(后续编写代码如果用到一些图片等外部资源都会优先考虑qrc除非资源太大)添加好后就可以在代码中访问到resource.qrc里面的文件了。创建一个按钮然后进行完善并运行还可以把图标调整大一些接下来给按钮添加快捷键前面写过一个例子通过4个按钮控制target按钮的移动。之前的移动是通过鼠标点击按钮来实现的此处就可以引入快捷键通过快捷键来操作。下面写一下此处的按钮通过图片来表示此处把图片导入项目的时候由于图片多了不想再继续放到项目根目录下了。就创建了image目录把图片放到image目录中此时就意味着后续访问到这些图片就需要再路径中带上image这一级目录名字。有了图片资源后下面编辑ui创建界面(属性中改好名字)右上边可以看到Qt程序运行过程中对象树的模样更直观的看到对象树结构以及每个对象的objectName。界面准备完毕了下面进一步的编写构造函数完成初始化操作下面实现方向键的槽函数运行可以看到基本功能都以及没有问题了。下面设置快捷键在Widget的构造函数中完成这样程序一启动快捷键就有效它的参数是QKeySequence对象。key表示按键sequence表示序列说明按下的快捷键不一定是单个按键也可能是组合键运行发现可以达到基本的要求。通过按键的名字来设置虽然简单但是容易写错。这里还可以通过按键的枚举来设置按键快捷键这样可以确保拼写不会出错。也可以用这种方式写组合键比如若是第一种方式则这样写再说说连发功能现在的程序键盘快捷键默认可以连发但鼠标点击按钮不可以我们需要设置一下autoReapeat(true)此时就可以了。2.Radio ButtonQRadioButton是单选按钮可以让我们在多个选项中选择一个。它也是继承自QAbstractButton一些属性和QRadioButton直接相关下面通过代码来演示先创建一些按钮(顺便修改objectname来完成性别选择)接下来再来一个label用来显示用户的结果此时界面创建好了接下来给三个按钮添加槽函数测试也发现上述的选择过程有排他的效果选了一个就会自动取消其它的选中状态。前面代码中看到程序一启动是没有选中任何选项的我们也可以让程序一启动有一个默认的选项此时就会有默认选项了。比如想禁用其他选项现在虽然无法选中但点击事件可以响应所以checkable只是能够让按钮不被选中仍然可以响应点击事件所以这样此时这样的按钮彻底变成了灰色点击后也没有用。前面在转到槽时看到QAbstractButton里提供了很多信号那这些信号都是干什么的呢clicked表示点击pressed表示按下released表示抬起。通过代码感受一下创建了一些按钮然后设置不同的槽函数(1关联clicked(bool) 2关联pressed 3关联released 4关联toggled)下面运行程序来看看其余的都好理解说说4当点击4时checked从flase状态变为了true所以会触发toggled信号。当继续点击4就没有反应了因为没有涉及到切换当再次点1看到1这里的clicked确实触发了但是4的toggled也触发了因为在排他机制下4从true变成了false。接下来结合上述来写一个复杂一些的例子基于QRadioButton实现一个简单的模拟点餐的功能。先设计一下界面RadioButton默认是排他的一旦界面上需要存在“多组”单旋按钮的时候希望组和组之间不要有影响。Qt中引入了QButtonGroup类可以针对单旋按钮进行分组这样可以确保排他机制是按照每个组来展开的。下面完成一下此时不同组里面就不存在排他了。3.QCheckBox的使用QCheckBox表示复选按钮可以在多个选项中选中任意多个选项。这个按钮的属性也是继承自QAbstractButton主要是checkable和checked。下面来通过代码演示一下先创建一下界面下面来添加槽函数4.QLabel显示类控件就是用来在界面上显示一段内容的。其中最主要用到的控件就是Label标签这是Label或QLabel类的一些重要的属性下面通过代码来演示一下先来演示一下textFormat起到的效果继续编写代码虽然给label设置了不同的文本格式直接运行程序看起来好像没有什么区别因为富文本和markdown里面1并没有包含真正的对应的符号。下面加些东西让它看起来有一些变化这些加的符号如果加在纯文本中只会被当作是纯文本的一部分。下面来用QLabel显示图片把图片资源用qrc机制管理好然后编辑代码先把QLabel设置成和窗口一样大并且把这个QLabel左上角设置到窗口左上角让整个QLabel铺满整个窗口。窗口的大小可以在ui文件中选中窗口后看到可以写死也可以不用写死看到图片并没有真的把整个界面都铺满因为窗口是800*600QLabel也是一样了图片就不一定了。我们可以使用scaledContents来自动拉伸现在填充满了但是我拖动窗口又不满了在上面代码中我们在构造函数进行了setGeometry尺寸设置这个设置相当于是”一次性的“一旦程序运行起来后QLabel的尺寸就固定下来了。窗口发生改变此时QLabel是不会变化的。那怎样让QLabel随着窗口大小时时发生改变呢这里先提前说个知识点叫事件。Qt中表示用户的操作有两类概念一个是信号另一个是事件。当用户拖拽修改窗口大小的时候就会触发resize事件(resizeEvent)。像resize这样的事件是连续变化的把窗口尺寸从A拖拽到B这个过程会触发一系列的resizeEvent。此时就可以借助resizeEvent来完成上述的功能可以让Widget窗口类重写父类(QWidget)的resizeEvent虚函数。在鼠标拖拽窗口尺寸的过程中这个函数就会被反复的调用执行。每次触发一个resizeEvent事件都会调用一次对应的虚函数。由于此处进行了重写调用父类的虚函数就会实际调用到子类的对应的函数。下面来实现我们可以打印来看看发现拖拽的过程中发生了一系列的打印。在实际编程中指定回调函数其实有很多种写法1.设置函数指针。2.设置仿函数(函数对象)。3.设置lambda。4.通过重写父类虚函数(框架种拿着父类的指针调用这个函数如果你创建了子类重写了这个函数此时在多态机制下实际执行的就是子类的函数了)。5.Qt的信号槽。继续来完善代码此时label尺寸始终和窗口大小是一致的。接下来看QLabel的文本对齐自动换行缩进边距相关的属性。先在界面上创建一些label出来在QtCreator右侧属性编辑区能够看到类之间的继承关系。QLabel继承自QFrameQFrame继承自QWidget。QFrame中有个frameShape属性通过修改它可以给label加边框接下来针对这些label来设置它不同的属性下面演示一下QLabel伙伴可以把QLabel和一个像单选框、复选框这样的控件绑定为一个伙伴关系此时可以通过QLabel触发单选框或复选框等选择操作。下面先ui中编辑然后用代码把它们关联起来此时我按ALTB对应的选项就可以被选中。Qt中QLabel中写的文本是可以指定”快捷键此处快捷键的规则功能上要比QPushButton弱很多。是在文本中使用跟上一个字符来表示快捷键比如A通过键盘上的atla来触发这个快捷键。绑定了伙伴关系后通过快捷键就可以选中对应的单选按钮/复选按钮。5.QLCDNumberQLCDNumer是一个专门用来显示数字的控件类似于 老式计算器 的效果。这是它的一些核心属性下面通过代码来感受一下我们写一个倒计时使用QLCDNumber显示一个初始的数值比如10每隔1秒钟数字就-1一直到0就停止了。打开ui文件拖拽LCDNumber接下来完善代码此处的关键点是要实现“每秒钟-1”这个效果怎样去实现这样的效果呢它所体现的问题是周期性的执行某个逻辑。这种周期性执行某个问题我们往往会封装成一个组件供我们使用这类组件我们称为定时器。C标准库中没有定时器的实现Boost里面提供了对应的功能。Qt中也封装了对应的计时器它结合了信号槽的机制。Qt中提供了QTimer类通过这个类创建出来的对象就会产生一个timeout这样的信号可以通过start方法来开启定时器并且参数中设定触发timeout信号的周期。然后结合connect把这个timeout信号绑定到需要的槽函数中就可以执行逻辑修改LCDNumber中的数字了。下面实现此时运行程序就可以看到计时器正常工作了。此时可能会有疑惑这个代码不用QTimer能不能达成类似的效果呢比如构造函数里弄一个循环下面来试一试先创建ui文件接下来完善代码以前c语言中用过Sleep这个Sleep是Windows的api需要包含“Windows.h”头文件才能使用的。这个东西只能在vs中使用qt用mingw gcc windows版本的编辑器无法使用Windows.h。在c11标准库中引入了sleep操作叫做sleep_for我们来使用我们运行后发现程序一直没有出来等了一会程序窗口出来了但是显示的是0这里是Widget的构造函数需要把Widget构造完毕然后才能show执行后续的显示操作因此达不到预期的倒计时的效果。那可不可以在构造函数中另外创建一个线程在新的线程中执行上述循环更新操作我们试一下运行发现提示我们进程终止了。Qt里界面有一个专门的线程去负责维护更新的(主线程)。对于GUI来说内部包含了很多的隐藏状态Qt为了保证修改界面的过程中线程安全是不会受到影响的Qt禁止了其它线程直接修改界面形如上面30行就是在修改界面。因此Qt为了确保线程安全直接要求所有的对界面的修改操作必须在主线程中完成。对于Qt的槽函数来说默认情况下槽函数都是由主线程调用的在槽函数中修改界面是没有任何问题的。在main函数后面有execexec就会使主线程进入“事件循环”exec就会一直循环下去每执行一次循环都会有一些固定的事情要操作比如执行槽函数。6.QProgressBar它表示一个进度条这里有进度条的一些相关的属性接下来通过代码感受一下创建一个进度条让这个进度条的进度跟随事时间增长(可以假设每隔100ms让进度条数值1)。先来编辑ui文件然后切回代码运行程序就可以看到进度条在增长了。这有个细节上述代码中我们把QTimer头文件放在了widget.h中在前面QLCDNumber中头文件包含是放在.cpp中的。我们现在放过来程序还是可以正常运行的此时可以看到一个问题我们虽然在widget.h中用到了QTimer但是确没在.h中包含QTimer头文件。那为啥这个代码编译不会出错为啥此处的QTimer就不会提示‘找不到定义’之类的错误上述问题其实是通过Qt内部提供的一个特殊技巧来实现的在Qt中有一个专门的头文件这个头文件中包含了Qt中所有类的“前置声明”这个头文件一般不会直接接触到但是包含其它的Qt的头文件都会间接的包含到这个头文件。因此前面没有报错是由于在WIdget类的前面已经提供了QTimer类的声明的话此时就可以在Widget中使用QTimer的指针/引用类型的成员。这个是C中的特殊技巧在Qt中被使用到了。后续如果真正使用QTimer(包括创建实例使用里面的成员)仍然需要包含QTimer的头文件(包含了QTimer的详细的类的定义)。上面的代码中进度条是绿色的那能不能改成是一个红色的进度条。重新创建编辑uiQProgressBar::chunk是个选择器就是咱们设置的样式到底要针对哪个控件。chunk就是这个部分就是把背景色改为了红色。变红色后发现数字跑到左上角了(可能是Qt的bug)。虽然不能放在最初的位置了但是可以自己调整一下7.QCalendarWidget它表示一个日历这是一些相关的属性这是它提供的一些信号下面通过一个简单的例子来用一下日历的使用方式。在ui中编辑我们用日历里提供的信号通过这个信号表示选中的内容是哪一个。继续完善此时点击哪一个日期label里就会显示哪一个日期。8.QLineEdit下面开始介绍一些输入类的控件和前面显示类的控件不同显示类的控件只是负责显示输入类控件既能显示又能让用户去输入一些内容。使用最广泛的输入类控件是QLIneEdit表示单行输入框可以输入一段文本不能换行。这是它的一些核心属性这个text属性不仅仅可以通过代码来设置用户在输入框中进行编辑也会影响到text值的变化。这还有一些关于输入框的信号下面通过代码来感受一下让用户输入我们指定的个人信息然后通过提交按钮把上述内容给统一获取到。先来编辑ui文件下面切回代码下面测试一下上述例子中我们使用InputMask属性来验证用户输入的是否是一个正确的电话号码但是inputMask功能比较有限只能进行简单的验证。若想进行更复杂的验证就需要使用”正则表达式“。它是一个计算机中的通用概念和具体的编程语言无关。正则表达式本质上就是一个带有特殊字符的字符串特殊字符用来表示另一个字符串的特征此时就可以借助正则表达式来描述出一些具有一定特点的字符串基于这些特点就可以完成字符串的匹配。这是正则表达式的语法正则表达式语法 | Microsoft Learnhttps://learn.microsoft.com/zh-cn/previous-versions/visualstudio/visual-studio-2008/ae5bf541(vvs.90)?redirectedfromMSDN这是正则表达式测试的在线工具正则表达式语法测试工具 - 在线工具 (buyaocha.com)https://regextester.buyaocha.com/用到的时候查就可以了。接下来通过正则表达式来对输入框输入手机号验证一下先编辑ui此处的规则是输入框要检查输入的内容是否是合法的手机号码如果是则按钮设为可用状态如果不是则设为禁用状态。下面编辑代码这是一个简单的验证手机号码的正则表达式。^表示以xxx开头^1意思就是以1开头\d表示数字为了在c字符串中使用需要写作\\d{10}表示前面的内容重复出现10次\d数字要重复出现10次$表示结尾。继续写现在只是注册了一个验证器具体验证器怎么使用还需要写其它代码来完成。验证输入框的内容是否合法只要输入框的内容发生改变了验证操作就应该被执行。继续写下面验证一下下面再基于LineEdit写一个例子来完成验证两次输入的密码是否一致。先来编辑ui文件下面来完善代码然后使用textEdited信号来触发对于两个输入框内容的判定上述代码完成了响应的要求但是形参我们没有用到所以会有警告。如果想消除警告可以这样这个写法是类型转换这个写法对于代码的实际逻辑是没有任何影响的同时可以”骗过“编译器警告就没有了。再实现一个功能针对密码可以切换”显示密码“状态。先来编辑ui文件下面来编辑代码下面运行一下9.QTextEditQTextEdit表示多行输入框在Qt中表示多行输入框有QTextEdit和QPlainTextEdit。QPlainTextEdit只能表示纯文本QTextEdit不仅能表示纯文本还可以表示html和markdown。继续说QTextEdit这是它所包含的一些核心属性这有一些相关的信号下面通过代码来感受一下我们在输入框中输入内容然后显示到label上面去。先编辑一下ui文件下面来写代码(转textChanged信号)下面再写例子显示QTextEdit这几个信号(ui文件中放一个输入框)。下面演示10.QComboBox它表示下拉框这是它的一些核心属性这是一些核心方法还有一些信号下面通过代码来感受一下模拟一下麦当劳点餐。先编辑一下ui文件下面编辑代码此时就有条目了。现在编辑一下提交按钮以上就是下拉框基本的使用方式。上面用代码的方式编辑的下拉框中的内容也可以使用图形化的方式来进行编辑再写一个例子下拉框里的内容很多时候不是代码中写死的而是通过文件/网络加载数据得到的。下面演示一下通过文件加载先编辑一下ui文件然后选中从文件中加载老婆的信息。创建一个文件并填好一些信息继续编辑代码此时就有了一个动态改变的效果。11.QSpinBox它表示微调框大概是这样的输入框输入框可以输入整数或小数右边有按钮可以通过按钮对里面的数值进行微调。这是QSpinBox的一些相关的属性还有一些相关的信号下面通过代码来感受一下还是以点餐为例现在不光可以选则食物还可以通过微调框来选择具体的数量。先编辑ui文件下面编写代码现在细节是初始情况下微调框是0在这个场景下不合适太多也不科学我们再改进一下12.QDateTimeEdit这些控件是基于微调框弄出来的输入时间或日期的控件使用QDateEdit作为日期微调框使用QTimeEdit作为时间的微调框使用QDateTime作为时间日期的微调框。这几个控件用法非常相似下面以QDateTimeEdit为例进行介绍。这是关于QDateTimeEdit的核心属性最后一个是使用的时间规范。这有一些核心信号下面通过代码感受一下写一个时间计算器计算两个时间中间的间隔是多少天/多少小时。先来编辑ui文件下面来编写代码上面的代码其实还有些小问题发现此时的结果是1天07小时1号17点到2号的0点中间是隔了7个小时不是1天07小时。我们计算天数用的daysTo函数文档中查有两个当前我们用的是第二个点进去看看描述说明计算的是之间有多少午夜。因此这样改进一下如果当前得到的小时数不足24由于次数是整数除法就会舍弃掉小数点后的内容。下面再次运行一下13.QDial它表示一个旋钮这是它的一些基本的核心属性这是它的相关信号下面通过代码来感受一下先编辑一下ui界面我们要完成通过旋钮来控制窗口的不透明度(opacity)。我们先来一些设置下面来编写(用valueChanged信号)那能否借助这个旋钮实现调整系统声音的功能呢可以但是没那么容易。调整系统声音是Windows系统的apiQt没有封装这个api此时就非常麻烦(系统原生的api使用起来也很麻烦)。此时就需要通过vs写一个动态库把系统的原生api封装一下再让Qt的程序来调用动态库。14.QSlider这个控件表示滑动条QSlider和QDial都是继承自QAbstractSlider因此用法上基本相同。这是它的相关属性这是它的核心信号下面通过代码演示一下我们在窗口上放两个滑动条一个是水平方向一个垂直。滑动这两个滑动条就可以调整窗口的大小。先编辑一下ui文件(往右变大往下变大)下面编写代码接下来给两个滑动条设置槽函数接下来再来写一个例子写一个自定义快捷键通过快捷键来操作滑动条。滑动条本身可以通过方向键和pageUp和pageDown操作但是咱们也可以自定义。下面编辑ui文件下面编写代码此时就可以用我们的快捷键来增加和减小数值了。15.多元素控件介绍多元素意思是控价里面包含了很多的元素元素可能指的是字符串也可能是更加复杂的字符串等。这有一些具体的多元素控件前两个表示列表这样的结构中间两个表示表格这样的结构后面两个表示树形结构。那上面xxWidget和xxView是什么区别呢概括来说xxView是更底层的实现xxWidget是基于xxView封装而来的。这样理解16.QListWidget它表示一个能够纵向显示的列表这是它所涉及到的一些属性这是它的一些核心方法说说第一个列表中的每个元素/每一项就称为是一个item更具体的说通过QListWidgetItem类表示的。再说说第五个此处的row参数就表示插入完毕之后新的元素在第几行把新元素插入到第几行之前。这还涉及到一些关键的信号下面通过代码来感受一下可以输入框输入内容新增进去也可以选中条目删除。先编辑一下ui文件下面编写代码先给列表添加一些初始元素。这是另一种添加方式也可以通过图形化的方式来添加选中listWidget右键点编辑项目如果这里初始内容是固定的此时通过哪种方式来初始化都可以如果这里的内容是不固定的要通过读取文件/读取网络来构造数据就需要通过代码的方式来添加了。切回代码方式继续此时这样一个功能就完成了。还可以再加一些功能17.QTableWidget它表示一个表格控件一个表格中包含若干行每一行又包含若干列。这是一些相关的核心方法这是一些核心信号表示每一个单元格可以用QTableWidgetItem这是它的一些方法下面通过代码来感受一下先编辑ui文件下面编写代码图像化界面初始化运行先看看如果当前表格中的数据是固定的完全就可以通过图形化的方式来进行编辑但实际开发中很多时候数据是从文件/网络中来的此时通过图形化编辑就不合适了。下面切回代码继续此时已经有了数据。下面完善一下按钮18.QTreeWidget它表示一个树形控件里面的每个元素都是一个QTreeWidgetItem每个QTreeWidgetItem可以包含多个文本和图标, 每个文本/图标为一个列。这是它所提供的相关的方法QTreeWidget控件虽然是树形结构但是这个树形结构没有体现出根节点它是从根结点的下一层子节点开始计算的这里的树画橘色框那里表示的是顶层结点。针对顶层结点来说这里也是一个类似于“List”这样的结构。这是关于QTreeWidgetItem核心属性这是QTreeWidgetItem的核心方法通过上述知道顶层结点的相关操作都是在QTreeWidget这个类上面的更往后的子节点都是借助QTreeWidgetItem提供的方法来操作的。下面通过代码感受一下先编辑一下ui界面可以通过图形化界面初始化数据最上面的1相当于树根结点这就是通过界面的方式来获取。下面通过代码重新来操作此时添加好了顶层结点。继续完善初始化好了后下面实现一下按钮的相关功能上述的几个控件相关的操作数据都是在内存中保存的无论界面上做任何操作重新运行程序之前的数据就都没有了。如果要想让数据能够重新启动也不丢失就需要编写更多的代码把内存存储的数据获取到写入到文件中并且在下次运行的时候从文件加载数据。19.QGroupBox接下来介绍的控件是容器类控件容器类控件指的是控件里面可以容纳其它的一些控件。多元素控件包含的内容是一个一个的自定义好的“item”对象。容器类控件包含的内容是前面已经学过的各种控件比如QPushButton、QLineEdit、QLabel等。容器类控件这里主要介绍两个一个是QGroupBox表示分组框还有一个是QTableWidget表示标签页。先来介绍QGroupBox它大概是这个样子可以把其它的各种控件放到GroupBox种这些内部的控件的父元素就不是this了而是这个GroupBox。它存在的意义是为了让界面看起来更好看一些。当一个界面比较复杂的时候包含了很多控件的时候分组框就可以把具有关联关系的控件组织到一起。这是它的核心属性下面通过代码演示一下写一下麦当劳点餐先编辑一下ui下面运行一下可以看到通过分组框把这里的控件进行了分组可以让界面看起来更加清晰有条理。再看看属性看到勾选后只剩上面一根线了。20.QTableWidget它可以起到一个带有标签页的效果然后可以在标签页里放一些其它的widget。先通过代码看一下标签页大概是什么样子可以看到有标签页的效果每一个标签页里面都是可以放一些具体的控件的。比如可以放不同的label。如果想有更多的标签页或删除可以这样现在看看它所提供的属性这还有一些核心信号下面通过代码感受一下创建一个程序带有一个TableWidget作为标签页。提供两个按钮分别创建新的标签页关闭当前选中的标签页。当切换标签页的时候也能感知到变化。先来编辑ui文件下面编写下面完善按钮再完善感知到标签页切换操作21.QVBoxLayout下面介绍一下Qt中的布局管理器之前把控件放到界面上都是靠“手动”的方式来布局的。但是这种手动调整的方式是不科学的1.手动布局的方式非常复杂而且不精确。2.无法对窗口大小进行自适应。因此Qt引入了很多布局管理器垂直布局水平布局网格布局表单布局。下面介绍一下垂直布局Qt中使用QVBoxLayout表示垂直的布局管理器。这有一些核心属性下面通过代码感受一下但是每个widget中只能设置一个布局管理器往往可能不够下面看看如何在widget中弄出多个布局管理器出来。先编辑ui文件看到存在两组Layout每个Layout包含了多个按钮。但此时调整窗口大小看到里面的内容并不会像前面那样随之发生变化。如果在代码中创建layout其实是只创建了一个layout。如果在QtDesigner中创建layout先创建了一个Widget然后再这个新的Widget中添加了一个layout。刚才是先拖了layout过去然后再往layout中托其它控件也可以先托其它控件后给这些控件套上layout这个按钮表示把选中的旋若干控件外头套上一个垂直布局的layout。22.QHBoxLayout这个表示水平布局管理器这是它的相关属性下面通过代码演示一下现在界面上就把这三个按钮水平方向排列放到布局管理器中了。布局管理器之间也能进行嵌套。我们用一个垂直布局管理器把两个按钮添加进去然后下面弄一个水平的布局管理器把水平布局管理器添加到垂直布局管理器中再往水平布局管理器里面添加两个按钮。下面实现23.QGridLayout前面使用水平布局垂直布局可以起到一种二维化布局的方式但是全依赖这个东西写代码会比较的麻烦。于是这里说说网格布局可以更方便的实现M*N这样的一个效果。这是它的一些属性下面看看网格布局最基本的使用情况这样完成了最基本的网格布局。这里是排列成了2*2的效果也可以修改坐标起到更加灵活的布局效果这个写法就相当于水平布局了此时这里的行数只要是一样的即可不一定非是0。下面再改变一下代码这个写法相当于垂直布局了。再比如这种写法是每个按钮独占一行或一列。若把上述的3,3改为100,100运行后发现是一样的。说明即使设置成100也不会在中间搞出很大的空白空间。此处的行数和列数只是用来决定空间之间的相对位置。接下来介绍一下布局管理器中拉伸系数的问题我们刚才创建的布局管理器这里的控件尺寸都是均等的。当我们需要创建出尺寸不同的控件的时候就可以通过拉伸系数来设置。拉伸系数就相当于设置控件之间尺寸的比列。下面结合代码来演示一下此时按钮按照2行3列的方式排列好了。上述按钮看上去宽度都是一样的接下来设置拉伸系数这个拉伸系数中有个特殊的取值0如果拉伸系数设为0意思是不参与拉伸此时按钮的宽度是固定值。此时调整窗口大小可以看到第一列的窗口尺寸大小并没有改变。接下来重新创建项目看看垂直方向的拉伸该怎么设置现在把按钮按照3行2列的方式排列进去了。下面设置拉伸系数运行发现代码看上去没什么效果。上述代码直接设置拉伸系数发现是无效的。这里之所以没有拉伸是因为SizePolicy起到的影响。这个是QWidget的属性它有这些属性由于按钮垂直方向默认没有拉伸开(水平方向默认是拉伸的)因此垂直方向不会受到拉伸系数的影响了。要想让垂直方向的拉伸系数生效就需要让按钮先能够拉伸展开看到垂直拉伸打开后变化非常大比起之前。有了这个前提现在再设置拉伸系数发现拉伸可以生效了此时高度尺寸是1:1:2来展开的。24.QFormLayout下面介绍一下Qt中的表单布局它本质上属于网格布局的一种特殊情况。下面结合代码来演示一下还可以添加按钮进去25.QSpacerItem接下来介绍一下Qt中的Spacer它是搭配布局管理器使用的工具它表示一段空白。因为布局管理器里默认情况下控件和控件之间挨着比较紧如果期望控件之间有一个比较明显的间隔就可以使用这样1一个类。这是它的一些属性接下来通过代码演示一下使用情况我们想让水平方向上有两个按钮然后两个按钮不是仅仅挨在一起的而是中间有空白现在是水平方向排列但是按钮间非常近。下面来用空白ui中也是可以添加空白的它们都是SpaceItem。26.总结上述的每个控件都是可扩展的。每个控件都是Qt内置的一个类咱们在代码中都可以基于这个类继承出你自定义的子类。在这个自定义的子类中又可以添加很多的属性和方法实现你自己的需求场景还可以在子类中把多个控件组合到一起。 常用控件的介绍（下）
0.引言现在开始介绍的各种Qt中的控件都是继承自QWidget所以QWidget的属性在接下来的控件中都是可以使用的。也就是刚刚QWidget中涉及到的各种属性/函数/使用方法针对接下来要介绍的Qt中的各种控件都是有效的下面来学习Qt中提供的各种控件。1.PushButton使用QPushButton表示一个按钮QPushButton继承自QAbstractButton类这个类是个抽象类是其它按钮的父类(抽象类包含了纯虚函数无法创建出实例对象。需要创建子类重写上述的纯虚函数才能够创建出子类的实例)。这有个图描述了按钮类的继承体系QAbstractButton里提供了一些这样的属性接下来通过代码感受一下这些属性的效果先来给按钮加一个图标。先把图片导入到项目中使用qrc的方式管理(后续编写代码如果用到一些图片等外部资源都会优先考虑qrc除非资源太大)添加好后就可以在代码中访问到resource.qrc里面的文件了。创建一个按钮然后进行完善并运行还可以把图标调整大一些接下来给按钮添加快捷键前面写过一个例子通过4个按钮控制target按钮的移动。之前的移动是通过鼠标点击按钮来实现的此处就可以引入快捷键通过快捷键来操作。下面写一下此处的按钮通过图片来表示此处把图片导入项目的时候由于图片多了不想再继续放到项目根目录下了。就创建了image目录把图片放到image目录中此时就意味着后续访问到这些图片就需要再路径中带上image这一级目录名字。有了图片资源后下面编辑ui创建界面(属性中改好名字)右上边可以看到Qt程序运行过程中对象树的模样更直观的看到对象树结构以及每个对象的objectName。界面准备完毕了下面进一步的编写构造函数完成初始化操作下面实现方向键的槽函数运行可以看到基本功能都以及没有问题了。下面设置快捷键在Widget的构造函数中完成这样程序一启动快捷键就有效它的参数是QKeySequence对象。key表示按键sequence表示序列说明按下的快捷键不一定是单个按键也可能是组合键运行发现可以达到基本的要求。通过按键的名字来设置虽然简单但是容易写错。这里还可以通过按键的枚举来设置按键快捷键这样可以确保拼写不会出错。也可以用这种方式写组合键比如若是第一种方式则这样写再说说连发功能现在的程序键盘快捷键默认可以连发但鼠标点击按钮不可以我们需要设置一下autoReapeat(true)此时就可以了。2.Radio ButtonQRadioButton是单选按钮可以让我们在多个选项中选择一个。它也是继承自QAbstractButton一些属性和QRadioButton直接相关下面通过代码来演示先创建一些按钮(顺便修改objectname来完成性别选择)接下来再来一个label用来显示用户的结果此时界面创建好了接下来给三个按钮添加槽函数测试也发现上述的选择过程有排他的效果选了一个就会自动取消其它的选中状态。前面代码中看到程序一启动是没有选中任何选项的我们也可以让程序一启动有一个默认的选项此时就会有默认选项了。比如想禁用其他选项现在虽然无法选中但点击事件可以响应所以checkable只是能够让按钮不被选中仍然可以响应点击事件所以这样此时这样的按钮彻底变成了灰色点击后也没有用。前面在转到槽时看到QAbstractButton里提供了很多信号那这些信号都是干什么的呢clicked表示点击pressed表示按下released表示抬起。通过代码感受一下创建了一些按钮然后设置不同的槽函数(1关联clicked(bool) 2关联pressed 3关联released 4关联toggled)下面运行程序来看看其余的都好理解说说4当点击4时checked从flase状态变为了true所以会触发toggled信号。当继续点击4就没有反应了因为没有涉及到切换当再次点1看到1这里的clicked确实触发了但是4的toggled也触发了因为在排他机制下4从true变成了false。接下来结合上述来写一个复杂一些的例子基于QRadioButton实现一个简单的模拟点餐的功能。先设计一下界面RadioButton默认是排他的一旦界面上需要存在“多组”单旋按钮的时候希望组和组之间不要有影响。Qt中引入了QButtonGroup类可以针对单旋按钮进行分组这样可以确保排他机制是按照每个组来展开的。下面完成一下此时不同组里面就不存在排他了。3.QCheckBox的使用QCheckBox表示复选按钮可以在多个选项中选中任意多个选项。这个按钮的属性也是继承自QAbstractButton主要是checkable和checked。下面来通过代码演示一下先创建一下界面下面来添加槽函数4.QLabel显示类控件就是用来在界面上显示一段内容的。其中最主要用到的控件就是Label标签这是Label或QLabel类的一些重要的属性下面通过代码来演示一下先来演示一下textFormat起到的效果继续编写代码虽然给label设置了不同的文本格式直接运行程序看起来好像没有什么区别因为富文本和markdown里面1并没有包含真正的对应的符号。下面加些东西让它看起来有一些变化这些加的符号如果加在纯文本中只会被当作是纯文本的一部分。下面来用QLabel显示图片把图片资源用qrc机制管理好然后编辑代码先把QLabel设置成和窗口一样大并且把这个QLabel左上角设置到窗口左上角让整个QLabel铺满整个窗口。窗口的大小可以在ui文件中选中窗口后看到可以写死也可以不用写死看到图片并没有真的把整个界面都铺满因为窗口是800*600QLabel也是一样了图片就不一定了。我们可以使用scaledContents来自动拉伸现在填充满了但是我拖动窗口又不满了在上面代码中我们在构造函数进行了setGeometry尺寸设置这个设置相当于是”一次性的“一旦程序运行起来后QLabel的尺寸就固定下来了。窗口发生改变此时QLabel是不会变化的。那怎样让QLabel随着窗口大小时时发生改变呢这里先提前说个知识点叫事件。Qt中表示用户的操作有两类概念一个是信号另一个是事件。当用户拖拽修改窗口大小的时候就会触发resize事件(resizeEvent)。像resize这样的事件是连续变化的把窗口尺寸从A拖拽到B这个过程会触发一系列的resizeEvent。此时就可以借助resizeEvent来完成上述的功能可以让Widget窗口类重写父类(QWidget)的resizeEvent虚函数。在鼠标拖拽窗口尺寸的过程中这个函数就会被反复的调用执行。每次触发一个resizeEvent事件都会调用一次对应的虚函数。由于此处进行了重写调用父类的虚函数就会实际调用到子类的对应的函数。下面来实现我们可以打印来看看发现拖拽的过程中发生了一系列的打印。在实际编程中指定回调函数其实有很多种写法1.设置函数指针。2.设置仿函数(函数对象)。3.设置lambda。4.通过重写父类虚函数(框架种拿着父类的指针调用这个函数如果你创建了子类重写了这个函数此时在多态机制下实际执行的就是子类的函数了)。5.Qt的信号槽。继续来完善代码此时label尺寸始终和窗口大小是一致的。接下来看QLabel的文本对齐自动换行缩进边距相关的属性。先在界面上创建一些label出来在QtCreator右侧属性编辑区能够看到类之间的继承关系。QLabel继承自QFrameQFrame继承自QWidget。QFrame中有个frameShape属性通过修改它可以给label加边框接下来针对这些label来设置它不同的属性下面演示一下QLabel伙伴可以把QLabel和一个像单选框、复选框这样的控件绑定为一个伙伴关系此时可以通过QLabel触发单选框或复选框等选择操作。下面先ui中编辑然后用代码把它们关联起来此时我按ALTB对应的选项就可以被选中。Qt中QLabel中写的文本是可以指定”快捷键此处快捷键的规则功能上要比QPushButton弱很多。是在文本中使用跟上一个字符来表示快捷键比如A通过键盘上的atla来触发这个快捷键。绑定了伙伴关系后通过快捷键就可以选中对应的单选按钮/复选按钮。5.QLCDNumberQLCDNumer是一个专门用来显示数字的控件类似于 老式计算器 的效果。这是它的一些核心属性下面通过代码来感受一下我们写一个倒计时使用QLCDNumber显示一个初始的数值比如10每隔1秒钟数字就-1一直到0就停止了。打开ui文件拖拽LCDNumber接下来完善代码此处的关键点是要实现“每秒钟-1”这个效果怎样去实现这样的效果呢它所体现的问题是周期性的执行某个逻辑。这种周期性执行某个问题我们往往会封装成一个组件供我们使用这类组件我们称为定时器。C标准库中没有定时器的实现Boost里面提供了对应的功能。Qt中也封装了对应的计时器它结合了信号槽的机制。Qt中提供了QTimer类通过这个类创建出来的对象就会产生一个timeout这样的信号可以通过start方法来开启定时器并且参数中设定触发timeout信号的周期。然后结合connect把这个timeout信号绑定到需要的槽函数中就可以执行逻辑修改LCDNumber中的数字了。下面实现此时运行程序就可以看到计时器正常工作了。此时可能会有疑惑这个代码不用QTimer能不能达成类似的效果呢比如构造函数里弄一个循环下面来试一试先创建ui文件接下来完善代码以前c语言中用过Sleep这个Sleep是Windows的api需要包含“Windows.h”头文件才能使用的。这个东西只能在vs中使用qt用mingw gcc windows版本的编辑器无法使用Windows.h。在c11标准库中引入了sleep操作叫做sleep_for我们来使用我们运行后发现程序一直没有出来等了一会程序窗口出来了但是显示的是0这里是Widget的构造函数需要把Widget构造完毕然后才能show执行后续的显示操作因此达不到预期的倒计时的效果。那可不可以在构造函数中另外创建一个线程在新的线程中执行上述循环更新操作我们试一下运行发现提示我们进程终止了。Qt里界面有一个专门的线程去负责维护更新的(主线程)。对于GUI来说内部包含了很多的隐藏状态Qt为了保证修改界面的过程中线程安全是不会受到影响的Qt禁止了其它线程直接修改界面形如上面30行就是在修改界面。因此Qt为了确保线程安全直接要求所有的对界面的修改操作必须在主线程中完成。对于Qt的槽函数来说默认情况下槽函数都是由主线程调用的在槽函数中修改界面是没有任何问题的。在main函数后面有execexec就会使主线程进入“事件循环”exec就会一直循环下去每执行一次循环都会有一些固定的事情要操作比如执行槽函数。6.QProgressBar它表示一个进度条这里有进度条的一些相关的属性接下来通过代码感受一下创建一个进度条让这个进度条的进度跟随事时间增长(可以假设每隔100ms让进度条数值1)。先来编辑ui文件然后切回代码运行程序就可以看到进度条在增长了。这有个细节上述代码中我们把QTimer头文件放在了widget.h中在前面QLCDNumber中头文件包含是放在.cpp中的。我们现在放过来程序还是可以正常运行的此时可以看到一个问题我们虽然在widget.h中用到了QTimer但是确没在.h中包含QTimer头文件。那为啥这个代码编译不会出错为啥此处的QTimer就不会提示‘找不到定义’之类的错误上述问题其实是通过Qt内部提供的一个特殊技巧来实现的在Qt中有一个专门的头文件这个头文件中包含了Qt中所有类的“前置声明”这个头文件一般不会直接接触到但是包含其它的Qt的头文件都会间接的包含到这个头文件。因此前面没有报错是由于在WIdget类的前面已经提供了QTimer类的声明的话此时就可以在Widget中使用QTimer的指针/引用类型的成员。这个是C中的特殊技巧在Qt中被使用到了。后续如果真正使用QTimer(包括创建实例使用里面的成员)仍然需要包含QTimer的头文件(包含了QTimer的详细的类的定义)。上面的代码中进度条是绿色的那能不能改成是一个红色的进度条。重新创建编辑uiQProgressBar::chunk是个选择器就是咱们设置的样式到底要针对哪个控件。chunk就是这个部分就是把背景色改为了红色。变红色后发现数字跑到左上角了(可能是Qt的bug)。虽然不能放在最初的位置了但是可以自己调整一下7.QCalendarWidget它表示一个日历这是一些相关的属性这是它提供的一些信号下面通过一个简单的例子来用一下日历的使用方式。在ui中编辑我们用日历里提供的信号通过这个信号表示选中的内容是哪一个。继续完善此时点击哪一个日期label里就会显示哪一个日期。8.QLineEdit下面开始介绍一些输入类的控件和前面显示类的控件不同显示类的控件只是负责显示输入类控件既能显示又能让用户去输入一些内容。使用最广泛的输入类控件是QLIneEdit表示单行输入框可以输入一段文本不能换行。这是它的一些核心属性这个text属性不仅仅可以通过代码来设置用户在输入框中进行编辑也会影响到text值的变化。这还有一些关于输入框的信号下面通过代码来感受一下让用户输入我们指定的个人信息然后通过提交按钮把上述内容给统一获取到。先来编辑ui文件下面切回代码下面测试一下上述例子中我们使用InputMask属性来验证用户输入的是否是一个正确的电话号码但是inputMask功能比较有限只能进行简单的验证。若想进行更复杂的验证就需要使用”正则表达式“。它是一个计算机中的通用概念和具体的编程语言无关。正则表达式本质上就是一个带有特殊字符的字符串特殊字符用来表示另一个字符串的特征此时就可以借助正则表达式来描述出一些具有一定特点的字符串基于这些特点就可以完成字符串的匹配。这是正则表达式的语法正则表达式语法 | Microsoft Learnhttps://learn.microsoft.com/zh-cn/previous-versions/visualstudio/visual-studio-2008/ae5bf541(vvs.90)?redirectedfromMSDN这是正则表达式测试的在线工具正则表达式语法测试工具 - 在线工具 (buyaocha.com)https://regextester.buyaocha.com/用到的时候查就可以了。接下来通过正则表达式来对输入框输入手机号验证一下先编辑ui此处的规则是输入框要检查输入的内容是否是合法的手机号码如果是则按钮设为可用状态如果不是则设为禁用状态。下面编辑代码这是一个简单的验证手机号码的正则表达式。^表示以xxx开头^1意思就是以1开头\d表示数字为了在c字符串中使用需要写作\\d{10}表示前面的内容重复出现10次\d数字要重复出现10次$表示结尾。继续写现在只是注册了一个验证器具体验证器怎么使用还需要写其它代码来完成。验证输入框的内容是否合法只要输入框的内容发生改变了验证操作就应该被执行。继续写下面验证一下下面再基于LineEdit写一个例子来完成验证两次输入的密码是否一致。先来编辑ui文件下面来完善代码然后使用textEdited信号来触发对于两个输入框内容的判定上述代码完成了响应的要求但是形参我们没有用到所以会有警告。如果想消除警告可以这样这个写法是类型转换这个写法对于代码的实际逻辑是没有任何影响的同时可以”骗过“编译器警告就没有了。再实现一个功能针对密码可以切换”显示密码“状态。先来编辑ui文件下面来编辑代码下面运行一下9.QTextEditQTextEdit表示多行输入框在Qt中表示多行输入框有QTextEdit和QPlainTextEdit。QPlainTextEdit只能表示纯文本QTextEdit不仅能表示纯文本还可以表示html和markdown。继续说QTextEdit这是它所包含的一些核心属性这有一些相关的信号下面通过代码来感受一下我们在输入框中输入内容然后显示到label上面去。先编辑一下ui文件下面来写代码(转textChanged信号)下面再写例子显示QTextEdit这几个信号(ui文件中放一个输入框)。下面演示10.QComboBox它表示下拉框这是它的一些核心属性这是一些核心方法还有一些信号下面通过代码来感受一下模拟一下麦当劳点餐。先编辑一下ui文件下面编辑代码此时就有条目了。现在编辑一下提交按钮以上就是下拉框基本的使用方式。上面用代码的方式编辑的下拉框中的内容也可以使用图形化的方式来进行编辑再写一个例子下拉框里的内容很多时候不是代码中写死的而是通过文件/网络加载数据得到的。下面演示一下通过文件加载先编辑一下ui文件然后选中从文件中加载老婆的信息。创建一个文件并填好一些信息继续编辑代码此时就有了一个动态改变的效果。11.QSpinBox它表示微调框大概是这样的输入框输入框可以输入整数或小数右边有按钮可以通过按钮对里面的数值进行微调。这是QSpinBox的一些相关的属性还有一些相关的信号下面通过代码来感受一下还是以点餐为例现在不光可以选则食物还可以通过微调框来选择具体的数量。先编辑ui文件下面编写代码现在细节是初始情况下微调框是0在这个场景下不合适太多也不科学我们再改进一下12.QDateTimeEdit这些控件是基于微调框弄出来的输入时间或日期的控件使用QDateEdit作为日期微调框使用QTimeEdit作为时间的微调框使用QDateTime作为时间日期的微调框。这几个控件用法非常相似下面以QDateTimeEdit为例进行介绍。这是关于QDateTimeEdit的核心属性最后一个是使用的时间规范。这有一些核心信号下面通过代码感受一下写一个时间计算器计算两个时间中间的间隔是多少天/多少小时。先来编辑ui文件下面来编写代码上面的代码其实还有些小问题发现此时的结果是1天07小时1号17点到2号的0点中间是隔了7个小时不是1天07小时。我们计算天数用的daysTo函数文档中查有两个当前我们用的是第二个点进去看看描述说明计算的是之间有多少午夜。因此这样改进一下如果当前得到的小时数不足24由于次数是整数除法就会舍弃掉小数点后的内容。下面再次运行一下13.QDial它表示一个旋钮这是它的一些基本的核心属性这是它的相关信号下面通过代码来感受一下先编辑一下ui界面我们要完成通过旋钮来控制窗口的不透明度(opacity)。我们先来一些设置下面来编写(用valueChanged信号)那能否借助这个旋钮实现调整系统声音的功能呢可以但是没那么容易。调整系统声音是Windows系统的apiQt没有封装这个api此时就非常麻烦(系统原生的api使用起来也很麻烦)。此时就需要通过vs写一个动态库把系统的原生api封装一下再让Qt的程序来调用动态库。14.QSlider这个控件表示滑动条QSlider和QDial都是继承自QAbstractSlider因此用法上基本相同。这是它的相关属性这是它的核心信号下面通过代码演示一下我们在窗口上放两个滑动条一个是水平方向一个垂直。滑动这两个滑动条就可以调整窗口的大小。先编辑一下ui文件(往右变大往下变大)下面编写代码接下来给两个滑动条设置槽函数接下来再来写一个例子写一个自定义快捷键通过快捷键来操作滑动条。滑动条本身可以通过方向键和pageUp和pageDown操作但是咱们也可以自定义。下面编辑ui文件下面编写代码此时就可以用我们的快捷键来增加和减小数值了。15.多元素控件介绍多元素意思是控价里面包含了很多的元素元素可能指的是字符串也可能是更加复杂的字符串等。这有一些具体的多元素控件前两个表示列表这样的结构中间两个表示表格这样的结构后面两个表示树形结构。那上面xxWidget和xxView是什么区别呢概括来说xxView是更底层的实现xxWidget是基于xxView封装而来的。这样理解16.QListWidget它表示一个能够纵向显示的列表这是它所涉及到的一些属性这是它的一些核心方法说说第一个列表中的每个元素/每一项就称为是一个item更具体的说通过QListWidgetItem类表示的。再说说第五个此处的row参数就表示插入完毕之后新的元素在第几行把新元素插入到第几行之前。这还涉及到一些关键的信号下面通过代码来感受一下可以输入框输入内容新增进去也可以选中条目删除。先编辑一下ui文件下面编写代码先给列表添加一些初始元素。这是另一种添加方式也可以通过图形化的方式来添加选中listWidget右键点编辑项目如果这里初始内容是固定的此时通过哪种方式来初始化都可以如果这里的内容是不固定的要通过读取文件/读取网络来构造数据就需要通过代码的方式来添加了。切回代码方式继续此时这样一个功能就完成了。还可以再加一些功能17.QTableWidget它表示一个表格控件一个表格中包含若干行每一行又包含若干列。这是一些相关的核心方法这是一些核心信号表示每一个单元格可以用QTableWidgetItem这是它的一些方法下面通过代码来感受一下先编辑ui文件下面编写代码图像化界面初始化运行先看看如果当前表格中的数据是固定的完全就可以通过图形化的方式来进行编辑但实际开发中很多时候数据是从文件/网络中来的此时通过图形化编辑就不合适了。下面切回代码继续此时已经有了数据。下面完善一下按钮18.QTreeWidget它表示一个树形控件里面的每个元素都是一个QTreeWidgetItem每个QTreeWidgetItem可以包含多个文本和图标, 每个文本/图标为一个列。这是它所提供的相关的方法QTreeWidget控件虽然是树形结构但是这个树形结构没有体现出根节点它是从根结点的下一层子节点开始计算的这里的树画橘色框那里表示的是顶层结点。针对顶层结点来说这里也是一个类似于“List”这样的结构。这是关于QTreeWidgetItem核心属性这是QTreeWidgetItem的核心方法通过上述知道顶层结点的相关操作都是在QTreeWidget这个类上面的更往后的子节点都是借助QTreeWidgetItem提供的方法来操作的。下面通过代码感受一下先编辑一下ui界面可以通过图形化界面初始化数据最上面的1相当于树根结点这就是通过界面的方式来获取。下面通过代码重新来操作此时添加好了顶层结点。继续完善初始化好了后下面实现一下按钮的相关功能上述的几个控件相关的操作数据都是在内存中保存的无论界面上做任何操作重新运行程序之前的数据就都没有了。如果要想让数据能够重新启动也不丢失就需要编写更多的代码把内存存储的数据获取到写入到文件中并且在下次运行的时候从文件加载数据。19.QGroupBox接下来介绍的控件是容器类控件容器类控件指的是控件里面可以容纳其它的一些控件。多元素控件包含的内容是一个一个的自定义好的“item”对象。容器类控件包含的内容是前面已经学过的各种控件比如QPushButton、QLineEdit、QLabel等。容器类控件这里主要介绍两个一个是QGroupBox表示分组框还有一个是QTableWidget表示标签页。先来介绍QGroupBox它大概是这个样子可以把其它的各种控件放到GroupBox种这些内部的控件的父元素就不是this了而是这个GroupBox。它存在的意义是为了让界面看起来更好看一些。当一个界面比较复杂的时候包含了很多控件的时候分组框就可以把具有关联关系的控件组织到一起。这是它的核心属性下面通过代码演示一下写一下麦当劳点餐先编辑一下ui下面运行一下可以看到通过分组框把这里的控件进行了分组可以让界面看起来更加清晰有条理。再看看属性看到勾选后只剩上面一根线了。20.QTableWidget它可以起到一个带有标签页的效果然后可以在标签页里放一些其它的widget。先通过代码看一下标签页大概是什么样子可以看到有标签页的效果每一个标签页里面都是可以放一些具体的控件的。比如可以放不同的label。如果想有更多的标签页或删除可以这样现在看看它所提供的属性这还有一些核心信号下面通过代码感受一下创建一个程序带有一个TableWidget作为标签页。提供两个按钮分别创建新的标签页关闭当前选中的标签页。当切换标签页的时候也能感知到变化。先来编辑ui文件下面编写下面完善按钮再完善感知到标签页切换操作21.QVBoxLayout下面介绍一下Qt中的布局管理器之前把控件放到界面上都是靠“手动”的方式来布局的。但是这种手动调整的方式是不科学的1.手动布局的方式非常复杂而且不精确。2.无法对窗口大小进行自适应。因此Qt引入了很多布局管理器垂直布局水平布局网格布局表单布局。下面介绍一下垂直布局Qt中使用QVBoxLayout表示垂直的布局管理器。这有一些核心属性下面通过代码感受一下但是每个widget中只能设置一个布局管理器往往可能不够下面看看如何在widget中弄出多个布局管理器出来。先编辑ui文件看到存在两组Layout每个Layout包含了多个按钮。但此时调整窗口大小看到里面的内容并不会像前面那样随之发生变化。如果在代码中创建layout其实是只创建了一个layout。如果在QtDesigner中创建layout先创建了一个Widget然后再这个新的Widget中添加了一个layout。刚才是先拖了layout过去然后再往layout中托其它控件也可以先托其它控件后给这些控件套上layout这个按钮表示把选中的旋若干控件外头套上一个垂直布局的layout。22.QHBoxLayout这个表示水平布局管理器这是它的相关属性下面通过代码演示一下现在界面上就把这三个按钮水平方向排列放到布局管理器中了。布局管理器之间也能进行嵌套。我们用一个垂直布局管理器把两个按钮添加进去然后下面弄一个水平的布局管理器把水平布局管理器添加到垂直布局管理器中再往水平布局管理器里面添加两个按钮。下面实现23.QGridLayout前面使用水平布局垂直布局可以起到一种二维化布局的方式但是全依赖这个东西写代码会比较的麻烦。于是这里说说网格布局可以更方便的实现M*N这样的一个效果。这是它的一些属性下面看看网格布局最基本的使用情况这样完成了最基本的网格布局。这里是排列成了2*2的效果也可以修改坐标起到更加灵活的布局效果这个写法就相当于水平布局了此时这里的行数只要是一样的即可不一定非是0。下面再改变一下代码这个写法相当于垂直布局了。再比如这种写法是每个按钮独占一行或一列。若把上述的3,3改为100,100运行后发现是一样的。说明即使设置成100也不会在中间搞出很大的空白空间。此处的行数和列数只是用来决定空间之间的相对位置。接下来介绍一下布局管理器中拉伸系数的问题我们刚才创建的布局管理器这里的控件尺寸都是均等的。当我们需要创建出尺寸不同的控件的时候就可以通过拉伸系数来设置。拉伸系数就相当于设置控件之间尺寸的比列。下面结合代码来演示一下此时按钮按照2行3列的方式排列好了。上述按钮看上去宽度都是一样的接下来设置拉伸系数这个拉伸系数中有个特殊的取值0如果拉伸系数设为0意思是不参与拉伸此时按钮的宽度是固定值。此时调整窗口大小可以看到第一列的窗口尺寸大小并没有改变。接下来重新创建项目看看垂直方向的拉伸该怎么设置现在把按钮按照3行2列的方式排列进去了。下面设置拉伸系数运行发现代码看上去没什么效果。上述代码直接设置拉伸系数发现是无效的。这里之所以没有拉伸是因为SizePolicy起到的影响。这个是QWidget的属性它有这些属性由于按钮垂直方向默认没有拉伸开(水平方向默认是拉伸的)因此垂直方向不会受到拉伸系数的影响了。要想让垂直方向的拉伸系数生效就需要让按钮先能够拉伸展开看到垂直拉伸打开后变化非常大比起之前。有了这个前提现在再设置拉伸系数发现拉伸可以生效了此时高度尺寸是1:1:2来展开的。24.QFormLayout下面介绍一下Qt中的表单布局它本质上属于网格布局的一种特殊情况。下面结合代码来演示一下还可以添加按钮进去25.QSpacerItem接下来介绍一下Qt中的Spacer它是搭配布局管理器使用的工具它表示一段空白。因为布局管理器里默认情况下控件和控件之间挨着比较紧如果期望控件之间有一个比较明显的间隔就可以使用这样1一个类。这是它的一些属性接下来通过代码演示一下使用情况我们想让水平方向上有两个按钮然后两个按钮不是仅仅挨在一起的而是中间有空白现在是水平方向排列但是按钮间非常近。下面来用空白ui中也是可以添加空白的它们都是SpaceItem。26.总结上述的每个控件都是可扩展的。每个控件都是Qt内置的一个类咱们在代码中都可以基于这个类继承出你自定义的子类。在这个自定义的子类中又可以添加很多的属性和方法实现你自己的需求场景还可以在子类中把多个控件组合到一起。