【PyQt】02-基本UI


前言

学着学着发现王老师还有笔记,真好啊
PyQt


一、首先了解什么是GUI?

GUI,全称为Graphical User Interface,(可以是UI)中文名称为图形用户界面,是指采用图形方式显示的计算机操作用户界面。与早期计算机使用的命令行界面相比,图形界面对于用户来说更为简便易用。

GUI是计算机与其使用者之间的对话接口,是计算机系统的重要组成部分。它一般由窗口、下拉菜单或者对话框等图形化的控件组成。用户通过点击菜单栏、按钮或者弹出对话框的形式来实现与机器的交互。

二、初学程序

1.界面展示

代码

代码如下(示例):

'''
#Author :susocool
#Creattime:2024/1/27
#FileName:第一个PyQt
#Description: 展示一个空的界面
'''
import sys
from PyQt5.QtWidgets import QApplication,QWidget

if __name__ == '__main__':
    app = QApplication(sys.argv) # 创建对象

    w = QWidget()

    # 设置窗口标题
    w.setWindowTitle("第一个PyQt")

    # 显示窗口
    w.show()

    # 程序进行循环等待状况
    app.exec()

运行结果

在这里插入图片描述

2.控件

PyQt中有非常多的功能模块,开发中最常用的功能模块主要有三个:

  • QtCore:包含了核心的非GUI的功能。主要和时间、文件与文件夹、各种数据、流、 URLs、mime类文件、进程与线程一起使用
  • QtGui:包含了窗口系统、事件处理、2D图像、基本绘画、字体和文字类
  • QtWidgets:包含了一些列创建桌面应用的UI元素

PyQt最好不要去看Init文件,因为本质上是调用的C++版本,而不是自己写的,建议去官网看。

PyQt5-按钮控件使用
常见的按钮类包括:QPushButton、QToolButton、QRadioButton、QCheckBox、他们都继承自QAbstractButton类;
QAbstractButton提供的状态:
在这里插入图片描述
提供的信号:
在这里插入图片描述

2.1按钮展示

代码
'''
#Author :susocool
#Creattime:2024/1/27
#FileName:02-按键
#Description: 按键展示
'''
import sys

from PyQt5.QtWidgets import QApplication,QWidget,QPushButton

if __name__ == '__main__':
    app = QApplication(sys.argv)

    w = QWidget()

    w.setWindowTitle("按键展示")

    btn = QPushButton('按钮')
    # 设置窗口的父窗口-相当于背景图层,思路就像图层叠加
    btn.setParent(w)

    w.show()
    app.exec()
运行结果

在这里插入图片描述

2.2 纯文本和输入框

代码
'''
#Author :susocool
#Creattime:2024/1/27
#FileName:03-文本
#Description: 文本框展示
'''
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QLineEdit,QPushButton

if __name__ == '__main__':
    app = QApplication(sys.argv)    # 创建对象

    w = QWidget()

    # 设置窗口标题
    w.setWindowTitle("文本与输入框")

    # 纯文本
    label = QLabel("账号:",w)
    # 位置 大小 x,y,w,h
    label.setGeometry(20,20,30,28)


    # 输入框
    edit = QLineEdit(w)
    edit.setPlaceholderText("请输入账号")
    edit.setGeometry(55,20,200,29)

    btn = QPushButton("注册",w)
    btn.setGeometry(50,80,70,30)

    # 显示窗口
    w.show()
    # 程序进行循环等待状况
    app.exec()

运行结果

在这里插入图片描述

3、重新设置大小 -resize

在这里插入图片描述

4、移动窗口-move()

在这里插入图片描述
注意,不可以超过当前显示器的位置,比如-100之类的,会报错。

5、设置界面在电脑中央

5.1 代码

'''
#Author :susocool
#Creattime:2024/1/27
#FileName:03-文本
#Description: 文本框展示
'''
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QLineEdit,QPushButton,QDesktopWidget

if __name__ == '__main__':
    app = QApplication(sys.argv)    # 创建对象

    w = QWidget()

    # 设置窗口标题
    w.setWindowTitle("文本与输入框")

    # 纯文本
    label = QLabel("账号:",w)
    # 位置 大小 x,y,w,h
    label.setGeometry(20,20,30,28)
    w.resize(800,300)

    # 移动放置屏幕中央
    center_pointer = QDesktopWidget().availableGeometry().center()
    x = center_pointer.x()
    y = center_pointer.y()

    print(w.frameGeometry())
    print(w.frameGeometry().getRect())
    print(type(w.frameGeometry().getRect()))

    # 输入框
    edit = QLineEdit(w)
    edit.setPlaceholderText("请输入账号")
    edit.setGeometry(55,20,200,29)

    btn = QPushButton("注册",w)
    btn.setGeometry(50,80,70,30)

    # 显示窗口
    w.show()
    # 程序进行循环等待状况
    app.exec()

获取窗口的几何信息,并将窗口移动到屏幕的中心位置。

  • center_pointer = QDesktopWidget().availableGeometry().center():这行代码获取了屏幕的可用区域的中心点。QDesktopWidget().availableGeometry()返回一个表示屏幕可用区域的QRect对象,center()方法返回这个区域的中心点。
  • x = center_pointer.x()y = center_pointer.y():这两行代码获取了中心点的x坐标和y坐标。
  • print(w.frameGeometry()):这行代码打印出了窗口的几何信息。frameGeometry()方法返回一个表示窗口(包括其标题栏和边框)的几何形状的QRect对象。
  • print(w.frameGeometry().getRect()):这行代码打印出了窗口的几何信息的矩形表示。getRect()方法返回一个四元组,表示矩形的左上角的x坐标、y坐标、宽度和高度。
  • print(type(w.frameGeometry().getRect())):这行代码打印出了窗口的几何信息的矩形表示的类型。type()函数返回对象的类型。

运行结果

在这里插入图片描述

6、设置窗口图标

阿里巴巴矢量图标库(需要关注公众号之类的注册登入,搜素出来的图标质量也一般,中规中矩的评价是一般)

代码

'''
#Author :susocool
#Creattime:2024/1/30
#FileName:04-设置窗口图标
#Description:
'''
import sys

from PyQt5.QtGui import QIcon
from PyQt5.QtWidgets import QApplication, QWidget

if __name__ == '__main__':
    app = QApplication(sys.argv)

    # 创建一个QWidget
    w = QWidget()
    # 设置标题
    w.setWindowTitle("看看我图标帅吗")
    # 设置图标 QIcon对象必须是一个图片地址
    w.setWindowIcon(QIcon('管理困难.png'))
    # 显示QWidget
    w.show()

    app.exec()

运行结果

在这里插入图片描述
设置还是设置Title的图标,不是很美观,追求美观可以删除掉顶层的Title,里面内容自己设置。

7、布局

在Qt里面布局分为四个大类 :
当然可以,以下是这些类的简单功能描述:

  • QBoxLayout:用于在一行中水平或垂直地排列子部件。
  • QGridLayout:用于将子部件以网格形式排列。
  • QFormLayout:用于管理输入部件及其关联标签的表单。
  • QStackedLayout:用于管理一堆部件,其中一次只能看到一个部件。

👉这里需要注意,Qt写需要变成类,而不是函数,一个Button就是一个对象,为了封装更好,因此换成类。

7.1垂直布局代码

'''
#Author :susocool
#Creattime:2024/1/31
#FileName:05-布局
#Description: 垂直布局
'''
import sys
from PyQt5.QtWidgets import QApplication, QVBoxLayout, QWidget, QPushButton, QGroupBox, QMainWindow
from PyQt5.QtCore import Qt


class MyWindow(QWidget):
    def __init__(self):
        # 切记一定要调用父类的__init__方法,因为它里面有很多对UI空间的初始化操作
        super().__init__()

        # 设置大小
        self.resize(300, 300)
        # 设置标题
        self.setWindowTitle("垂直布局")

        # 垂直布局
        layout = QVBoxLayout()

        # 作用是在布局器中增加一个伸缩量,差不多弹簧,里面的参数表示QSpacerItem的个数,默认值为零
        # 会将你放在layout中的空间压缩成默认的大小
        # 下面的笔试1:1:1:2
        layout.addStretch(1)

        # 按钮1
        btn1 = QPushButton("按钮1")
        # 添加到布局器中
        # layout.addWidget(btn1, Qt.AlignmentFlag.AlignTop)
        layout.addWidget(btn1)

        layout.addStretch(1)

        # 按钮2
        btn2 = QPushButton("按钮2")
        # 添加到布局器
        layout.addWidget(btn2)

        layout.addStretch(1)

        # 按钮3
        btn3 = QPushButton("按钮3")
        # 添加到布局器
        layout.addWidget(btn3)

        layout.addStretch(2)

        self.setLayout(layout)


if __name__ == '__main__':
    app = QApplication(sys.argv)

    # 创建一个QWidget子类
    w = MyWindow()
    w.show()

    app.exec()

运行结果

在这里插入图片描述
伸缩量的解释
在这里插入图片描述

7.2垂直布局代码-QVBoxLayout

'''
#Author :susocool
#Creattime:2024/1/31
#FileName:06-布局plus
#Description: 水平布局和垂直布局
'''
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QGroupBox, QVBoxLayout, QHBoxLayout, QRadioButton


class MyWindow(QWidget):

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

    def init_ui(self):
        # 最外层的垂直布局,包含两部分:爱好和性别
        container = QVBoxLayout()

        # -----创建第1个组,添加多个组件-----
        # hobby 主要是保证他们是一个组。
        hobby_box = QGroupBox("爱好")
        # v_layout 保证三个爱好是垂直摆放
        v_layout = QVBoxLayout()
        btn1 = QRadioButton("抽烟")
        btn2 = QRadioButton("喝酒")
        btn3 = QRadioButton("烫头")
        # 添加到v_layout中
        v_layout.addWidget(btn1)
        v_layout.addWidget(btn2)
        v_layout.addWidget(btn3)
        # 把v_layout添加到hobby_box中
        hobby_box.setLayout(v_layout)

        # -----创建第2个组,添加多个组件-----
        # 性别组
        gender_box = QGroupBox("性别")
        # 性别容器
        h_layout = QHBoxLayout()
        # 性别选项
        btn4 = QRadioButton("男")
        btn5 = QRadioButton("女")
        # 追加到性别容器中
        h_layout.addWidget(btn4)
        h_layout.addWidget(btn5)
        # 添加到 box中
        gender_box.setLayout(h_layout)

        # 把爱好的内容添加到容器中
        container.addWidget(hobby_box)
        # 把性别的内容添加到容器中
        container.addWidget(gender_box)

        # 设置窗口显示的内容是最外层容器
        self.setLayout(container)


if __name__ == '__main__':
    app = QApplication(sys.argv)

    w = MyWindow()
    w.show()

    app.exec()

补充一点Python的知识
这是一个使用PyQt5库的简单的Python类定义。这个类叫做MyWindow,它继承自QWidgetQWidget是所有用户界面对象的基类【父类】。这个类有一个构造函数和一个名为init_ui的方法。

让我们详细看一下这个类的组成部分:

  • __init__(self): 这是类的构造函数,当你创建一个新的MyWindow对象时,它会被自动调用。super().__init__()是调用父类(在这里是QWidget)的构造函数,这是在Python中创建子类的常见做法。
  • self.init_ui(): 这是在构造函数中调用的一个方法。这个方法应该是用来初始化用户界面的。

运行结果

在这里插入图片描述

结构解释
在这里插入图片描述

7.3九宫格布局-QGridLayout

代码
'''
#Author :susocool
#Creattime:2024/1/31
#FileName:07-九宫格布局
#Description: 计算器的布局
'''
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton, QLineEdit, QGridLayout


class MyWindow(QWidget):

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

    def init_ui(self):
        self.setWindowTitle("计算器")

        # 准备数据
        data = {
            0: ["7", "8", "9", "+", "("],
            1: ["4", "5", "6", "-", ")"],
            2: ["1", "2", "3", "*", "<-"],
            3: ["0", ".", "=", "/", "C"]
        }

        # 整体垂直布局
        layout = QVBoxLayout()

        # 输入框
        edit = QLineEdit()
        edit.setPlaceholderText("请输入内容")
        # 把输入框添加到容器中
        layout.addWidget(edit)

        # 网格布局
        grid = QGridLayout()

        # 循环创建追加进去
        for line_number, line_data in data.items():
            # 此时line_number是第几行,line_data是当前行的数据
            for col_number, number in enumerate(line_data):
                # 此时col_number是第几列,number是要显示的符号
                btn = QPushButton(number)
                # grid.addWidget(btn)
                grid.addWidget(btn, line_number, col_number)

        # 把网格布局追加到容器中
        layout.addLayout(grid)

        self.setLayout(layout)


if __name__ == '__main__':
    app = QApplication(sys.argv)

    w = MyWindow()
    w.show()

    app.exec()
运行结果

在这里插入图片描述

7.4表单 -QFormLayout

一般适用于提交数据form表单。比如: 登录,注册类似的场景

登入界面代码
'''
#Author :susocool
#Creattime:2024/1/31
#FileName:08-表单
#Description: simple introdution of the code

'''
import sys

from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QVBoxLayout, QFormLayout, QLineEdit, QPushButton, QApplication, QWidget


class MyWindow(QWidget):

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

    def init_ui(self):
        # 设定当前Widget的宽高(可以拉伸大小)
        # self.resize(300, 200)
        # 禁止改变宽高(不可以拉伸)
        self.setFixedSize(300, 150)

        # 外层容器
        container = QVBoxLayout()

        # 表单容器
        form_layout = QFormLayout()

        # 创建1个输入框
        edit = QLineEdit()
        edit.setPlaceholderText("请输入账号")
        form_layout.addRow("账号:", edit)

        # 创建另外1个输入框
        edit2 = QLineEdit()
        edit2.setPlaceholderText("请输入密码")
        form_layout.addRow("密码:", edit2)

        # 将from_layout添加到垂直布局器中
        container.addLayout(form_layout)

        # 按钮
        login_btn = QPushButton("登录")
        login_btn.setFixedSize(100, 30)

        # 把按钮添加到容器中,并且指定它的对齐方式
        container.addWidget(login_btn, alignment=Qt.AlignRight)

        # 设置当前Widget的布局器,从而显示这个布局器中的子控件
        self.setLayout(container)


if __name__ == '__main__':
    app = QApplication(sys.argv)

    w = MyWindow()
    w.show()

    app.exec()

resize:设定当前Widget的宽高(用户可以拉伸大小)
setFixedSize禁止改变宽高(用户不可以拉伸)

运行结果

在这里插入图片描述

7.5 抽屉布局-QStackedLayout

提供了多页面切换的布局,一次只能看到一个界面。 抽屉布局

切换界面代码
'''
#Author :susocool
#Creattime:2024/1/31
#FileName:09-切换界面
#Description: 切换界面展示
'''
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton, QStackedLayout, QLabel


class Window1(QWidget):
    def __init__(self):
        super().__init__()
        QLabel("我是抽屉1要显示的内容", self)
        self.setStyleSheet("background-color:green;")


class Window2(QWidget):
    def __init__(self):
        super().__init__()
        QLabel("我是抽屉2要显示的内容", self)
        self.setStyleSheet("background-color:red;")


class MyWindow(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.create_stacked_layout()
        self.init_ui()

    def create_stacked_layout(self):
        # 创建堆叠(抽屉)布局
        self.stacked_layout = QStackedLayout()
        # 创建单独的Widget
        win1 = Window1()
        win2 = Window2()
        # 将创建的2个Widget添加到抽屉布局器中
        self.stacked_layout.addWidget(win1)
        self.stacked_layout.addWidget(win2)

    def init_ui(self):
        # 设置Widget大小以及固定宽高
        self.setFixedSize(300, 270)

        # 1. 创建整体的布局器
        container = QVBoxLayout()

        # 2. 创建1个要显示具体内容的子Widget
        widget = QWidget()
        widget.setLayout(self.stacked_layout)
        widget.setStyleSheet("background-color:grey;")

        # 3. 创建2个按钮,用来点击进行切换抽屉布局器中的Widget
        btn_press1 = QPushButton("抽屉1")
        btn_press2 = QPushButton("抽屉2")
        # 给按钮添加事件(即点击后要调用的函数)
        btn_press1.clicked.connect(self.btn_press1_clicked)
        btn_press2.clicked.connect(self.btn_press2_clicked)

        # 4. 将需要显示的空间添加到布局器中
        container.addWidget(widget)
        container.addWidget(btn_press1)
        container.addWidget(btn_press2)

        # 5. 设置当前要显示的Widget,从而能够显示这个布局器中的控件
        self.setLayout(container)

    def btn_press1_clicked(self):
        # 设置抽屉布局器的当前索引值,即可切换显示哪个Widget
        self.stacked_layout.setCurrentIndex(0)

    def btn_press2_clicked(self):
        # 设置抽屉布局器的当前索引值,即可切换显示哪个Widget
        self.stacked_layout.setCurrentIndex(1)


if __name__ == "__main__":
    app = QApplication(sys.argv)

    win = MyWindow()
    win.show()

    app.exec()

运行结果

在这里插入图片描述
在这里插入图片描述

8、窗口

一、分类
在Qt中,生成窗口有三种方式: QWidget 、QMainWindow、QDialog

  1. QWidget
    控件和窗口的父类 ,自由度高(什么都东西都没有),没有划分菜单、工具栏、状态栏、主窗口 等区域

  2. QMainWindow
    是 QWidget的子类,包含菜单栏,工具栏,状态栏,标题栏等,中间部分则为主窗口区域

  3. QDialog
    对话框窗口的基类

8.1 QWidget

import  sys

from PyQt5.QtWidgets import QWidget, QLabel , QApplication

class mywnd(QWidget):

    def __init__(self):
        super(mywnd, self).__init__()
        self.initUI()

    def initUI(self):
        label = QLabel("这是文字~~" )
        label.setStyleSheet("font-size:30px;color:red")
        label.setParent(self)

if __name__ == '__main__':
    app = QApplication(sys.argv)

    w = mywnd()

    #设置窗口标题
    w.setWindowTitle("qwidget")

    # 展示窗口
    w.show()

    # 程序进行循环等待状态
    app.exec()

运行结果

在这里插入图片描述

8.2 QMainWindow

对话窗口代码
'''
#Author :susocool
#Creattime:2024/1/31
#FileName:10-窗口
#Description: 

'''
import sys

from PyQt5.QtWidgets import QMainWindow, QLabel, QApplication


class MyWindow(QMainWindow):

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

    def init_ui(self):
        label = QLabel("这是文字~~")
        label.setStyleSheet("font-size:30px;color:red")

        # 调用父类中的menuBar,从而对菜单栏进行操作
        menu = self.menuBar()
        # 如果是Mac的话,菜单栏不会在Window中显示而是屏幕顶部系统菜单栏位置
        # 下面这一行代码使得Mac也按照Windows的那种方式在Window中显示Menu
        menu.setNativeMenuBar(False)

        file_menu = menu.addMenu("文件")
        file_menu.addAction("新建")
        file_menu.addAction("打开")
        file_menu.addAction("保存")

        edit_menu = menu.addMenu("编辑")
        edit_menu.addAction("复制")
        edit_menu.addAction("粘贴")
        edit_menu.addAction("剪切")

        # 设置中心内容显示
        self.setCentralWidget(label)


if __name__ == '__main__':
    app = QApplication(sys.argv)

    w = MyWindow()
    # 设置窗口标题
    w.setWindowTitle("我是窗口标题....")
    # 展示窗口
    w.show()

    # 程序进行循环等待状态
    app.exec()

在这里插入图片描述

8.3 QDialog

不过对话框一般不应该作为主窗口的存在,而是通过点击操作弹出,起到提示作用。

'''
#Author :susocool
#Creattime:2024/1/31
#FileName:10-窗口
#Description: 

'''
import sys

from PyQt5.QtWidgets import QDialog, QPushButton, QApplication


class MyDialog(QDialog):

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

    def init_ui(self):
        ok_btn = QPushButton("确定", self)
        ok_btn.setGeometry(50, 50, 100, 30)


if __name__ == '__main__':
    app = QApplication(sys.argv)

    w = MyDialog()
    # 设置窗口标题
    w.setWindowTitle("对话框")
    # 展示窗口
    w.show()

    # 程序进行循环等待状态
    app.exec()

运行结果

在这里插入图片描述


总结

这篇博文介绍一下基本的UI这么写~

  • 34
    点赞
  • 50
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值