PyQt5常用控件（一）：标签按钮输入框+信号与槽入门（完整代码）

寒烟似雪
寒烟似雪
1年前发布 /正在检测是否收录...
0 3 0

PyQt5常用基础控件（一）：标签、按钮与输入框+信号与槽入门（附完整代码）

哈喽～ 欢迎来到PyQt5从入门到精通的第三篇！上一篇我们搞定了QWidget窗口属性和线性布局，这一篇聚焦最常用的3个基础控件（QLabel标签、QPushButton按钮、QLineEdit输入框），再加上PyQt5交互的核心——信号与槽（Signal & Slot） 基础，手把手教你实现控件之间的互动，全程代码完整可直接运行，新手也能轻松拿捏！
mjqzambw.png

一、核心控件详解：每个控件的用法+完整代码

这三个控件是PyQt5开发中最基础也最常用的，几乎所有桌面应用都会用到（比如登录窗口的用户名输入框、确认按钮、提示标签）。我们逐个拆解，先讲用法，再上代码，最后看效果。

1. QLabel：标签控件（显示文本/图片）

QLabel的核心作用是显示内容，支持文本、图片、超链接等，是界面中的“信息展示员”。

完整代码：QLabel常用用法

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QVBoxLayout
from PyQt5.QtGui import QPixmap, QFont
from PyQt5.QtCore import Qt

class LabelDemo(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.setWindowTitle("QLabel标签控件演示")
        self.resize(400, 350)

        # 创建布局（垂直布局，让控件从上到下排列）
        layout = QVBoxLayout()

        # 1. 显示普通文本
        label1 = QLabel("这是普通文本标签")
        # 设置文本居中对齐
        label1.setAlignment(Qt.AlignCenter)
        layout.addWidget(label1)

        # 2. 显示带样式的文本（字体大小、颜色）
        label2 = QLabel("这是带样式的文本")
        # 用StyleSheet设置样式（类似CSS）
        label2.setStyleSheet("font-size: 16px; color: #e74c3c; font-weight: bold;")
        label2.setAlignment(Qt.AlignCenter)
        layout.addWidget(label2)

        # 3. 显示图片（替换为你的图片路径，支持png/jpg等格式）
        label3 = QLabel()
        # 加载图片并缩放（保持比例）
        pixmap = QPixmap("test.png")  # 图片放在代码同目录，直接写文件名
        label3.setPixmap(pixmap.scaled(200, 200, Qt.KeepAspectRatio))
        label3.setAlignment(Qt.AlignCenter)  # 图片居中
        layout.addWidget(label3)

        # 4. 显示超链接（可点击跳转）
        label4 = QLabel('<a href="https://www.ziyeyao.com">点击访问字节曜博客</a>')
        label4.setAlignment(Qt.AlignCenter)
        label4.setOpenExternalLinks(True)  # 允许打开外部链接
        layout.addWidget(label4)

        # 绑定布局到窗口
        self.setLayout(layout)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = LabelDemo()
    window.show()
    sys.exit(app.exec_())

mjqxgqbv.png

QLabel关键方法解析

方法作用
setAlignment(Qt.AlignCenter)设置内容对齐（居中/左对齐/右对齐）
setStyleSheet("样式")自定义样式（字体、颜色、背景等）
setPixmap(QPixmap("图片路径"))显示图片，scaled() 用于缩放图片
setOpenExternalLinks(True)启用超链接点击跳转

2. QPushButton：按钮控件（触发交互）

QPushButton是交互核心控件，用户点击按钮后会触发特定操作（比如登录、保存、关闭窗口），必须结合“信号与槽”使用才能实现交互。

完整代码：QPushButton常用用法+信号与槽基础

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout, QLabel
from PyQt5.QtCore import Qt

class ButtonDemo(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.setWindowTitle("QPushButton按钮控件演示")
        self.resize(300, 200)

        layout = QVBoxLayout()

        # 创建标签（用于显示按钮点击状态）
        self.status_label = QLabel("未点击按钮", alignment=Qt.AlignCenter)
        layout.addWidget(self.status_label)

        # 1. 普通按钮
        btn1 = QPushButton("普通按钮")
        # 绑定信号与槽：按钮点击（信号）→ 执行on_btn1_click函数（槽）
        btn1.clicked.connect(self.on_btn1_click)
        layout.addWidget(btn1)

        # 2. 带图标+文本的按钮（图标路径替换为你的文件）
        btn2 = QPushButton("带图标按钮")
        btn2.setIcon(QPixmap("icon.png").scaled(20, 20, Qt.KeepAspectRatio))
        btn2.clicked.connect(self.on_btn2_click)
        layout.addWidget(btn2)

        # 3. 禁用状态的按钮（无法点击）
        btn3 = QPushButton("禁用按钮")
        btn3.setDisabled(True)  # 禁用按钮
        layout.addWidget(btn3)

        self.setLayout(layout)

    # 槽函数：btn1点击后执行
    def on_btn1_click(self):
        self.status_label.setText("点击了普通按钮！")
        self.status_label.setStyleSheet("color: #2ecc71;")

    # 槽函数：btn2点击后执行
    def on_btn2_click(self):
        self.status_label.setText("点击了带图标按钮！")
        self.status_label.setStyleSheet("color: #3498db;")

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = ButtonDemo()
    window.show()
    sys.exit(app.exec_())

mjqz3lir.png

关键解析：信号与槽（核心！）

  • 信号（Signal）：控件的某个动作（比如按钮点击clicked、输入框内容变化textChanged）；
  • 槽（Slot）：信号触发后执行的函数（比如on_btn1_click）；
  • 绑定方式：控件.信号.connect(槽函数)，这是PyQt5交互的核心逻辑，记住这个公式！

QPushButton关键方法

方法作用
clicked.connect(槽函数)绑定点击信号与槽函数
setIcon(QPixmap("图标路径"))设置按钮图标
setDisabled(True)禁用按钮（False为启用）
setText("按钮文本")动态修改按钮文本

3. QLineEdit：单行输入框（获取用户输入）

QLineEdit用于获取用户单行输入（比如用户名、密码、验证码），支持限制输入长度、密码隐藏、提示文本等功能。

完整代码：QLineEdit常用用法

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLineEdit, QVBoxLayout, QLabel, QPushButton

class LineEditDemo(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.setWindowTitle("QLineEdit输入框演示")
        self.resize(350, 250)

        layout = QVBoxLayout()
        layout.setSpacing(20)
        layout.setContentsMargins(50, 50, 50, 50)

        # 1. 普通输入框（带提示文本）
        self.edit1 = QLineEdit()
        self.edit1.setPlaceholderText("请输入用户名（最多10个字符）")
        self.edit1.setMaxLength(10)  # 限制输入长度
        layout.addWidget(self.edit1)

        # 2. 密码输入框（输入内容隐藏）
        self.edit2 = QLineEdit()
        self.edit2.setPlaceholderText("请输入密码")
        self.edit2.setEchoMode(QLineEdit.Password)  # 密码隐藏模式
        layout.addWidget(self.edit2)

        # 3. 只读输入框（无法编辑）
        edit3 = QLineEdit("只读文本，无法修改")
        edit3.setReadOnly(True)
        layout.addWidget(edit3)

        # 按钮：获取输入框内容
        btn = QPushButton("获取输入内容")
        btn.clicked.connect(self.get_input_value)
        layout.addWidget(btn)

        # 标签：显示获取到的内容
        self.result_label = QLabel("")
        layout.addWidget(self.result_label)

        self.setLayout(layout)

    # 槽函数：获取输入框内容并显示
    def get_input_value(self):
        username = self.edit1.text()  # 获取输入框1的内容
        password = self.edit2.text()  # 获取输入框2的内容
        self.result_label.setText(f"用户名：{username}，密码：{password}")
        # 清空输入框（可选）
        self.edit1.clear()
        self.edit2.clear()

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = LineEditDemo()
    window.show()
    sys.exit(app.exec_())

mjqz66bs.png

QLineEdit关键方法

方法作用
setPlaceholderText("提示文本")设置输入提示（未输入时显示）
setMaxLength(数字)限制最大输入长度
setEchoMode(QLineEdit.Password)密码模式（输入内容显示为圆点）
setReadOnly(True)设置为只读（无法编辑）
text()获取输入框中的内容
clear()清空输入框内容

二、综合案例：用户名密码输入验证窗口（完整代码）

结合上面三个控件和信号与槽，做一个实用的“登录验证窗口”——输入用户名和密码后，点击按钮验证是否正确（模拟登录逻辑）。

import sys
from PyQt5.QtWidgets import (
    QApplication, QWidget, QLabel, QLineEdit,
    QPushButton, QVBoxLayout, QHBoxLayout
)
from PyQt5.QtGui import QFont, QPixmap
from PyQt5.QtCore import Qt

class LoginWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        # 窗口基础设置
        self.setWindowTitle("模拟登录窗口")
        self.resize(400, 300)
        self.setStyleSheet("background-color: #f8f9fa;")

        # 主布局（垂直布局）
        main_layout = QVBoxLayout()
        main_layout.setSpacing(25)
        main_layout.setContentsMargins(60, 50, 60, 50)

        # 1. 标题区域（图标+文本）
        title_layout = QHBoxLayout()
        # 标题图标
        title_icon = QLabel()
        title_icon.setPixmap(QPixmap("login_icon.png").scaled(30, 30, Qt.KeepAspectRatio))
        # 标题文本
        title_label = QLabel("用户登录")
        title_label.setStyleSheet("font-size: 20px; font-weight: bold; color: #2c3e50;")
        # 添加到标题布局
        title_layout.addWidget(title_icon)
        title_layout.addWidget(title_label)
        title_layout.setAlignment(Qt.AlignCenter)
        main_layout.addLayout(title_layout)

        # 2. 用户名输入区域
        user_layout = QHBoxLayout()
        user_label = QLabel("用户名：")
        user_label.setStyleSheet("font-size: 14px; color: #34495e;")
        self.user_edit = QLineEdit()
        self.user_edit.setPlaceholderText("请输入用户名")
        self.user_edit.setStyleSheet("padding: 6px; border: 1px solid #bdc3c7; border-radius: 4px;")
        user_layout.addWidget(user_label)
        user_layout.addWidget(self.user_edit)
        main_layout.addLayout(user_layout)

        # 3. 密码输入区域
        pwd_layout = QHBoxLayout()
        pwd_label = QLabel("密　码：")
        pwd_label.setStyleSheet("font-size: 14px; color: #34495e;")
        self.pwd_edit = QLineEdit()
        self.pwd_edit.setPlaceholderText("请输入密码")
        self.pwd_edit.setEchoMode(QLineEdit.Password)
        self.pwd_edit.setStyleSheet("padding: 6px; border: 1px solid #bdc3c7; border-radius: 4px;")
        pwd_layout.addWidget(pwd_label)
        pwd_layout.addWidget(self.pwd_edit)
        main_layout.addLayout(pwd_layout)

        # 4. 验证结果标签
        self.result_label = QLabel("")
        self.result_label.setAlignment(Qt.AlignCenter)
        main_layout.addWidget(self.result_label)

        # 5. 登录按钮
        login_btn = QPushButton("登录")
        login_btn.setStyleSheet("""
            background-color: #3498db;
            color: white;
            padding: 8px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
        """)
        # 鼠标悬停时改变颜色
        login_btn.setStyleSheet("""
            QPushButton {
                background-color: #3498db;
                color: white;
                padding: 8px;
                border: none;
                border-radius: 4px;
                font-size: 14px;
            }
            QPushButton:hover {
                background-color: #2980b9;
            }
        """)
        login_btn.clicked.connect(self.check_login)
        main_layout.addWidget(login_btn)

        # 绑定主布局
        self.setLayout(main_layout)

    # 登录验证槽函数
    def check_login(self):
        # 模拟正确的用户名和密码
        correct_user = "admin"
        correct_pwd = "123456"

        # 获取用户输入
        input_user = self.user_edit.text().strip()  # strip()去除前后空格
        input_pwd = self.pwd_edit.text().strip()

        # 验证逻辑
        if not input_user or not input_pwd:
            self.result_label.setText("用户名或密码不能为空！")
            self.result_label.setStyleSheet("color: #e74c3c; font-size: 12px;")
        elif input_user == correct_user and input_pwd == correct_pwd:
            self.result_label.setText("登录成功！")
            self.result_label.setStyleSheet("color: #2ecc71; font-size: 12px;")
        else:
            self.result_label.setText("用户名或密码错误！")
            self.result_label.setStyleSheet("color: #e74c3c; font-size: 12px;")
            # 清空密码输入框
            self.pwd_edit.clear()

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = LoginWindow()
    window.show()
    sys.exit(app.exec_())

mjqz6yqo.png

综合案例亮点

  1. 结合了QLabel（标题、提示）、QLineEdit（输入）、QPushButton（登录）三个核心控件；
  2. 使用嵌套布局（QVBoxLayout+QHBoxLayout），界面更规整；
  3. 加入了样式美化（背景色、边框、按钮悬停效果）；
  4. 实现了完整的登录验证逻辑（非空判断、正确/错误提示）。

三、常见问题排查

  1. 按钮点击后没反应：

    • 忘记绑定clicked.connect(槽函数)；
    • 槽函数名称写错（比如on_btn_click写成on_btn_click1）；
    • 按钮被设置为禁用状态（setDisabled(True)）。

  2. 输入框无法获取内容：

    • 没有用text()方法获取内容，或获取的是其他输入框的实例；
    • 输入内容有前后空格，可加strip()方法去除（如self.user_edit.text().strip()）。

  3. 图片/图标不显示：

    • 图片路径错误（建议放在代码同目录，直接写文件名）；
    • 图片尺寸太大，未用scaled()缩放导致超出窗口范围。

  4. 样式设置不生效：

    • StyleSheet语法错误（比如少写分号、引号不匹配）；
    • 控件样式被布局或父控件样式覆盖，可针对性调整。

总结

  1. 三个核心控件的核心用途：QLabel显示、QPushButton触发、QLineEdit输入；
  2. 信号与槽是PyQt5交互的核心，记住控件.信号.connect(槽函数)的绑定方式；
  3. 实际开发中建议用布局管理器组织控件，配合StyleSheet美化界面；
  4. 下一篇我们会讲解复选框、单选框、下拉框等进阶基础控件，以及更复杂的信号与槽用法，记得关注字节曜博客哦～

如果在实操中遇到问题，欢迎在评论区留言讨论！

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
pyqt5入门到精通# pyqt5# pyqt5从入门到精通
喜欢就支持一下吧
点赞 0 分享 收藏
本站资源多为网络收集，如涉及版权问题请及时与站长联系，我们会在第一时间内删除资源。
本站用户发帖仅代表本站用户个人观点，并不代表本站赞同其观点和对其真实性负责。
本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
本站资源大多存储在云盘，如发现链接失效，请及时与站长联系，我们会第一时间更新。
转载本网站任何内容，请按照转载方式正确书写本站原文地址。
版权属于：寒烟似雪
本文链接：https://www.ziyeyao.com/archives/pyqt-3.html
作品采用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
相关推荐
PyQt5阶段三实战项目：多线程文件下载工具（仿迅雷核心功能）
PyQt5阶段三实战项目：多线程文件下载工具（仿迅雷核心功能）
PyQt5阶段三实战项目：多线程文件下载工具（仿迅雷核心功能）
1天前 6
PyQt5多线程编程：解决界面卡顿的核心方案（附下载工具实战）
PyQt5多线程编程：解决界面卡顿的核心方案（附下载工具实战）
PyQt5多线程编程：解决界面卡顿的核心方案（附下载工具实战）
2天前 7
PyQt5事件处理：重写鼠标/键盘/窗口事件函数（附绘图实战）
PyQt5事件处理：重写鼠标/键盘/窗口事件函数（附绘图实战）
PyQt5事件处理：重写鼠标/键盘/窗口事件函数（附绘图实战）
4天前 7
PyQt5自定义信号：跨窗口通信与多线程进度传递（完整代码）
PyQt5自定义信号：跨窗口通信与多线程进度传递（完整代码）
PyQt5自定义信号：跨窗口通信与多线程进度传递（完整代码）
5天前 7
PyQt5信号与槽原理：从基础到进阶（附参数传递代码）
PyQt5信号与槽原理：从基础到进阶（附参数传递代码）
PyQt5信号与槽原理：从基础到进阶（附参数传递代码）
1月6日 6
PyQt5实战项目：简易Excel表格数据管理器（完整可运行代码）
PyQt5实战项目：简易Excel表格数据管理器（完整可运行代码）
PyQt5实战项目：简易Excel表格数据管理器（完整可运行代码）
1月5日 7
评论 抢沙发
OωO
取消
SSL