捐助郴维网
感谢您对郴维网的支持,你的支持将是郴维网持续发展的动力!
二维码
×
当前位置:郴维网 >Pyqt5 > 正文
23 2018.04

(PYQt5和QT designer)PyQt5学习入门-3-Qt Designer布局

点击次数:3386 更新时间:2018/4/23 21:18:05  【打印此页

摘要:

这篇文章是关于如何利用Qt Desinger来进行布局的。

 

 

1.布局的目的

我们为什么要进行布局?如果进行了上篇文章的实验的读者,可以尝试把窗口拉大,我们会发现,所有按键的大小都不会有任何的改变。

这显然是不美观的,而且不符合预期的效果。我们希望按键大小能够随着窗口的大小变化而变化,这就需要进行布局。

 

2.布局的类型

Qt Desinger中有几种布局的方式。

 

第一种:垂直布局
垂直布局组件之间垂直摆放

 

第二种:水平布局

水平布局即组件之间水平摆放

 

第三种:网格布局

 

网格布局就是组件之间以网格的形式进行布局。

 

这里需要注意的是:水平布局和垂直布局都和原始组件摆放的位置没有任何的关系,但是网格布局和原来摆放的位置有关系。


 

例如,未布局前按键的摆放如下:

 

进行水平布局、垂直布局、网格布局后分别如下:

 

但是若未布局前按键摆放如下:


进行水平布局、垂直布局、网格布局后分别如下:

 

3.布局的步骤

了解了基本的布局类型后就可以开始布局了。

需要注意的是布局时要先规划好组件之间的布局关系。

以上篇文章中的这个图为例:

 

步骤1

布局前,先构思布局的布局方案,假设我的方案如下:

每一行的按键为水平布局,行于行之间的是垂直布局:

按键0 按键. 按键+ 为水平布局,水平布局后整体标记为水平1

按键1 按键2 按键3 按键- 也是水平布局,水平布局后整体标记为水平2

按键4 按键5 按键6 按键* 为水平布局,水平布局后整体标记为水平3

按键7 按键8 按键9 按键/ 为水平布局,水平布局后整体标记为水平4

按键Clear 按键= 为水平布局,水平布局后整体标记为水平5

 

水平1与水平2与水平3与水平4与水平5与文本输出框为垂直布局

 

 

确定好方案之后就可以进行操作了。

步骤2

选择按键0 按键. 按键+,如下图:

 

当然,也可以在对象查找器中找到这3个按键,然后用Ctrl+鼠标左键选择这3个按键。

 

步骤3

选择组件后,点击工具的

即下图中的红色框框

 

点击后3个按键会有一个红色的框框包住,如下图:

同样,对:

按键1 按键2 按键3 按键- 为水平布局

按键4 按键5 按键6 按键* 为水平布局

按键7 按键8 按键9 按键/ 为水平布局

按键Clear 按键= 为水平布局,后有:

 

最后将选中所有(Ctrl+A)。
水平1与水平2与水平3与水平4与水平5与文本输出框为垂直布局

后有:

 

步骤4

步骤也就是最后一步,我们需要对窗体进行布局。

在对象查看器中,顶层的对象还是处于未布局的状态:

红色框框中的标志即未布局的意思,选中顶层,然后对其进行布局。

可以进行水平、垂直、网格的任意一种(效果一样)。布局后:

同时,对象查看器变为:

 

至此已经完成了所有布局,按CTRL+R预览的时候拉大窗口,所有组件会随着窗口的变化而变化。

 

 

 

4.布局的属性设置

在上面,我们虽然完成了布局,但是布局后按键的大小并不是我们期望得到到的。

比如,按键0和按键.和按键+希望以一个不同比例的大小来显示。希望得到如下的效果:

 

可以看到,按键0是按键.和按键+的两倍大小,而按键+和按键.一样大。

设置的步骤如下:

 

选择水平1布局(在对象查看器中选择)

然后在对象属性中的 layoutStrethc中设置比例。

数字的排列顺序与界面中按键排序顺序一致。希望得到是2:1:1的效果。回车确定后可以看到按键比例变化了。

 

另外,我们还需要按键0与左边界留出点空格,按键+与右边界留出点空格。我们改变参数layoutLeftMargin和layoutRightMargin。效果如下:

 

 

 

 

 

 

最后,我们希望文本输出框和最上一排按键有一些空间隔开,具体如下效果:

这个时候,我们就需要进行重新布局。

因为我们每次只能调整某一个布局内到上、下、左、右的距离(Margin)以及布局内各组件的比例大小。

 

文本输出框于最上面一排按键(水平5)不在单独的同一个布局中,所以无法改变,如果希望实现上图的效果需要把最上面的一排按键(水平5)与文本输出框放在一个布局内,而且时垂直布局。

 

具体来说就是,将水平5与文本输出设置为垂直布局,其他步骤类似。

 

 

最后在对象查看器中选择垂直1布局。改变layoutSpacing的值即可。

Tips
郴维网为您提供各类专业服务:
软件开发,电脑配件销售,WIFI路由器销售,上门电脑维修,上门安装系统,系统安装,软、硬件安装,电脑除尘清灰,显示器维修,WIFI安装调试,服务器维护,数据恢复,密码破解,网络布线,网络检修,打印机维修,打印机加碳粉,苹果电脑安装系统,苹果电脑安装双系统,监控安装维护,电脑外包,笔记本电脑维修,餐饮、美容行业软件安装 等。。。。。。
点击次数:3386 更新时间:2018/4/23 21:18:05  【打印此页
关键词推荐:郴州电脑城 郴州电脑维修公司 维修电脑公司 郴州软件开发 上门电脑维修 上门安装系统 笔记本电脑维修 郴州打印机维修 打印机加碳粉 电脑安装双系统 苹果电脑双系统 液晶显示器维修 联想笔记本维修 联想笔记本维修电话 戴尔笔记本维修电话 郴州戴尔笔记本维修 戴尔笔记本郴州维修点 华硕笔记本维修点 郴州华硕笔记本维修 郴州笔记本上网维修