首页 > 其他分享 >如何理解垂直布局、水平布局和表单布局?

如何理解垂直布局、水平布局和表单布局?

时间:2022-12-09 00:12:31浏览次数:39  
标签:__ str 布局 表单 垂直 vlayout QPushButton addWidget

 整体布局等于垂直布局或水平布局:

  • 若将两个垂直布局添加进水平布局窗口内,则窗口整体呈水平布局展示

  • 若将两个水平布局添加进垂直布局窗口内,则窗口整体呈垂直布局展示

1、垂直布局

  • 设置窗口大小
  • 四个按钮
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton

class winfom(QWidget):
    def __init__(self):
        super(winfom,self).__init__()
        self.setWindowTitle("垂直布局管理")
        self.resize(500,350)

         # 垂直布局
        vlayout = QVBoxLayout()
        vlayout.addWidget(QPushButton(str(1)))
        vlayout.addWidget(QPushButton(str(2)))
        vlayout.addWidget(QPushButton(str(3)))
        vlayout.addWidget(QPushButton(str(4)))
        self.setLayout(vlayout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    form = winfom()
    form.show()
    sys.exit(app.exec_())
  • 垂直布局示例图

2、水平布局

  • QHBoxLayout
  • 设置窗口大小
  • 四个按钮即可
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton

class winfom(QWidget):
    def __init__(self):
        super(winfom,self).__init__()
        self.setWindowTitle("水平布局管理")
        self.resize(150,100)

         # 水平布局
        vlayout = QHBoxLayout()
        vlayout.addWidget(QPushButton(str(1)))
        vlayout.addWidget(QPushButton(str(2)))
        vlayout.addWidget(QPushButton(str(3)))
        vlayout.addWidget(QPushButton(str(4)))
        self.setLayout(vlayout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    form = winfom()
    form.show()
    sys.exit(app.exec_())
  • 水平布局示例图

  • 在四个按钮上方,若加上vlayout.addStretch(0)
  • 当你拉大窗口时,按钮会整体停留在窗口右侧
        vlayout.addStretch(0)
        vlayout.addWidget(QPushButton(str(1)))
        vlayout.addWidget(QPushButton(str(2)))
        vlayout.addWidget(QPushButton(str(3)))
        vlayout.addWidget(QPushButton(str(4)))

  • 在四个按钮下方,若加上vlayout.addStretch(0)
  • 当你拉大窗口时,按钮会整体停留在窗口左侧
        vlayout.addWidget(QPushButton(str(1)))
        vlayout.addWidget(QPushButton(str(2)))
        vlayout.addWidget(QPushButton(str(3)))
        vlayout.addWidget(QPushButton(str(4)))
        vlayout.addStretch(0)

  • 垂直布局和水平布局的差别也就是一个字母的差别:垂直布局QVBoxLayout(V)和水平布局QHBoxLayout(H)的差别。

 3、表单布局

  • 设置表单对象
  • 设置部件标签1、2、3
  • 设置部件输入框1、2、3
  • 添加相应部件标签和输入框即可。
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QFormLayout, QLabel, QLineEdit

class winfom(QWidget):
    def __init__(self):
        super(winfom,self).__init__()
        self.setWindowTitle("表单布局")
        self.resize(280,100)

         # 表单布局
        formlayout = QFormLayout()
        lable1 = QLabel("标签1")
        lineEdit1 = QLineEdit()
        lable2 = QLabel("标签2")
        lineEdit2 = QLineEdit()
        lable3 = QLabel("标签3")
        lineEdit3 = QLineEdit()
        formlayout.addRow(lable1,lineEdit1)
        formlayout.addRow(lable2,lineEdit2)
        formlayout.addRow(lable3,lineEdit3)
        self.setLayout(formlayout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    form = winfom()
    form.show()
    sys.exit(app.exec_())
  • 表单布局示例图

标签:__,str,布局,表单,垂直,vlayout,QPushButton,addWidget
From: https://www.cnblogs.com/LoLong/p/16967790.html

相关文章

  • Vue动态增添表单并赋予增删上下移动等操作
    Vue动态增添表单并赋予增删上下移动等操作开发需求:前端设计一个表单,依据题目类型,判断是否需要添加内容,若需添加,则可以动态增删、上下移动调整顺序等开发难点:需根据实际逻......
  • CSS Grid布局
    Grid局部,当该容器的元素,需要成行成列的排列时,适合使用Grid有两种设置:.grid-container { display: grid;}.grid-container { display: inline-grid;}   ......
  • 一个简单的瀑布流布局的实现
    (实现了瀑布流功能,但是不能添加头部和底部视图,如项目中有添加头部或底部视图的需求,请自行修改)实现思路collectionView能实现各中吊炸天的布局,其精髓就在于UICollectionVie......
  • CSS Flex布局
    Flex布局单行多元素,可以考虑Flex布局,好处是居中、对齐比较好控制容器布局,决定使用Flex,横向(rowrow-reverse)还是纵向排列(columncolumn-reverse),是否折行(flex-wrap,......
  • 如何使用 qt network 库模拟表单文件上传?
    #include<QCoreApplication>#include<QImage>intmain(intargc,char*argv[]){QCoreApplicationa(argc,argv);//[1]准备图像二进制数据QImage......
  • 钉钉开发之根据流程码获取流程表单schema
    一、环境:1、钉钉oa审批流程中,已有“出差审批”流程,流程码为:PROC-48E207E5-EB8B-457C-BC3D-86CD5E5A50B32、开发环境:IDEA二、代码1、获取tokenpackagesfccl.api;imp......
  • element-ui 表单组件的简单封装
    背景在管理系统中我们需要经常使用表单组件来收集用户的一些数据,如果按照官网的示例一个个表单项去填写不仅代码会变得很长而且麻烦,所以我们有必要去对组件进行再次的封装......
  • JS操作form表单倒计时自动提交
     只需要注意表单的id<formid="frm"action="http://www.baidu.com">考试还剩余<divid="time"></div></form><script>vartimes=45*60;//剩余时间,单位......
  • 010.绘制后台首页UI布局
    1.index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>慕课网办公OA系统</title><!--引入样式--><linkrel="style......
  • 关于JQuery validate表单校验插件对级联下拉框的校验问题
         今天在使用JQueryvalidate表单校验插件时,遇见了一个非常诡异的问题了。在此记录一下:     问题描述:               ......