系列文章目录

QT串口助手开发1之绘制界面

QT串口助手开发1

• 系列文章目录
• 一、QT串口助手开发
• • 1.1创建QT程序
  • 1.2更改窗口名字
  • 1.3绘制串口助手页面
  • • 1.3.1水平布局
    • 1.3.2垂直布局
  • 1.4绘制打开发送按钮
  • 1.5绘制接收数据文本框和发送数据文本框

一、QT串口助手开发

1.1创建QT程序

首先需要创建QT程序
创建QT程序的时候，记得点下创建页面，基类选择成Dialog
创建好QT程序后，编译ctrl + b ，运行ctrl + r ,弹出窗口

1.2更改窗口名字

更改窗口名字变成串口调试助手，更改windowTitle即可更改成窗口名字

1.3绘制串口助手页面

选中Combo Box 和 Label(标签)，复制成5份
Combo Box的用法

1.3.1水平布局

绘制页面对齐很花费时间，第一行是水平没对齐，使用快捷方法对齐
选中该行，点击该按钮（水平布局），便可以水平对齐了
这个时候着两个控件就变成一个整体了，可以一个整体的拖动

ctrl + r 运行下看下效果，红色框是提醒水平布局的框，不会出现在运行里面

1.3.2垂直布局

ctrl + r运行测试下效果

可以拖拉，达到你想要的效果

ctrl + r 运行下效果

1.4绘制打开发送按钮

需要用到2个push button控件，让其垂直布局，ctrl + r 运行下

这样绘制出来不好看，可以选中这两个控件，ctrl + z 撤销
添加Vertical Spacer(涨位符)，撑开一部分空间，这样可以让两个按钮隔开更宽的距离

ctrl + r运行测试下效果

在添加一个Vertical Spacer在按钮和选择框之间，更加美观

ctrl + r 运行下效果

1.5绘制接收数据文本框和发送数据文本框

Line Edit行文本框，太小了（只有一行），用Text Edit 或者Plain Edit，我两个都是用的Text Edit
两个Text Edit垂直布局，则会一样大

我们需要一个大一个小(接收界面大，发送界面小)
SizePolicy尺寸策略，两个Text Edit垂直伸展系数都相同

里面更改垂直伸展系统再垂直伸展的时候，就可以实现一大一小的效果了

大概6：1的效果最好看，所以我调制垂直伸展系数为6:1，效果如下

再添加下占位符，更加美观

ctrl + r 运行测试下效果

为了更加美观，再添加一个水平占位符，整体做水平布局，并且鼠标拖拉下达到美观即可

并ctrl + r 运行查看效果，读者觉得不美观也可以自行更改下

END