QT学习串口编程之串口软件的UI设计

学会了如何使用QT进行界面设计之后,接下来让我们来进入第二阶段的学习——串口编程吧。

首先我们需要对串口软件的UI界面进行仿写。
QT学习串口编程之串口软件的UI设计_第1张图片
首先存在一个接收方和发送方,接收框主要是串口软件接收设备发来的数据,发送框则是串口软件给设备发送数据。

QT学习串口编程之串口软件的UI设计_第2张图片
我们在控件编辑器中找到接收框的控件。
QT学习串口编程之串口软件的UI设计_第3张图片
接下来就是对小窗体的设计。
QT学习串口编程之串口软件的UI设计_第4张图片
接下来是标签设计。
QT学习串口编程之串口软件的UI设计_第5张图片
然后就是发送框的选中。
QT学习串口编程之串口软件的UI设计_第6张图片
接下来是对按钮控件的选中。
QT学习串口编程之串口软件的UI设计_第7张图片
下面就是我们的广告位的设计。
QT学习串口编程之串口软件的UI设计_第8张图片
编译后我们发现接收框和发送框都可以写数据,这显然是不符合逻辑的,所以我们需要对接收框做写限制,具体操作如下图
QT学习串口编程之串口软件的UI设计_第9张图片
接下来就是对其进行布局。
QT学习串口编程之串口软件的UI设计_第10张图片
紧接着便是对小窗体添加数据。
QT学习串口编程之串口软件的UI设计_第11张图片

QT学习串口编程之串口软件的UI设计_第12张图片
这样就完成了对小窗体数据的添加操作啦!
QT学习串口编程之串口软件的UI设计_第13张图片
上图是对默认数据的选择,1表示1下标位置的数据为默认值,2表示2下标位置的数据为默认值,为3.

下面我们开始对串口号进行代码操作。
首先我们需要在.pro文件中包含serialport模块,不然在编写的时候会无法识别。
QT学习串口编程之串口软件的UI设计_第14张图片
接下来我们来看一下代码。
QT学习串口编程之串口软件的UI设计_第15张图片
现在我来解释一下这些代码是什么意思:
QT学习串口编程之串口软件的UI设计_第16张图片
QT学习串口编程之串口软件的UI设计_第17张图片

我这里之所以没有显示出串口号是因为我使用的是笔记本进行操作的,使用笔记本的话需要连接一个串口设备或者设置虚拟串口后才会显示,台式机的话就会正常显示出自身的串口号COM1。

你可能感兴趣的:(QT学习,qt,ui,学习)