前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >PyQt中布局管理

PyQt中布局管理

作者头像
小飞侠xp
发布2018-12-24 14:10:51
1.7K0
发布2018-12-24 14:10:51
举报
文章被收录于专栏:书山有路勤为径

布局管理是GUI编程中的一个重要方面。布局管理是一种如何在应用窗口上放置组件的一种方法。我们可以通过两种基础方式来管理布局。我们可以使用绝对定位和布局类。使用布局管理器管理布局是组织窗口小部件的首选方式

绝对定位

程序员以像素为单位指定每个小部件的位置和大小。当您使用绝对定位时,我们必须了解以下限制:

  • 如果我们调整窗口大小,窗口小部件的大小和位置不会改变
  • 在不同平台上,应用的外观可能不同
  • 更改应用程序中的字体可能会破坏布局
  • 如果我们决定改变我们的布局,我们必须完全重做我们的布局,这是繁琐和耗时的
代码语言:javascript
复制
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
This example shows three labels on a window
using absolute positioning. 
"""
import sys
from PyQt5.QtWidgets import QWidget, QLabel, QApplication
class Example(QWidget):    
    def __init__(self):
        super().__init__()        
        self.initUI()             
    def initUI(self):       
        lbl1 = QLabel('Zetcode', self)
        lbl1.move(15, 10)
        lbl2 = QLabel('tutorials', self)
        lbl2.move(35, 40)        
        lbl3 = QLabel('for programmers', self)
        lbl3.move(55, 70)                
        self.setGeometry(300, 300, 250, 150)
        self.setWindowTitle('Absolute')    
        self.show()        
if __name__ == '__main__':    
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

我们使用move()方法来定位我们的组件。在上面的例子中我们使用move()方法定位了一些标签组件。在使用move()方法时,我们给move()方法提供了x和y坐标作为参数。move()使用的坐标系统是从左上角开始计算的。x值从左到右增长。y值从上到下增长。

代码语言:javascript
复制
lbl1 = QLabel('Zetcode', self)
lbl1.move(15, 10)

将标签组件定位在x=15,y=10的坐标位置

盒子布局

QHBoxLayout和BoxLayout是水平和垂直排列小部件的基本布局类。 如果我们需要把两个按钮放在程序的右下角,创建这样的布局,我们只需要一个水平布局加一个垂直布局的盒子就可以了。再用弹性布局增加一点间隙。

代码语言:javascript
复制
#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode PyQt5 tutorial 

In this example, we position two push
buttons in the bottom-right corner 
of the window. 

Author: Jan Bodnar
Website: zetcode.com 
Last edited: August 2017
"""

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


class Example(QWidget):

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

        self.initUI()


    def initUI(self):

        okButton = QPushButton("OK")
        cancelButton = QPushButton("Cancel")

        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, 300, 150)
        self.setWindowTitle('Buttons')    
        self.show()


if __name__ == '__main__':

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

上面的例子完成了在应用的右下角放了两个按钮的需求。当改变窗口大小的时候,它们能依然保持在相对的位置。我们同时使用了QHBoxLayoutQVBoxLayout

  1. 创建了两个按钮。
代码语言:javascript
复制
okButton = QPushButton("OK")
cancelButton = QPushButton("Cancel")
  1. 我们创建一个水平框布局并添加一个拉伸因子和两个按钮。拉伸在两个按钮之前增加了可伸缩的空间。这会将它们推到窗口的右侧。
代码语言:javascript
复制
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
hbox.addWidget(cancelButton)
  1. 水平布局放置在垂直布局中。垂直框中的拉伸系数会将带有按钮的水平框推到窗口的底部。
代码语言:javascript
复制
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
  1. 最后,我们设置窗口的主要布局。
代码语言:javascript
复制
self.setLayout(vbox)

微信截图_20181206111338.png

网格布局

QGridLayout是最通用的布局类。它将空间划分为行和列。

代码语言:javascript
复制
#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode PyQt5 tutorial 

In this example, we create a skeleton
of a calculator using a QGridLayout.

author: Jan Bodnar
website: zetcode.com 
last edited: January 2015
"""

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


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('Calculator')
        self.show()


if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())
  1. 这个例子里,我们创建了栅格化的按钮。实例化QGridLayout类,并且把这个类设为应用窗口的布局。
代码语言:javascript
复制
grid = QGridLayout()
self.setLayout(grid)
  1. 这是我们将要使用的按钮的名称。
代码语言:javascript
复制
names = ['Cls', 'Bck', '', 'Close',
        '7', '8', '9', '/',
        '4', '5', '6', '*',
        '1', '2', '3', '-',
        '0', '.', '=', '+']
  1. 创建按钮位置列表。
代码语言:javascript
复制
positions = [(i,j) for i in range(5) for j in range(4)]
  1. 创建按钮,并使用addWidget()方法把按钮放到布局里面。
代码语言:javascript
复制
for position, name in zip(positions, names):

    if name == '':
        continue
    button = QPushButton(name)
    grid.addWidget(button, *position)
提交反馈信息的布局

在网格中,组件可以跨多列或多行。在这个例子中,我们对它进行一下说明。

代码语言:javascript
复制
#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode PyQt5 tutorial 

In this example, we create a more 
complicated window layout using
the QGridLayout manager. 

Author: Jan Bodnar
Website: zetcode.com 
Last edited: August 2017
"""

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

class Example(QWidget):

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

        self.initUI()


    def initUI(self):

        title = QLabel('Title')
        author = QLabel('Author')
        review = QLabel('Review')

        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('Review')    
        self.show()


if __name__ == '__main__':

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

我们创建了包含三个标签,两个单行编辑框和一个文本编辑框组件的窗口。布局使用了QGridLayout布局

  1. 我们创建了一个网格布局并且设置了组件之间的间距。
代码语言:javascript
复制
grid = QGridLayout()
grid.setSpacing(10)
  1. 如果我们向网格布局中增加一个组件,我们可以提供组件的跨行和跨列参数。在这个例子中,我们让reviewEdit组件跨了5行。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.12.06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 绝对定位
  • 盒子布局
  • 网格布局
  • 提交反馈信息的布局
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档