美文网首页程序员首页投稿(暂停使用,暂停投稿)
PyQt5学习笔记(九):水平、垂直布局

PyQt5学习笔记(九):水平、垂直布局

作者: 链球选手 | 来源:发表于2016-05-06 15:39 被阅读3724次

对于一个GUI应用,界面的布局管理是很重要的一部分,简单地说,就是我们如何放置之前学习的QLabelQWidget这些部件。在Qt里,你可以通过自己设置绝对位置来实现,当然更值得推荐的方式是通过Qt的layout类,现在我们先学习水平和垂直布局。

这里会用到两个基本的布局类,QVBoxLayoutQHBoxLayout,V代表Vertical,H代表Horizontal,分别控制竖向和横向的布局。

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

class Exp(QWidget):

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

        self.initUI()

    def initUI(self):

        okbutton = QPushButton('Ok')
        cancelbutton = QPushButton('Cancel')

        hbox = QHBoxLayout()
        hbox.addStretch()
        hbox.addWidget(okbutton)
        hbox.addWidget(cancelbutton)

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

        self.setLayout(vbox)

        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle('Layout Management')
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Exp()
    sys.exit(app.exec_())

通过以上的代码,我们将两个按钮放置在了窗口的右下角,即使我们调整窗口的大小,他们相对于窗口的位置还是右下角,这相对于设置绝对位置而言更具优势和灵活性。

hbox = QHBoxLayout()
hbox.addStretch()
hbox.addWidget(okbutton)
hbox.addWidget(cancelbutton)

以上的代码,我们先创建了一个水平布局,然后把okbutton,cancelbutton放置在这个布局里面,这里还添加了一个addStrtch(),它的作用是在布局中添加空白,并把非空白内容顶到布局的尾部(对于QHBoxLayout()而言是右边,对于QVBoxLayout()而言是底部),这也是按钮始终能够在窗口右下角的原因。

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

这里创建了一个竖向的布局,把之前创建的水平向布局作为竖向布局的一个部件(在这里也是唯一的部件)添加进来,同样用到了addStretch()

self.setLayout(vbox)

我们之前创建了两个布局,但这两个布局不是平等的,而是包含关系,水平布局只是竖向布局的一个部件,所以竖向布局是这个界面的总布局,我们通过setLayout(bbox)来应用竖向布局。

界面布局

相关文章

  • PyQt5学习笔记(九):水平、垂直布局

    对于一个GUI应用,界面的布局管理是很重要的一部分,简单地说,就是我们如何放置之前学习的QLabel、QWidge...

  • CSS水平居中布局、垂直居中布局、垂直水平居中布局

    本章将介绍父子元素宽高不定的CSS水平居中布局、垂直居中布局、垂直水平居中布局。学习如何写出布局不是内容关键,解决...

  • Autolayout布局九宫格

    Autolayout纯代码布局九宫格 单行固定间隔排列: 水平布局设置 垂直布局设置 固定宽度设置: 水平布局 垂...

  • [2020-08-10]css3中的常用几种布局

    div的水平垂直居中 flex布局,使用display: flex实现水平垂直居中 grid布局 使用grid布局...

  • 居中布局

    水平居中 垂直居中 垂直水平居中 已知元素的宽高的居中布局 定位居中布局 盒模型居中布局 图片的垂直水平居中(利用...

  • CSS布局与水平垂直居中

    左右布局 左中右布局 水平居中 垂直居中 水平垂直居中 左右布局 float实现左右布局 子元素设置float: ...

  • css滚动

    布局:水平滚动,垂直滚动 垂直滚动: 水平滚动: css样式:

  • css滚动

    布局:水平滚动,垂直滚动 垂直滚动: 水平滚动: css样式:

  • android布局

    线性布局* 布局方向,水平|垂直 android:orientation="vertical(垂直)|horizo...

  • 页面架构

    布局解决方案 水平居中布局 垂直居中布局 水平垂直都居中的布局 多列布局 多列等分布局 多列等高布局 在多列布局的...

网友评论

    本文标题: PyQt5学习笔记(九):水平、垂直布局

    本文链接:https://www.haomeiwen.com/subject/yqjjrttx.html