九十、Python的GUI系列 | QtDesigner进行界面设计

@Author:Runsen
@Date:2020/7/11

人生最重要的不是所站的位置,而是内心所朝的方向。只要我在每篇博文中写得自己体会,修炼身心;在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰难,奋勇前行,不忘初心,砥砺前行,人生定会有所收获,不留遗憾 (作者:Runsen )

作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件。导致翘课严重,专业排名中下。.在大学60%的时间,都在CSDN。决定今天比昨天要更加努力。

前面文章,点击下面链接

我的Python教程,不断整理,反复学习

在很早之前就学过了PyQt5 ,我决定在更新了几篇PyQt5 。之前写的PyQt5 博客基本覆盖于此。这篇是九十篇、Python的GUI系列 | QtDesigner进行界面设计。离收官还有十篇。

文章目录

  • ui设计
    • 布局
      • 绝对布局
      • 水平盒布局
      • 垂直盒布局
      • 栅格布局
      • 表单布局
    • 菜单栏 Menu
    • 工具栏

ui设计

如果只关注功能,做ui不难。难的是如何将ui做得漂亮,这不只是技术问题,还考验布局、配色、美工等一系列专业知识。在尝试了下美化控件的一些操作后,我果断放弃了,技术是个无底洞,还是关注最直接的需求吧
九十、Python的GUI系列 | QtDesigner进行界面设计_第1张图片

布局

PyQt5的界面布局主要有两种方法:绝对定位和局部类。在PyQt5中有四种布局方式:水平布局、垂直布局、网格布局、表单布局。还有两种布局方法:addLayout和addWidget,其中addLayout用于在布局中插入子布局,addWidget用于在布局中插入控件。

  • 垂直布局:控件默认按照从上到下的顺序进行纵向添加。
  • 水平布局:控件默认按照从左到右的顺序进行横向添加。
  • 栅格布局:将窗口分为若干行(row)和列(column)。
  • 表单布局:控件以两列的形式布局在窗口中,左边为标签,右边为输入控件。

绝对布局

九十、Python的GUI系列 | QtDesigner进行界面设计_第2张图片

使用QWidget的move、setGeometry等方法,直接设置其在窗口中的位置。

下面就是一个绝对布局的代码

import sys
from PyQt5.QtWidgets import *
class AbsoluteLayout(QWidget) :
    def __init__(self):
        super(AbsoluteLayout,self).__init__()
        self.setWindowTitle("绝对布局")
        self.label1 = QLabel('欢迎',self)
        self.label1.move(15,20)
        self.label2 = QLabel('学习',self)
        self.label2.move(35,40)
        self.label3 = QLabel('PyQt5',self)
        self.label3.move(55,80)
if __name__ == '__main__':
    app = QApplication(sys.argv)
    main = AbsoluteLayout()
    main.show()
    sys.exit(app.exec_())

水平盒布局

九十、Python的GUI系列 | QtDesigner进行界面设计_第3张图片
下面就是一个 水平盒布局的代码

import sys
from PyQt5.QtWidgets import *
class HBoxLayout(QWidget) :
    def __init__(self):
        super(HBoxLayout,self).__init__()
        self.setWindowTitle("水平盒布局")
        hlayout = QHBoxLayout()
        hlayout.addWidget(QPushButton('按钮1'))
        hlayout.addWidget(QPushButton('按钮2'))
        hlayout.addWidget(QPushButton('按钮3'))
        hlayout.setSpacing(40)
        self.setLayout(hlayout)
if __name__ == '__main__':
    app = QApplication(sys.argv)
    main = HBoxLayout()
    main.show()
    sys.exit(app.exec_())

垂直盒布局

九十、Python的GUI系列 | QtDesigner进行界面设计_第4张图片

下面就是一个垂直盒布局的代码

import sys
from PyQt5.QtWidgets import *
class VBoxLayout(QWidget) :
    def __init__(self):
        super(VBoxLayout,self).__init__()
        self.setWindowTitle("垂直盒布局")
        layout = QVBoxLayout()
        layout.addWidget(QPushButton('按钮1'))
        layout.addWidget(QPushButton('按钮2'))
        layout.addWidget(QPushButton('按钮3'))
        self.setLayout(layout)
if __name__ == '__main__':
    app = QApplication(sys.argv)
    main = VBoxLayout()
    main.show()
    sys.exit(app.exec_())

上面的QHBoxLayout 水平布局和QVBoxLayout 垂直布局都是盒子布局

代码方面

  • stretch(伸缩量),只适用于QBoxLayout布局方式,控件和窗口会随着伸缩量的变大而增加
  • alignment,指定对齐方式
  • addLayout(self, QLayout, stretch=0)
  • 在窗口的右边添加布局,使用stretch(伸缩量)进行伸缩,默认为0
  • addWidget(self, QWidget, stretch, Qt.Alignment) 在布局中添加控件。

栅格布局

九十、Python的GUI系列 | QtDesigner进行界面设计_第5张图片

下面就是一个栅格布局的代码

import sys
from PyQt5.QtWidgets import *
class Calc(QWidget) :
    def __init__(self):
        super(Calc,self).__init__()
        self.setWindowTitle("栅格布局")

        grid = QGridLayout()
        self.setLayout(grid)
        names = ['Cls','Back','','Close',
                 '7','8','9','/',
                 '4','5','6','*',
                 '1','2','3','-',
                 '0','.','=','+']
        positions = [(i,j) for i in range(5) for j in range(4)]
        print(positions)
        for position,name in zip(positions,names):
            if name == '':
                continue
            button = QPushButton(name)
            grid.addWidget(button,*position)
if __name__ == '__main__':
    app = QApplication(sys.argv)
    main = Calc()
    main.show()
    sys.exit(app.exec_())

九十、Python的GUI系列 | QtDesigner进行界面设计_第6张图片

QGridLayout 栅格布局

代码方法:

  • addLayout(QLayout, row, column, Qt.Alignment),在栅格布局的行(row)、列(column)位置添加新的布局,并设置对齐方式
  • addLayout(QLayout, row, column, rowSpan, columnSpan, Qt.Alignment),在栅格布局中新的布局,从行(row)、列(column)开始,占据rowSpan行、columnSpan列
  • addWidget(QWidget, row, column, Qt.Alignment),在栅格布局的行(row)、列(column)中添加窗口控件,
  • addWidget(QWidget, fromRow, fromColumn, rowSpan, columnSpan, Qt.Alignment),在栅格布局中添加窗口控件,从行(row)、列(column)开始,占据rowSpan行、columnSpan列
  • setRowStretch(row, stretch),在行(row)处添加伸缩量
  • setColumnStretch(column, stretch),在列(column)处添加伸缩量

表单布局

九十、Python的GUI系列 | QtDesigner进行界面设计_第7张图片

下面就是一个表单布局的代码

import sys
from PyQt5.QtWidgets import *
class GridForm(QWidget) :
    def __init__(self):
        super(GridForm,self).__init__()
        self.setWindowTitle("栅格布局:表单设计")
        titleLabel = QLabel('标题')
        authorLabel = QLabel('作者')
        contentLabel = QLabel('内容')
        titleEdit = QLineEdit()
        authorEdit = QLineEdit()
        contentEdit = QTextEdit()
        grid = QGridLayout()
        grid.setSpacing(10)
        grid.addWidget(titleLabel,1,0)
        grid.addWidget(titleEdit,1,1)
        grid.addWidget(authorLabel,2,0)
        grid.addWidget(authorEdit,2,1)
        grid.addWidget(contentLabel,3,0)
        grid.addWidget(contentEdit,3,1,5,1)
        self.setLayout(grid)
        self.resize(350,300)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    main = GridForm()
    main.show()
    sys.exit(app.exec_())

九十、Python的GUI系列 | QtDesigner进行界面设计_第8张图片

其他布局对齐方式:

参数 描述
QtCore.Qt.AlignLeft 水平方向居左对齐
QtCore.Qt.AlignRight 水平方向居右对齐
QtCore.Qt.AlignCenter 水平方向居中对齐
QtCore.Qt.AlignJustify 水平方向两端对齐
QtCore.Qt.AlignTop 垂直方向靠上对齐
QtCore.Qt.AlignBottom 垂直方向靠下对齐
QtCore.Qt.AlignVCenter 垂直方向居中对齐

菜单栏 Menu

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *
class Menu(QMainWindow) :
    def __init__(self):
        super(Menu,self).__init__()
        bar = self.menuBar()  # 获取菜单栏
        file = bar.addMenu("文件")
        file.addAction("新建")
        save = QAction("保存",self)
        save.setShortcut("Ctrl + S")
        file.addAction(save)
        save.triggered.connect(self.process)
        edit = bar.addMenu("Edit")
        edit.addAction("copy")
        edit.addAction("paste")
        quit = QAction("退出",self)
        file.addAction(quit)
    def process(self):
        print(self.sender().text())
if __name__ == '__main__':
    app = QApplication(sys.argv)
    main = Menu()
    main.show()
    sys.exit(app.exec_())

九十、Python的GUI系列 | QtDesigner进行界面设计_第9张图片

工具栏

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *
class Toolbar(QMainWindow) :
    def __init__(self):
        super(Toolbar,self).__init__()
        self.initUI()
    def initUI(self):
        self.setWindowTitle("工具栏例子")
        self.resize(300,200)
        tb1 = self.addToolBar("File")
        new = QAction(QIcon('./images/new.png'),"new",self)
        tb1.addAction(new)
        open = QAction(QIcon('./images/open.png'),"open",self)
        tb1.addAction(open)
        save = QAction(QIcon('./images/save.png'),"save",self)
        tb1.addAction(save)
        tb2 = self.addToolBar("File1")
        new1 = QAction(QIcon('./images/new.png'),"新建",self)
        tb2.addAction(new1)
        tb2.setToolButtonStyle(Qt.ToolButtonTextUnderIcon)
        tb1.actionTriggered.connect(self.toolbtnpressed)
        tb2.actionTriggered.connect(self.toolbtnpressed)
    def toolbtnpressed(self,a):
        print("按下的工具栏按钮是",a.text())
if __name__ == '__main__':
    app = QApplication(sys.argv)
    main = Toolbar()
    main.show()
    sys.exit(app.exec_())

九十、Python的GUI系列 | QtDesigner进行界面设计_第10张图片

你可能感兴趣的:(零基础学Python,python,gui,pyqt)