PyQt5每天必学之布局管理


Posted in Python onApril 19, 2018

在GUI编程中有一个不容忽视的部分,那就是布局管理。布局管理掌控着我们的控件在应用程序窗口如何摆放。布局管理可以通过两种方式来完成。我们可以使用绝对定位或布局类两种方法控制程序窗口中的控件位置。

绝对定位

每个控件按程序员指定的位置放置。当您使用绝对定位,我们要了解以下限制:

  • 如果我们调整窗口的大小控件的大小和位置保持不变
  • 在不同平台上应用程序看起来可能会不同
  • 更改字体可能会破坏应用程序的布局
  • 如果决定改变布局,我们必须每个控件彻底的加以修改,这是繁琐和耗时的

下面的例子就是控件的绝对坐标定位方式。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
PyQt5 教程

这个例子显示了在窗口中使用绝对定位的三个标签。

作者:我的世界你曾经来过
博客:http://blog.csdn.net/weiaitaowang
最后编辑:2016年7月31日
"""

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel

class Example(QWidget):

 def __init__(self):
 super().__init__()

 self.initUI()

 def initUI(self):

 lbl1 = QLabel('我的世界你曾经来过', self)
 lbl1.move(15, 10)

 lbl2 = QLabel('CSND博客', self)
 lbl2.move(35, 40)

 lbl3 = QLabel('程序员', self)
 lbl3.move(55, 70)

 self.setGeometry(300, 300, 250, 150)
 self.setWindowTitle('绝对定位') 
 self.show()

if __name__ == '__main__':

 app = QApplication(sys.argv)
 ex = Example()
 sys.exit(app.exec_())

在我们的例子中使用的都是标签(Label)。我们通过提供x和y坐标值定位它们。坐标系的原点是控件的左上角。 x值增长是由左到右。 y值增长是从上到下。

lbl1 = QLabel('我的世界你曾经来过', self)
lbl1.move(15, 10)

标签控件被放置在 x=15 和 y=10。

程序执行后

PyQt5每天必学之布局管理

Box layout盒子布局

布局管理使用布局类的方式更加灵活、实用。它是将一个控件放在窗口中的首选方式。QHBoxLayout和QVBoxLayout分别是水平和垂直对齐控件的基本布局类。

试想一下,我们希望把两个按钮在程序的右下角。要创建这样一个布局,我们可以使用一横一纵两个框。要创造必要的空余空间,我们将增加一个拉伸因子(stretch factor)。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
PyQt5 教程

在这个例子中,我们在窗口的右下角放置两个按钮。

作者:我的世界你曾经来过
博客:http://blog.csdn.net/weiaitaowang
最后编辑:2016年7月31日
"""

import sys
from PyQt5.QtWidgets import (QApplication, QWidget,
 QPushButton, QVBoxLayout, QHBoxLayout)

class Example(QWidget):

 def __init__(self):
 super().__init__()

 self.initUI()

 def initUI(self):

 okButton = QPushButton('确定')
 cancelButton = QPushButton('取消')

 hbox = QHBoxLayout()
 hbox.addStretch(1)
 hbox.addWidget(okButton)
 hbox.addWidget(cancelButton)

 vbox = QVBoxLayout()
 vbox.addStretch(1)
 vbox.addLayout(hbox)

 self.setLayout(vbox)

 self.setGeometry(300, 300, 350, 150)
 self.setWindowTitle('Box布局') 
 self.show()

if __name__ == '__main__':

 app = QApplication(sys.argv)
 ex = Example()
 sys.exit(app.exec_())

该示例将两个按钮放在窗口的右下角。当我们调整应用程序窗口的大小时,他们是固定在右下角的。我们同时使用HBoxLayout 和QVBoxLayout布局。

okButton = QPushButton('确定')
 cancelButton = QPushButton('取消')

这里我们创建了两个按钮。

hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
hbox.addWidget(cancelButton)

我们创建了一个水平box布局,增加拉伸因子(addStretch),添加(addWidget)两个按钮。在添加两个按钮之前增加了一个拉伸因子,这会将两个按钮推到窗口右侧。

vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)

要得到我们想要的布局,还需将横向布局放入垂直的布局中。在垂直框上的拉伸因子会将水平框包括里面的控件推至窗口的底部。

self.setLayout(vbox)

最后,我们设置窗口的主布局。

程序执行后

PyQt5每天必学之布局管理

QGridLayout网格布局

最经常使用的布局类是网格布局。这种布局将该空间分成行和列。要创建一个网格布局,我们使用QGridLayout 的类。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
PyQt5 教程

在这个例子中,我们使用网格布局创建一个计算器的框架。

作者:我的世界你曾经来过
博客:http://blog.csdn.net/weiaitaowang
最后编辑:2016年7月31日
"""

import sys
from PyQt5.QtWidgets import (QApplication, QWidget,
QPushButton, QGridLayout)

class Example(QWidget):

 def __init__(self):
 super().__init__()

 self.initUI()

 def initUI(self):

 grid = QGridLayout() 
 self.setLayout(grid)

 names = ['Cls', 'Bck', '', 'Close', 
 '7', '8', '9', '/',
 '4', '5', '6', '*',
 '1', '2', '3', '-',
 '0', '.', '=', '+',]

 positions = [(i, j) for i in range(5) for j in range(4)]

 for position, name in zip(positions, names):

  if name == '':
  continue
  button = QPushButton(name)
  grid.addWidget(button, *position)

 self.move(300, 150)
 self.setWindowTitle('计算器') 
 self.show()

if __name__ == '__main__':

 app = QApplication(sys.argv)
 ex = Example()
 sys.exit(app.exec_())

在我们的例子中,我们将创建的按钮控件放在网格中。

grid = QGridLayout() 
self.setLayout(grid)

实例化 QGridLayout 并设置应用程序窗口的布局。

names = ['Cls', 'Bck', '', 'Close', 
 '7', '8', '9', '/',
 '4', '5', '6', '*',
 '1', '2', '3', '-',
 '0', '.', '=', '+',]

这是以后要用到的按钮标签。

positions = [(i, j) for i in range(5) for j in range(4)]

x我们创建了网格位置的列表。

for position, name in zip(positions, names):

  if name == '':
  continue
  button = QPushButton(name)
  grid.addWidget(button, *position)

创建按钮并添加(addWidget)到布局中。

程序执行后

PyQt5每天必学之布局管理

扩展网格布局

窗口中的控件可以跨越网格中的多个列或行。在下面的例子中,我们说明这一点。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
PyQt5 教程

在这个例子中,我们使用GridLayout的跨行创建了一个更复杂的窗口布局。

作者:我的世界你曾经来过
博客:http://blog.csdn.net/weiaitaowang
最后编辑:2016年7月31日
"""

import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QLabel, 
QTextEdit, QLineEdit, QGridLayout)

class Example(QWidget):

 def __init__(self):
 super().__init__()

 self.initUI()

 def initUI(self):

 title = QLabel('标题')
 author = QLabel('作者')
 review = QLabel('评论')

 titleEdit = QLineEdit()
 authorEdit = QLineEdit()
 reviewEdit = QTextEdit()

 grid =QGridLayout()
 grid.setSpacing(10)

 grid.addWidget(title, 1, 0)
 grid.addWidget(titleEdit, 1, 1)

 grid.addWidget(author, 2, 0)
 grid.addWidget(authorEdit, 2, 1)

 grid.addWidget(review, 3, 0)
 grid.addWidget(reviewEdit, 3, 1, 5, 1)

 self.setLayout(grid)

 self.setGeometry(300, 300, 350, 300)
 self.setWindowTitle('评论') 
 self.show()

if __name__ == '__main__':

 app = QApplication(sys.argv)
 ex = Example()
 sys.exit(app.exec_())

我们创建的程序中包含三个标签,两个单行文本输入框和一个文本编辑控件,使用QGridLayout布局。

grid =QGridLayout()
grid.setSpacing(10)

实例化网格布局和并设置设置间距。

grid.addWidget(reviewEdit, 3, 1, 5, 1)

添加一个控件到网格布局中,我们可以为这个控件使用行跨度或列跨度。在我们的例子中,我们要求reviewEdit控件跨度5行。

程序执行后

PyQt5每天必学之布局管理

在PyQt5教程的这一部分专门介绍了布局管理。后面将会介绍PyQt5的事件相关内容。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python下函数参数的传递(参数带星号的说明)
Sep 19 Python
Python操作Access数据库基本步骤分析
Sep 19 Python
详解python之简单主机批量管理工具
Jan 27 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
Jan 08 Python
对python3新增的byte类型详解
Dec 04 Python
使用Python自动化破解自定义字体混淆信息的方法实例
Feb 13 Python
利用python实现周期财务统计可视化
Aug 25 Python
Python搭建代理IP池实现接口设置与整体调度
Oct 27 Python
python+OpenCV实现车牌号码识别
Nov 08 Python
Django media static外部访问Django中的图片设置教程
Apr 07 Python
python3中calendar返回某一时间点实例讲解
Nov 18 Python
上手简单,功能强大的Python爬虫框架——feapder
Apr 27 Python
PyQt5每天必学之创建窗口居中效果
Apr 19 #Python
PyQt5每天必学之弹出消息框
Apr 19 #Python
详谈python3中用for循环删除列表中元素的坑
Apr 19 #Python
PyQt5每天必学之关闭窗口
Apr 19 #Python
python实现在IDLE中输入多行的方法
Apr 19 #Python
python贪婪匹配以及多行匹配的实例讲解
Apr 19 #Python
PyQt5每天必学之工具提示功能
Apr 19 #Python
You might like
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
python中的set实现不重复的排序原理
2018/01/24 Python
python去除扩展名的实例讲解
2018/04/23 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
python实现倒计时小工具
2019/07/29 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
家长会学生演讲稿
2014/04/26 职场文书
安全保证书范文
2014/04/29 职场文书
化工见习报告范文
2014/10/31 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2014年稽查工作总结
2014/12/20 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
赞助商致辞
2015/07/30 职场文书
导游词之神仙居景区
2019/11/15 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis