如何自定义QLineEdit实现类似MDB Pro InputField的动画占位符效果

一、整体控件结构设计 #

不要直接修改原生QLineEdit，优先封装组合控件，成本最低且易扩展：

• 基类选择QWidget，内部包含3个核心元素：QLabel（实现浮动标签）、QLineEdit（输入框本体）、QPropertyAnimation（实现过渡动画）
• 控件整体预留足够的顶部空间，用来放置上浮后的标签

二、基础样式初始化 #

• QLineEdit样式：去掉默认边框，仅保留2px高度的底部边线；未选中时边线为浅灰色，获得焦点时切换为主题色；设置上下内边距，给上方浮动标签腾出显示位置，避免文字重叠
• 浮动标签QLabel样式：初始状态和QLineEdit的占位文字字号、颜色、位置完全重合，默认半透明灰色；上浮后字号缩小到原大小的75%-80%，颜色切换为主题色，位置移到输入框顶部上方

三、核心逻辑实现 #

• 给QLineEdit安装事件过滤器，监听两个核心事件：focusInEvent（获得焦点）、focusOutEvent（失去焦点），同时绑定textChanged信号判断输入框是否有内容
• 触发标签上浮动画的条件：输入框获得焦点 或 输入框内存在非空内容
• 触发标签下沉动画的条件：输入框失去焦点 且 输入框内容为空
• 动画参数设置：动画作用在QLabel的pos、font、color三个属性，时长设置为150-200ms，缓动曲线选择QEasingCurve::InOutQuad，保证过渡流畅无顿挫

四、核心代码示例（PyQt） #

from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *

class MDBInputField(QWidget):
    def __init__(self, parent=None, placeholder="输入内容"):
        super().__init__(parent)
        self.setFixedHeight(56)
        layout = QVBoxLayout(self)
        layout.setContentsMargins(0,0,0,0)
        
        # 初始化浮动标签
        self.float_label = QLabel(placeholder, self)
        self.float_label.move(8, 18)
        self.float_label.setStyleSheet("color: #9e9e9e; font-size: 16px; background: transparent;")
        
        # 初始化输入框
        self.line_edit = QLineEdit(self)
        self.line_edit.setStyleSheet("""
            QLineEdit {
                border: none;
                border-bottom: 2px solid #9e9e9e;
                padding: 18px 8px 6px 8px;
                font-size: 16px;
                background: transparent;
            }
            QLineEdit:focus {
                border-bottom-color: #1976d2;
                outline: none;
            }
        """)
        layout.addWidget(self.line_edit)
        
        # 初始化动画
        self.animation = QPropertyAnimation(self.float_label, b"pos", self)
        self.animation.setDuration(200)
        self.animation.setEasingCurve(QEasingCurve.InOutQuad)

    # 重写焦点获得事件
    def focusInEvent(self, event):
        super().focusInEvent(event)
        self.line_edit.setFocus()
        if self.float_label.y() == 18:
            self.animation.setStartValue(QPoint(8, 18))
            self.animation.setEndValue(QPoint(4, 4))
            self.animation.start()
            self.float_label.setStyleSheet("color: #1976d2; font-size: 12px; background: transparent;")

    # 重写焦点失去事件
    def focusOutEvent(self, event):
        super().focusOutEvent(event)
        if not self.line_edit.text().strip() and self.float_label.y() == 4:
            self.animation.setStartValue(QPoint(4, 4))
            self.animation.setEndValue(QPoint(8, 18))
            self.animation.start()
            self.float_label.setStyleSheet("color: #9e9e9e; font-size: 16px; background: transparent;")

如果使用C++ Qt开发，逻辑和上述代码完全一致，仅需要替换为C++语法即可。如果需要更贴近MDB的原生效果，可以额外加一个底边线的宽度动画，获得焦点时底边线从中间向两侧伸展到全宽，视觉效果会更精致。

内容的提问来源于stack exchange，提问作者golondrino