PyQt5学习入门-3-Qt Designer布局
摘要:
这篇文章是关于如何利用Qt Desinger来进行布局的。
1.布局的目的
我们为什么要进行布局?如果进行了上篇文章的实验的读者,可以尝试把窗口拉大,我们会发现,所有按键的大小都不会有任何的改变。
这显然是不美观的,而且不符合预期的效果。我们希望按键大小能够随着窗口的大小变化而变化,这就需要进行布局。
2.布局的类型
Qt Desinger中有几种布局的方式。
第一种:垂直布局![PyQt5学习入门-3-Qt Designer布局 PyQt5学习入门-3-Qt Designer布局](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzU0NC81NjYyNTNjMGRhYTkyZDUxNzVjODY3Mjg1NzU1MTY4MC5wbmc=)
垂直布局组件之间垂直摆放
垂直布局组件之间垂直摆放
第二种:水平布局
水平布局即组件之间水平摆放
第三种:网格布局
网格布局就是组件之间以网格的形式进行布局。
这里需要注意的是:水平布局和垂直布局都和原始组件摆放的位置没有任何的关系,但是网格布局和原来摆放的位置有关系。
例如,未布局前按键的摆放如下:
进行水平布局、垂直布局、网格布局后分别如下:
但是若未布局前按键摆放如下:
进行水平布局、垂直布局、网格布局后分别如下:
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个按键会有一个红色的框框包住,如下图:
同样,对:
![PyQt5学习入门-3-Qt Designer布局 PyQt5学习入门-3-Qt Designer布局](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQ2OC83OWEwYmFhOTI3OWQ3Y2JkNDFiYjdkMDlkNDRjNWY1NC5wbmc=)
![PyQt5学习入门-3-Qt Designer布局 PyQt5学习入门-3-Qt Designer布局](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI0OC8xZGZmOWM2Y2JlOGIwYWM2MTAwNDkyMDhlYjI3MjQ2OC5wbmc=)
![PyQt5学习入门-3-Qt Designer布局 PyQt5学习入门-3-Qt Designer布局](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg1NC8yZWM4YTYyZDMxNDVhYzUzMGFkYTEzOWE1NDQzMGI1Ni5wbmc=)
![PyQt5学习入门-3-Qt Designer布局 PyQt5学习入门-3-Qt Designer布局](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM5OC9hYjQxYmJlZTljNmRhMGZjNDMyNzI3NzBlMTJjOTU5Ni5wbmc=)
![PyQt5学习入门-3-Qt Designer布局 PyQt5学习入门-3-Qt Designer布局](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzg2OS9jNTBiZjE2NTRkNGI2MmE2NmU5NzlkMzVlZDI4NDNmZC5wbmc=)
![PyQt5学习入门-3-Qt Designer布局 PyQt5学习入门-3-Qt Designer布局](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM4My8yMzY0NDlkYjFkMzU1NjNiNGQ0ZDQzOGY0NGE0Y2JmZi5wbmc=)
![PyQt5学习入门-3-Qt Designer布局 PyQt5学习入门-3-Qt Designer布局](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzkyMi9iYTlhNTU4YmRkZGI0NzcxYWRiYmJjZWE5ODNhZTdiYS5wbmc=)
![PyQt5学习入门-3-Qt Designer布局 PyQt5学习入门-3-Qt Designer布局](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzIzLzYwMjhhZjllMWQxNGI3N2E5ZWU4OWNlMzg5Mzg1YjY3LnBuZw==)
![PyQt5学习入门-3-Qt Designer布局 PyQt5学习入门-3-Qt Designer布局](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM5OC9hNTIzYzkxYWVlNDAyZGY3Nzk2MTY1MDhkNWNjYmI3ZS5wbmc=)
![PyQt5学习入门-3-Qt Designer布局 PyQt5学习入门-3-Qt Designer布局](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE3NS9kMzdkNmUzZDFjODU5NDg5YmQ5NGJhYzc5NmIzNTc5Zi5wbmc=)
按键1 按键2 按键3 按键- 为水平布局
按键4 按键5 按键6 按键* 为水平布局
按键7 按键8 按键9 按键/ 为水平布局
按键Clear 按键= 为水平布局,后有:
最后将选中所有(Ctrl+A)。
水平1与水平2与水平3与水平4与水平5与文本输出框为垂直布局
水平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的值即可。