PyQt5 登录界面开发全流程：从环境配置到可视化设计

在 Python 桌面应用开发中，PyQt5 是最主流的 GUI 框架之一，它结合了 Qt 的强大功能与 Python 的简洁语法，能快速实现可视化界面开发。本文将以登录窗口为例，带你从零完成环境搭建、PyCharm 工具配置、Qt Designer 可视化设计、UI 转码到业务逻辑绑定的完整流程，新手也能直接上手。

一、环境准备：安装 PyQt5 与工具包

首先需要安装 PyQt5 核心库和配套工具pyqt5-tools（包含 Qt Designer、pyuic5 等可视化工具），为了加速安装，推荐使用清华镜像源：

# 安装PyQt5核心库
pip install PyQt5 -i https://pypi.tuna.tsinghua.edu.cn/simple

# 安装PyQt5工具包（包含Qt Designer、pyuic5等）
pip install pyqt5-tools -i https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn

说明：--trusted-host参数用于解决镜像源的 SSL 验证问题，避免安装失败。

二、PyCharm 配置外部工具：集成 Qt Designer 与 PyUIC

为了在 PyCharm 中直接调用 Qt Designer 设计界面、一键将.ui文件转为 Python 代码，需要配置两个外部工具：

1. 配置 Qt Designer

1. 打开 PyCharm，依次点击 文件 → 设置 → 工具 → 外部工具，点击左上角「+」号添加工具

2. 填写配置信息：

◦ 名称：QtDesigner（自定义，方便识别即可）

◦ 程序：选择 Qt Designer 的可执行文件路径，通常在 Python 安装目录下的site-packages\qt5_applications\Qt\bin\designer.exe

（示例路径：D:\Python\Python311\Lib\site-packages\qt5_applications\Qt\bin\designer.exe）

◦ 工作目录：填写FileDir（表示当前项目文件所在目录）

3. 点击「确定」完成配置

2. 配置 PyUIC（UI 转 Python 工具）

1. 再次点击「+」号添加第二个工具

2. 填写配置信息：

◦ 名称：PyUIC

◦ 程序：选择 Python 解释器路径（示例：D:\Python\Python311\python.exe）

◦ 实参：-m PyQt5.uic.pyuic FileName -o FileNameWithoutExtension.py

◦ 工作目录：填写FileDir

3. 点击「确定」完成配置

配置完成后，在 PyCharm 中右键项目文件，就能在External Tools菜单中看到QtDesigner和PyUIC，直接调用即可。

三、Qt Designer 可视化设计登录界面

Qt Designer 是 Qt 的可视化界面设计工具，通过拖拽控件就能快速生成界面，无需手动编写大量 UI 代码。

1. 新建主窗口

• 在 PyCharm 中右键项目 → External Tools → QtDesigner 打开工具

• 在弹出的「新建窗体」中选择Main Window，点击「创建」，生成一个空白主窗口

2. 拖拽控件搭建登录界面

从左侧Widget Box中拖拽所需控件到窗口，完成布局：

• Label 标签：2 个，分别用于显示「账号：」「密码：」

• Line Edit 输入框：2 个，分别用于输入账号、密码

• Push Button 按钮：2 个，分别用于「登录」「注册」功能

• 调整控件位置、大小，让界面布局美观

3. 美化界面：修改样式与字体

• 右键控件 → 选择「改变样式表」，可以自定义控件的字体、颜色、背景等样式

• 点击「添加字体」，选择合适的字体（如 Agency FB）、字号，让界面更美观

• 也可以直接编写 QSS 样式表，实现更复杂的美化效果

4. 保存 UI 文件

设计完成后，点击左上角「保存」按钮，将文件保存为win1.ui，放在项目目录下。

四、UI 转 Python 代码：生成 win1.py

设计好的.ui文件无法直接在 Python 中运行，需要通过 PyUIC 工具将其转换为 Python 代码：

1. 在 PyCharm 中右键win1.ui文件 → External Tools → PyUIC

2. 工具会自动在同目录下生成win1.py文件

3. 生成的代码结构如下（核心部分）：

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'win1.ui'
#
# Created by: PyQt5 UI code generator 5.15.9
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(1129, 857)
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(14)
        font.setBold(True)
        font.setWeight(75)
        MainWindow.setFont(font)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(340, 390, 121, 61))
        self.pushButton.setObjectName("pushButton")
        self.lineEdit = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit.setGeometry(QtCore.QRect(452, 140, 161, 41))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(14)
        font.setBold(False)
        font.setWeight(50)
        self.lineEdit.setFont(font)
        self.lineEdit.setObjectName("lineEdit")
        self.lineEdit_2 = QtWidgets.QLineEdit(self.centralwidget)
        self.lineEdit_2.setGeometry(QtCore.QRect(450, 260, 161, 41))
        font = QtGui.QFont()
        font.setFamily("Arial")
        font.setPointSize(14)
        font.setBold(False)
        font.setWeight(50)
        self.lineEdit_2.setFont(font)
        self.lineEdit_2.setObjectName("lineEdit_2")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(350, 140, 81, 41))
        self.label.setObjectName("label")
        self.label_2 = QtWidgets.QLabel(self.centralwidget)
        self.label_2.setGeometry(QtCore.QRect(350, 260, 81, 31))
        self.label_2.setObjectName("label_2")
        self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_2.setGeometry(QtCore.QRect(500, 390, 121, 61))
        self.pushButton_2.setObjectName("pushButton_2")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 1129, 34))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "登录"))
        self.lineEdit.setText(_translate("MainWindow", "123456"))
        self.lineEdit_2.setText(_translate("MainWindow", "123456"))
        self.label.setText(_translate("MainWindow", "<html><head/><body><p align=\"center\"><span style=\" font-size:18pt;\">账号：</span></p></body></html>"))
        self.label_2.setText(_translate("MainWindow", "<html><head/><body><p align=\"center\"><span style=\" font-size:18pt;\">密码：</span></p></body></html>"))
        self.pushButton_2.setText(_translate("MainWindow", "注册"))

重要提醒：不要手动修改**win1.py**文件，后续如果修改了 UI 设计，重新执行 PyUIC 转换会覆盖文件，手动修改会丢失。

五、业务逻辑绑定：实现登录功能

UI 代码仅负责界面展示，需要新建一个主程序文件，继承 UI 类并绑定业务逻辑，实现账号密码验证功能。

1. 新建主程序文件Template.py

from PyQt5 import QtCore, QtGui, QtWidgets  # 导入PyQt5的主要模块
from PyQt5.QtCore import *                 # 导入QtCore模块的所有内容，用于核心功能
from PyQt5.QtGui import *                  # 导入QtGui模块的所有内容，用于图形功能
from PyQt5.QtWidgets import QFileDialog, QMainWindow, QMessageBox  # 导入QtWidgets模块中的一些特定类
'''QFileDialog可以帮助用户选择文件路径
QMainWindow则是创建具有菜单、工具栏和状态栏的主窗口的起点。
QMessageBox可以用于向用户显示提示或警告信息'''

from win1 import Ui_MainWindow  # 导入UI类，这个类包含了你的主窗口设计
import sys   # 导入系统模块，用于访问命令行参数和系统相关功能

class PyQtMainEntry(QMainWindow, Ui_MainWindow):  # 定义一个继承自QMainWindow和Ui_MainWindow的类
    def __init__(self):  # 构造函数
        super().__init__()  # 调用基类的构造函数进行初始化
        self.setupUi(self)  # 调用setupUi方法，根据Ui_MainWindow设计设置界面
        # 参数初始化



    '''定义要触发的函数'''
    # def predict_price(self):
    # def showbiao(self):
    # def slot1(self):
    #     print('金色传说')

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)  # 创建应用程序实例
    window = PyQtMainEntry()  # 创建主窗口实例
    window.show()  # 显示主窗口
    sys.exit(app.exec_())  # 进入事件循环，并确保在退出时清理

2. 运行程序

直接运行Template.py，就能弹出登录窗口

六、常见问题与优化

1. 常见问题

• Qt Designer 路径错误：如果配置后无法打开，检查designer.exe路径是否正确，可通过pip show pyqt5-tools查看安装目录

• PyUIC 转换失败：检查 Python 解释器路径是否正确，确保 PyQt5 安装成功

• 密码明文显示：给密码输入框添加self.lineEdit_pwd.setEchoMode(QtWidgets.QLineEdit.Password)，实现密码隐藏

2. 界面优化

• 布局管理：使用 Qt 的布局管理器（垂直布局、水平布局），让界面自适应窗口大小

• QSS 美化：编写全局 QSS 样式表，统一界面风格，添加圆角、阴影等效果

• 功能扩展：对接数据库实现真实账号验证、添加记住密码、忘记密码等功能

七、总结

本文完整演示了 PyQt5 登录界面的开发流程：从环境安装、工具配置，到可视化设计、UI 转码，再到业务逻辑绑定，覆盖了 PyQt5 桌面开发的核心流程。这种「UI 与逻辑分离」的开发模式，既能通过可视化工具快速搭建界面，又能灵活编写业务代码，大幅提升开发效率，非常适合 Python 桌面应用开发。