GUI设计——PyQt5快速入门

一、学习目标

  1. 了解有关GUI界面设计的基本语法
  2. 能够编写简单的界面设计程序

二、PyQt5 安装与环境配置

首先,本人通过网上的教程,在Index of / (qt.io)官网上下载好了 Qt Designer Qt Creator 。本人下载的版本为 5.14。随后,通过网络的资源,我了解到了一些Qt的基本知识。

我了解的第一部分,是 Qt 的一些工具。

  • Qmake:核心的项目构建工具,可以生成跨平台的 .pro 项目文件,并能依据不同操作系统和编译工具生成相应的Makefile,用于构建可执行程序或链接库。
  • Qtcreator:集成开发环境,包含项目生成管理、代码编辑、图形界面可视化编辑、 编译生成、程序调试、上下文帮助、版本控制系统集成等众多功能, 还支持手机和嵌入式设备的程序生成部署。
  • Designer:Qt 设计师,专门用于可视化编辑图形用户界面(所见即所得),生成.ui文件用于Qt项目。

三、Qt Creator 初体验

GUI设计——PyQt5快速入门_第1张图片

本人打开 Qt Creator 的一个实例程序——音乐播放器,体验了一下 Qt 设计的成品,感觉挺有意思的。

GUI设计——PyQt5快速入门_第2张图片

大家可以打开软件亲自动手尝试一下,其中,每一个示例程序对应的都有C语言编写的源代码,可以对照着看代码进行学习。 

四、PyQt5的相关命令和举例

import sys
from PyQt5.QtWidgets import QApplication, QWidget
if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = QWidget()
    # 设置窗口标题
    w.setWindowTitle("第一个PyQt")
    # 展示窗口
    w.show()
    # 程序进行循环等待状态
    app.exec()

通过编写第一个代码,如何运行这个代码,就能得到了一个窗口程序。

PyQt常用的功能模块如下:

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

4.1 按钮

在窗口里面添加控件

btn = QPushButton("按钮") # 设置按钮的父亲是当前窗口,等于是添加到窗口中显示
btn.setParent(w)

【示例代码】

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton
if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = QWidget()
    # 设置窗口标题
    w.setWindowTitle("第一个PyQt程序")
    # 在窗口里面添加控件
    btn = QPushButton("按钮")
    # 设置按钮的父亲是当前窗口,等于是添加到窗口中显示
    btn.setParent(w)
    # 展示窗口
    w.show()
    # 程序进行循环等待状态
    app.exec()

4.2 文本

创建一个Label(纯文本),在创建的时候指定了父对象

label = QLabel("James: ", w)
x, y , w, h label.setGeometry(20, 20, 30, 30)

【示例代码】

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QLabel
if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = QWidget()
    # 设置窗口标题
    w.setWindowTitle("第一个PyQt")
    # # 下面创建一个Label,然后调用方法指定父类
    # label = QLabel("账号: ", w)
    # # 设置父对象
    # label.setParent(w)
    # 下面创建一个Label(纯文本),在创建的时候指定了父对象
    label = QLabel("账号: ", w)
    # 显示位置与大小 : x, y , w, h
    label.setGeometry(20, 20, 30, 30)
    # 展示窗口
    w.show()
    # 程序进行循环等待状态
    app.exec()

4.3 文本框

edit = QLineEdit(w) edit.setPlaceholderText("请输入账号") edit.setGeometry(55, 20, 200, 20)
btn = QPushButton("注册", w) btn.setGeometry(50, 80, 70, 30)

4.4 布局

Qt 里面布局分为四个大类 :

  • QBoxLayout
  • QGridLayout
  • QFormLayout
  • QStackedLayout

【示例代码】

下面是根据网格布局进行设计的一个计算器格式。

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()

代码运行结果如下:

GUI设计——PyQt5快速入门_第3张图片

4.5 窗口

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

  • QWidget:控件和窗口的父类 ,自由度高(什么都东西都没有),没有划分菜单、工具栏、状态栏、主窗口 等区域
  • QMainWindow:是 QWidget的子类,包含菜单栏,工具栏,状态栏,标题栏等,中间部分则为主窗口区域
  • QDialog:对话框窗口的基类

 【示例代码】

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()

4.6 信号与槽

  • 信号:事件(按钮点击 、内容发生改变 、窗口的关闭事件) 或者是 状态 (check选中了, togglebutton 切换。)当程序触发了某种状态或者发生了某种事件(比如:按钮被点击了, 内容改变等等),那么即可发射出来一个信号。
  • 槽:若想捕获这个信号,然后执行相应的逻辑代码,那么就需要使用到 槽 , 槽实际上是一个函数, 当信号发射出来后,会执行与之绑定的槽函数。

【示例代码】

import sys
import time
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *

class MyWindow(QWidget):
    # 声明一个信号 只能放在函数的外面
    my_signal = pyqtSignal(str)
    def __init__(self):
        super().__init__()
        self.init_ui()
        self.msg_history = list()  # 用来存放消息
    def init_ui(self):
        self.resize(500, 200)

        # 创建一个整体布局器
        container = QVBoxLayout()

        # 用来显示检测到漏洞的信息
        self.msg = QLabel("")
        self.msg.resize(440, 15)
        # print(self.msg.frameSize())
        self.msg.setWordWrap(True)  # 自动换行
        self.msg.setAlignment(Qt.AlignTop)  # 靠上
        # self.msg.setStyleSheet("background-color: yellow; color: black;")

        # 创建一个滚动对象
        scroll = QScrollArea()
        scroll.setWidget(self.msg)

        # 创建垂直布局器,用来添加自动滚动条
        v_layout = QVBoxLayout()
        v_layout.addWidget(scroll)

        # 创建水平布局器
        h_layout = QHBoxLayout()
        btn = QPushButton("开始检测", self)
        # 绑定按钮的点击,点击按钮则开始检测
        btn.clicked.connect(self.check)
        h_layout.addStretch(1)  # 伸缩器
        h_layout.addWidget(btn)
        h_layout.addStretch(1)

        # 操作将要显示的控件以及子布局器添加到container
        container.addLayout(v_layout)
        container.addLayout(h_layout)

        # 设置布局器
        self.setLayout(container)

        # 绑定信号和槽
        self.my_signal.connect(self.my_slot)

    def my_slot(self, msg):
        # 更新内容
        print(msg)
        self.msg_history.append(msg)
        self.msg.setText("
".join(self.msg_history)) self.msg.resize(440, self.msg.frameSize().height() + 15) self.msg.repaint() # 更新内容,如果不更新可能没有显示新内容 def check(self): for i, ip in enumerate(["192.168.1.%d" % x for x in range(1, 255)]): msg = "模拟,正在检查 %s 上的漏洞...." % ip # print(msg) if i % 5 == 3: # 表示发射信号 对象.信号.发射(参数) self.my_signal.emit(msg + "【发现漏洞】") time.sleep(0.01) if __name__ == '__main__': app = QApplication(sys.argv) w = MyWindow() w.show() app.exec()

总结

本人从安装 PyQt5 并配置相关的环境,到体验Qt Creator,讲解 PyQt5 的相关命令和控件,同时通过示例代码进行详细的说明,带大家入门了使用 PyQt5 进行的GUI设计。

你可能感兴趣的:(qt,开发语言,ui,GUI设计)