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