学习C++、QT---34（使用QT库实现串口调试助手01：解决串口调试助手的UI）

🌟 嗨，我是热爱嵌入式的涛涛同学！

每日一言

        别害怕改变，走出舒适圈才能遇见更好的自己。

串口调试助手项目

好的现在我们来学习串口调试助手的项目，我们依旧是项目引领学习

好的我们最后就是要做成一个类似我们市面上的串口调试助手，我这边拿安信可的来对比一下

是不是很像，所以说我们要好好的学习一下，左边是我们自己做的，右边的是安信可官方的串口助手

项目的UI

首先呢我们先解决UI的问题

首先呢我们照猫画虎，我们会发现这样的框框上面还有字的，这个效果是怎么做出来的，那么这个呢就是用到了

Group Box 这个控件，其实这个空间的除了可以实现上方的这个效果之外，最主要的功能其实是分组，Group Box 可以将相关的控件（如按钮、文本框、复选框等）组织在一起，通过一个边框和标题来区分不同的功能区域。这有助于用户更清晰地理解界面结构， 让界面看起来更有条理，提高界面的可读性和易用性。

，好的那么我们接下去

我们在里面放上一个textEdit，这个就是我们串口助手的白色框部分，大家也很容易理解的吧，然后有一个操作，我们现在不是文本框

没有像这样那么的和我们的控件等比例铺满嘛，看起来不是很协和，那么此时我要介绍一个布局，栅格布局这个可以有奇效

怎么个奇效

我们点击这个group box进行栅格布局，会发生这样的奇效

为什么？

因为:

1. 布局行为

• 自动排列：栅格布局会将GroupBox视为一个普通的控件，并根据栅格的行列规则自动调整其位置和大小。
• 响应窗口大小变化：当窗口大小改变时，栅格布局会自动调整GroupBox的大小和位置，以保持布局的整齐和美观。

2. 空间分配

• 均匀分配：栅格布局会根据窗口的大小和其他控件的分布，均匀地分配空间给每个控件（包括GroupBox）。

现在我们来完成这个，根本就不难，我们主要是认识一下没有用过的控件

就是这个两个控件，一个是单选框check box，还有一个这个是比较长的这种的文字输入框叫做Line Edit

然后我们将它们组装起来，也就是用水平布局啦，那个第三个是按钮，讲ui真的太多时间了，但是真的很简单

然后我们用这个ctrl加上鼠标拖我们已经有的组合好的组件这边代表

就可以实现复制了，

随后我们会发现那么多很乱怎么办，怎么对齐，那么我们就选择全部进行垂直布局，马上就焕然一新了

再介绍一下这个中间的这个控件

这个控件叫做Spin Box

好的那么现在我们，已经将我们这个串口助手所需要新学的UI控件学完了之后我们开始根据我这张已经做好的图进行复现

复现完之后是这样的

我这边进行了框框，我是想表达他们他们各为一组，所以我每一组也用了栅格布局，非强制的只是省了很多排版美观点事。

目的是和这个一样的分组，而且每一组我都有用栅格布局，省了很多自己排版事情

，但是有些需要自己微调，好了，大概的UI那我们就做完了（如上图）

然后我再提一点，我们的名字一定要取好，到时候好认，毕竟到后面我们都是要进行在代码上面展现的，就像我这样