QT实现串口调试助手（六）：页面布局

工程源码：https://github.com/zhangfls/QT_UartAnalysisTool

 

上一篇：

INI文件存取串口信息

 

之前没有设置页面布局，当窗口进行放大缩小时，组件的位置还是保持原样，这样很不实用。所以要调整一下页面和组件布局

QT几种常见的布局：


下面就用这些布局调整一下组件的位置排布。

1、添加horizontalLayout水平布局，将页面的组件分成3个部分：

比例设置成1：6：3，当然想调成什么比例随意的

2、对于中间部分的内容，使用gridLayout分成3行2列

比例通过layoutRowStretch和layoutColumStretch设置。

注意默认第一行的串口数据接收框只能放在一个格子里，可以放在左边，然后对着下图红圈的点点击一下向右拉就放大到占用两格了

放大后：




3、相应对左边的组件一些布局也做调整

 

4、这些设置完后，会发现命令列表的部分，随着整个窗口的变宽，命令项并没有变宽，如下图，不合理。

因此我们要对命令列表的初始化的地方做一下修改，添加一段代码：

        ui->tableWidget->horizontalHeader()->setSectionResizeMode(1,QHeaderView::Stretch);
        ui->tableWidget->setColumnWidth(0,30);
        ui->tableWidget->setColumnWidth(1,200);
        ui->tableWidget->setColumnWidth(2,60);

这里设置了命令列表三列的宽度，同时把中间的命令内容那一列设置成了自动延伸。这样，放大后命令列表就可以充满布局了。

 

5、前面的步骤，只是设置了组件之间的相对大小和位置，组件对于窗口的关系没有配置，窗口放大后组件还是会缩成一团。
所以要再做一点配置：对窗口边框的位置右键点击，选择布局，栅格布局，组件布局就会充满整个窗口


这样，放大到全屏，组件和布局也能随之扩展放大了

把组件配置到固定的布局并没有什么特定的要求，所以随心所欲，按照自己喜好配置即可，重要的还是要学会使用QT常用的几种布局类型。

 

下一篇：

QT实现串口调试助手（七）：字体设置面板创建及窗体间传值