Qt 高级编程 039：QLineEdit 样式美化+密码模式+正则校验

Qt 高级编程 039QLineEdit 样式美化密码模式正则校验 前言为什么 QLineEdit 值得你花 10 分钟精读哈喽各位 Qt 小伙伴们 今天咱们来聊一聊 Qt 中最最最常用的控件之一 ——QLineEdit你可能会说“切不就是个输入框吗有啥好讲的” NONONO大错特错❌ 别看 QLineEdit 长得简单里面的水可深着呢你知道 QLineEdit 有多少种状态吗5种你知道 QSS 样式表能玩出多少花样吗N种你知道正则校验有多少坑吗踩过的人都哭了今天这篇文章咱们就从基础属性 → QSS美化 → 密码模式 → 禁用状态 → 正则校验一条龙服务给你安排得明明白白保证你看完之后QLineEdit 玩得比谁都溜Bilibili 同步视频Qt 高级编程 039QLineEdit 样式美化密码模式正则校验️ 一、QLineEdit 基础属性大盘点1.1 只读模式 readOnly —— 只许看不许摸 QLineEdit 的只读属性就像图书馆里的书——你可以翻但不能写两种设置方式任君挑选设置方式操作方法适用场景UI设计器选中控件 → 属性面板 → 勾选readOnly✅静态界面、快速原型代码动态ui-lineEdit-setReadOnly(true);业务逻辑控制、条件切换小Tips只读和禁用是两码事哦只读的文本可以选中复制禁用的话连选都选不了1.2 焦点控制 setFocusPolicy —— 谁是全场焦点还记得咱们之前讲迅雷界面的时候聊过焦点吗没错就是第二章那个QLineEdit 获得焦点后样式会发生变化这就是setFocusPolicy()的功劳// 设置强焦点点击/Tab键都能获得焦点 ui-lineEdit-setFocusPolicy(Qt::StrongFocus); // 不接受焦点点了也白点 ui-lineEdit-setFocusPolicy(Qt::NoFocus);1.3 文本对齐 setAlignment —— 左中右你说了算 文本在输入框里怎么摆左对齐居中右对齐设计器操作选中控件 → 属性面板 →align→ 水平/垂直对齐随便选代码实现// 水平居中 垂直居中 ui-lineEdit-setAlignment(Qt::AlignHCenter | Qt::AlignVCenter); // 右对齐常用于数字输入 ui-lineEdit-setAlignment(Qt::AlignRight | Qt::AlignVCenter);1.4 输入长度限制 —— 多长是个头想限制用户最多输入多少个字符一句话搞定// 最多输入20个字符 ui-lineEdit-setMaxLength(20); 二、QSS 样式表美化让你的输入框颜值爆表2.1 为什么要用 QSSQt 自带的默认样式嘛…怎么说呢…朴素中透着一丝简陋但别怕有了QSSQt Style Sheets咱们分分钟让输入框从土肥圆变成高富帅重要提醒QSS 样式表这玩意儿一般都不是自己敲的都是复制粘贴改参数的谁要是跟你说他是纯手写的那他要么是大神要么是在装X…2.2 完整 QSS 样式模板直接抄作业废话不多说直接上干货/* QLineEdit 基础样式 */ QLineEdit { border: 2px solid #333333; /* 边框2px实线深灰 */ border-radius: 8px; /* 圆角8px圆润不扎手 */ padding: 0px 8px; /* 内边距文字别贴边 */ background-color: #2d2d2d; /* 背景色暗黑风格YYDS */ color: #ffffff; /* 文字颜色白色 */ selection-background-color: #0078d7;/* 选中文本背景色微软蓝 */ font-family: Microsoft YaHei; /* 字体微软雅黑拒绝宋体 */ font-size: 14px; /* 字号14px护眼刚刚好 */ min-height: 50px; /* 最小高度50px大气 */ max-height: 50px; /* 最大高度50px固定高度 */ } /* 鼠标悬浮样式 :hover */ QLineEdit:hover { border: 2px solid #0078d7; /* 悬浮时边框变蓝 */ border-radius: 8px; /* 圆角保持一致 */ background-color: #3a3a3a; /* 背景稍微亮一丢丢 */ color: #0078d7; /* 文字也变蓝呼应感拉满 */ } /* 获得焦点样式 :focus */ QLineEdit:focus { border: 2px solid #0078d7; /* 焦点边框蓝色高亮 */ background-color: #3a3a3a; /* 背景提亮 */ } /* 只读状态 :read-only */ QLineEdit:read-only { border: 2px solid #555555; /* 边框变灰暗示不可编辑 */ background-color: #333333; /* 背景更深封印感 */ color: #888888; /* 文字变灰一眼看穿 */ } /* 禁用状态 :disabled */ QLineEdit:disabled { border: 2px solid #444444; /* 边框更灰 */ background-color: #2a2a2a; /* 背景更暗 */ color: #666666; /* 文字灰到快看不见 */ }2.3 样式效果一览图 ️graph LR A[QLineEditbr/基础状态] --|鼠标移入| B[:hoverbr/悬浮状态] A --|点击获得焦点| C[:focusbr/焦点状态] A --|setReadOnly(true)| D[:read-onlybr/只读状态] A --|setEnabled(false)| E[:disabledbr/禁用状态] style A fill:#2d2d2d,stroke:#333,stroke-width:2px,color:#fff style B fill:#3a3a3a,stroke:#0078d7,stroke-width:2px,color:#0078d7 style C fill:#3a3a3a,stroke:#0078d7,stroke-width:3px,color:#fff style D fill:#333333,stroke:#555,stroke-width:2px,color:#888 style E fill:#2a2a2a,stroke:#444,stroke-width:2px,color:#666五种状态五种心情从活泼的悬浮蓝到灰扑扑的禁用态每一种状态都在跟用户说话 三、密码模式 echoMode你的密码我看不见 3.1 echoMode 是什么echoMode决定了输入的文本怎么显示给用户看。就像你输入密码的时候显示的是 ****** 而不是真实密码3.2 四种模式详解 模式值枚举常量效果说明适用场景0QLineEdit::Normal正常显示输入啥显示啥普通文本输入1QLineEdit::NoEcho完全不显示任何东西Linux 终端输密码那种连字符数都不让你知道 ️2QLineEdit::Password显示密码圆点 •••最常用的密码输入模式 ✅3QLineEdit::PasswordEchoOnEdit编辑时显示字符失去焦点变圆点兼顾安全和确认3.3 代码示例 // 设置为密码模式最常用 ui-lineEdit_password-setEchoMode(QLineEdit::Password); // 切换显示/隐藏密码现在APP都爱这么玩 void MainWindow::on_togglePasswordBtn_clicked() { if (ui-lineEdit_password-echoMode() QLineEdit::Password) { ui-lineEdit_password-setEchoMode(QLineEdit::Normal); // 显示明文 } else { ui-lineEdit_password-setEchoMode(QLineEdit::Password); // 隐藏密码 } }冷知识为什么是模式2而不是模式1因为 NoEcho 模式下你连自己输了几个字符都不知道太反人类了… 所以 Password 模式才是业界标准 四、禁用状态 disabled我躺平了别碰我 4.1 什么时候用禁用状态某些条件不满足时不让用户输入表单提交中防止重复操作展示信息但不允许修改不过这种情况更推荐 readOnly4.2 代码设置// 禁用输入框 ui-lineEdit-setEnabled(false); // 重新启用 ui-lineEdit-setEnabled(true);⚠️友情提示如果只是不让编辑但允许复制优先用 readOnlydisabled 状态下文字都选不了用户体验不太好而且一般禁用的控件干脆直接隐藏算了放那儿灰扑扑的多影响心情… 五、正则表达式校验输入合规性的终极武器 ⚔️重头戏来了这部分是 QLineEdit 最实用也最容易踩坑的地方坐稳扶好5.1 为什么需要正则校验想象一下你让用户输入邮箱结果他给你输了个123456…你让用户输入手机号结果他给你输了abcdefg…♂️这时候就需要正则表达式Regular Expression来救场了它就像一个严格的门卫 不符合规则的输入一律拦在门外5.2 核心类介绍 Qt 提供了完整的正则校验三件套类名作用地位QRegExp/QRegularExpression正则规则本体 大脑负责制定规则QRegExpValidator校验器️ 门卫负责检查输入QLineEdit输入框 大门用户输入的地方5.3 实现流程图 flowchart TD A[用户输入字符] -- B{QRegExpValidatorbr/校验器检查} B --|符合规则| C[允许输入br/显示在输入框] B --|不符合规则| D[拒绝输入br/字符不显示] C -- E[用户按下回车] E -- F{格式完全匹配?} F --|是| G[触发 returnPressed 信号] F --|否| H[不触发信号] style A fill:#e3f2fd,stroke:#2196f3,stroke-width:2px style B fill:#fff3e0,stroke:#ff9800,stroke-width:2px style C fill:#e8f5e9,stroke:#4caf50,stroke-width:2px style D fill:#ffebee,stroke:#f44336,stroke-width:2px style G fill:#e8f5e9,stroke:#4caf50,stroke-width:2px style H fill:#ffebee,stroke:#f44336,stroke-width:2px5.4 邮箱校验完整代码示例 第一步包含头文件 #include QRegExp #include QRegExpValidator #include QMessageBox #include QDebug第二步设置正则校验器 ️void MainWindow::initEmailValidator() { // 邮箱正则表达式从正则生成网站复制的自己写容易翻车... QString emailPattern ^[a-zA-Z0-9_-][a-zA-Z0-9_-](.[a-zA-Z0-9_-])$; // 1. 创建正则对象 QRegExp emailRegExp(emailPattern); // 2. 创建校验器绑定正则规则 QRegExpValidator* emailValidator new QRegExpValidator(emailRegExp, this); // 3. 给输入框设置校验器 ui-lineEdit_email-setValidator(emailValidator); qDebug() 邮箱校验器设置完成; }⚠️踩坑预警正则里的反斜杠在 C 字符串里要写成不然转义失效正则就废了…别问我怎么知道的…第三步按钮点击校验推荐方案 ✅void MainWindow::on_validateBtn_clicked() { QString email ui-lineEdit_email-text(); // 获取校验器 const QRegExpValidator* validator qobject_castconst QRegExpValidator*(ui-lineEdit_email-validator()); if (!validator) { QMessageBox::warning(this, u8警告, u8校验器未设置); return; } int pos 0; QValidator::State result validator-validate(email, pos); // 判断校验结果 switch (result) { case QValidator::Acceptable: // ✅ 格式完全正确 QMessageBox::information(this, u8验证结果, u8 邮箱格式正确); break; case QValidator::Invalid: // ❌ 格式错误 QMessageBox::warning(this, u8验证结果, u8❌ 邮箱格式不正确); break; case QValidator::Intermediate: // ⚠️ 中间状态输入到一半还没输完 QMessageBox::information(this, u8验证结果, u8⏳ 邮箱还没输完呢); break; } }5.5 踩坑记录returnPressed 信号的坑 真实踩坑现场还原最开始我天真地以为绑定returnPressed信号就能判断格式对不对…// 我原本以为这样就能判断了...太傻太天真 connect(ui-lineEdit_email, QLineEdit::returnPressed, this, MainWindow::on_email_returnPressed);结果发现✅ 格式正确的时候按回车 → 信号触发了❌ 格式错误的时候按回车 → 信号根本不触发这就尴尬了…我怎么知道用户是没按回车还是格式不对没触发结论returnPressed信号只有在输入完全符合正则规则时才会触发所以它只能用来处理输入正确后的逻辑不能用来做错误提示5.6 两种方案对比 方案优点缺点推荐指数returnPressed 信号自动触发不用按钮错误时不触发无法提示⭐⭐按钮点击主动校验可控性强正确错误都能处理需要多一个按钮⭐⭐⭐⭐⭐最终结论按钮点击主动校验才是YYDS虽然多了个按钮但用户体验好太多了 六、完整项目代码参考 mainwindow.h#ifndef MAINWINDOW_H #define MAINWINDOW_H #include QMainWindow #include QRegExp #include QRegExpValidator QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACE class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent nullptr); ~MainWindow(); private slots: void on_validateBtn_clicked(); // 验证按钮点击 void on_togglePasswordBtn_clicked(); // 密码显示切换 private: Ui::MainWindow *ui; void initLineEdits(); // 初始化所有输入框 void initEmailValidator(); // 初始化邮箱校验器 }; #endif // MAINWINDOW_Hmainwindow.cpp#include mainwindow.h #include ui_mainwindow.h #include QMessageBox #include QDebug MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui-setupUi(this); initLineEdits(); // 初始化输入框样式和属性 initEmailValidator(); // 设置邮箱正则校验 } MainWindow::~MainWindow() { delete ui; } void MainWindow::initLineEdits() { // 第二个输入框只读模式 ui-lineEdit_readonly-setReadOnly(true); ui-lineEdit_readonly-setText(u8我是只读状态点我也没用); // 第三个输入框密码模式 ui-lineEdit_password-setEchoMode(QLineEdit::Password); ui-lineEdit_password-setText(123456); // 第四个输入框禁用模式 ui-lineEdit_disabled-setEnabled(false); ui-lineEdit_disabled-setText(u8我被禁用了躺平中...); // 设置统一对齐方式 ui-lineEdit_normal-setAlignment(Qt::AlignLeft | Qt::AlignVCenter); ui-lineEdit_email-setAlignment(Qt::AlignLeft | Qt::AlignVCenter); qDebug() ✅ 所有输入框初始化完成; } void MainWindow::initEmailValidator() { // 邮箱正则表达式 QString pattern ^[a-zA-Z0-9_-][a-zA-Z0-9_-](.[a-zA-Z0-9_-])$; QRegExp emailRegExp(pattern); QRegExpValidator* validator new QRegExpValidator(emailRegExp, this); ui-lineEdit_email-setValidator(validator); } void MainWindow::on_validateBtn_clicked() { QString email ui-lineEdit_email-text(); const QRegExpValidator* validator qobject_castconst QRegExpValidator*(ui-lineEdit_email-validator()); if (!validator) return; int pos 0; QValidator::State result validator-validate(email, pos); if (result QValidator::Acceptable) { QMessageBox::information(this, u8验证结果, u8 邮箱格式正确); } else if (result QValidator::Invalid) { QMessageBox::warning(this, u8验证结果, u8❌ 邮箱格式不正确); } else { QMessageBox::information(this, u8验证结果, u8⏳ 请输入完整的邮箱地址); } } void MainWindow::on_togglePasswordBtn_clicked() { if (ui-lineEdit_password-echoMode() QLineEdit::Password) { ui-lineEdit_password-setEchoMode(QLineEdit::Normal); } else { ui-lineEdit_password-setEchoMode(QLineEdit::Password); } } 七、知识点总结 mindmap root((QLineEditbr/全掌握)) 基础属性 readOnly 只读 setFocusPolicy 焦点 setAlignment 对齐 setMaxLength 长度限制 QSS样式 基础状态 hover 悬浮 focus 焦点 read-only 只读样式 disabled 禁用样式 密码模式 Normal 明文 NoEcho 不显示 Password 密码圆点 PasswordEchoOnEdit 编辑显示 正则校验 QRegExp 正则规则 QRegExpValidator 校验器 validate() 主动校验 returnPressed 信号坑 按钮校验方案 八、写在最后好啦今天的 QLineEdit 保姆级教程就到这里啦回顾一下咱们都学了啥✅5种状态正常、只读、密码、禁用、正则校验✅QSS美化悬浮、焦点、各种状态一网打尽✅密码模式4种 echoMode 各有千秋✅正则校验踩坑 returnPressed最终按钮方案胜出一句话总结QLineEdit 看似简单实则细节满满掌握了这些技巧你的输入框绝对能成为项目里最靓的仔往期精彩回顾 Qt 迅雷界面复刻教程第二章焦点与样式表的艺术 Qt 样式表 QSS 从入门到精通看这一篇就够了如果这篇文章对你有帮助别忘了点赞 收藏⭐ 评论 三连支持一下哦你的支持就是我更新的最大动力冲鸭