【QT界面设计学习篇】qt快速开发技巧

[1 概要](#1 概要)
[2 设计ui界面](#2 设计ui界面)
- [2.1 基于.ui文件先行设计ui界面](#2.1 基于.ui文件先行设计ui界面)
- [2.2 基于.ui设计的界面框架进行更深层次设计](#2.2 基于.ui设计的界面框架进行更深层次设计)
- - [2.2.1 添加事件函数](#2.2.1 添加事件函数)
  - [2.2.2 添加额外组件](#2.2.2 添加额外组件)
  - [2.2.3 添加QSS样式表](#2.2.3 添加QSS样式表)
[3 效果展示](#3 效果展示)
[4 总结](#4 总结)

1 概要

使用qt快速开发我们想要的图形界面。QT中比较普遍的设计方式是混合开发模式，即在.ui文件中先进行整体框架的设计，之后再基于设计的框架在代码中增加我们需要的功能或较为复杂的子组件。此处我们采用混合开发模式对我们的界面进行开发。

我们将会分为4各部分讲述：

（1）创建工程

（2）添加事件函数

（3）添加额外组件

（4）添加CSS样式表

1.新建工程

这里有两种：

**QWidget：**一块空白的画布或一个通用的容器。它是所有用户界面对象的基类。

**QMainWindow：**一个已经为你装好了画架、调色板架、工具栏挂钩和状态栏的"高级画布"。它是为创建典型主应用程序窗口而设计的。

我们此处选择QWidget即可。

此步为选择你的工具链，该工具链在安装qt的时候会同时安装。

对于更深层次的设计涉及三个方面：(1) 添加控件的事件函数 (2) 代码中增加.ui文件中不方便设计的组件 (3) 设置组件的样式表

基于设计好的图形界面可以添加组件对应的事件函数，对于按钮等事件函数添的

方法主要有四个：

(1) .ui界面中直接添加槽函数

这样的好处是.ui会直接生成相应的事件函数

(2) 在代码中主动绑定：

其中on_pushButton_clicked函数是我们自定义名称的需要绑定的函数。

(3) 通过Lanbda表达式(更加轻洁式地定义事件函数)

着重关注最后一个参数:

$this, customMessage$ , 这是 Lambda 表达式的捕获列表，它决定了哪些外部变量可以在 Lambda 内部使用：

(4) 还有个Q_PROPERTY属性（了解即可）

其功能为：当属性值改变时，自动通知所有依赖该属性的 UI 元素更新，明确声明类的公共接口，提高代码可读性和维护性。

其组成如下：

类型 (Type): QString
指定属性的数据类型，这里是 QString
属性名称 (Property Name): alsData, psData, irData(可使用(1)中的QString对象)
属性的标识符，将在 QML 和元对象系统中使用
读取函数 (READ accessor): alsData, psData, irData
指定用于读取属性值的成员函数，这些函数需要在类中实现
通知信号 (NOTIFY signal): ap3216cDataChanged
当属性值改变时发出的信号，所有三个属性共享同一个通知信号

具体结构设计如下：

比如我的.ui界面已经设置好，但是我想在最上层增加一个幕布效果的组件(即半透明的白色布)，则这个时候更适合在代码中增加，因为基于layout的设置，主界面已成型，不再容易修改布局。

增加例子如下：

本章节讲述了如何快速设计qt文件，工程链接如下：https://download.csdn.net/download/qq_54050349/92121110