从零开始实现自己的串口调试助手(1) - ui界面搭建

UI 界面搭建

ui界面整体演示

ui对象拆分

更多的细节就不方便展开了，下面有提示完成ui设计的提示

在创建工程前 记得把编码改为utf-8

ui设计技巧:

ctrl + 鼠标左键实现拖动实现复制粘贴

groupBox ： 带标题的文本框

栅格布局 --  只有一个控件的时候会铺满

勾选框 -- checkBox

有上下箭头切换的边框 Spin Box

lable  + ComboBox  -- 组成我们下面的串口参数

ui布局技巧:

我们在布局的时候可以先粗略一点，然后添加完所需控件我们在选中整体进行 (格栅)布局
我们的布局尽量先维护在一起，类似C++；类，方便维护，把所有子布局整理好之后在合并到父布局，最后选中格栅布局一键整理，再微调即可

左上角实现图标和标题:

添加这行代码到Widget的构造函数中  实现串口空间大小的变化

 this->setLayout(ui->gridLayoutGlobal);

this->setLayout(ui->gridLayoutGlobal);这行代码的意思是：将当前窗口或控件的布局设置为ui->gridLayoutGlobal所指向的网格布局。这样，该窗口或控件中的所有子控件都将根据这个网格布局进行排列，gridLayoutGlobal这是最大的一个布局，我们这样就实现了，空间随着窗口大小变化而变化

设置三个窗口所占的比例，为了，分配最小的最右边窗口能显示完整，还需要调节最小宽度

我这里设置320，刚刚合适

现在实现的效果就是拖动变大到他的最小宽度320之后，这个窗口就会安装6:5:1的比例缩放

在那之前，我们维持他的最小宽度

//如下图，这三个窗口的比例就是: 6: 5: 1