前言：
本文实现了自定义的验证码输入框控件。控件包括图标、输入框、获取验证码按钮、验证码获取倒计时标签。支持鼠标点击获取验证码按钮后开始显示倒计时功能，倒计时为 0 时，才可以在此点击获取验证码按钮。效果如图：
主要的编程思想还是实现自定义控件的封装性和共用性。
UI 布局：
控件 1：QWidget，实现整个控件的封装，这个控件使用水平布局，实现控件的水平摆放，同时，当其中一个控件隐藏时，位置会重新更新，实现在控件的后面只显示获取验证码和倒计时两个控件中的一个。
控件 2：QLabel，实现展示盾牌图标。
控件 3：QLineEdit，实现验证码输入功能。
控件 4：QPushButton，实现获取验证码功能。
控件 5：QLabel,实现倒计时显示。
页面样式初始化：
控件 1：实现外边框和背景： 边框宽 1 像素，颜色 #DBDBDB，背景颜色 #FFFFFF。
setStyleSheet("QWidget#widget{border:1px solid #DBDBDB;background-color:#FFFFFF;}");
复制代码
控件 2：实现盾牌图标的展示： 图片资源：image/vCode.png。
ui.lablevCode->setStyleSheet("border-image:url(image/vCode.png);");
复制代码
控件 3：实现验证码输入功能： 无边框，背景颜色 #FFFFFF,字体颜色 #333333。
ui.lineEdit->setStyleSheet("QLineEdit{border:0px;color:#333333;background:#FFFFFF;}");
复制代码
控件 4：实现获取验证码按钮： 无边框，字体颜色 #999999，鼠标悬浮时字体颜色 #3B85FF。
ui->pushButton->setStyleSheet("QPushButton{border:none;color:#999999;}" "QPushButton:hover{border:none;color:#3B85FF;}");
复制代码
控件 5：初始化隐藏（在没有点击获取验证码按钮时为隐藏状态，点击获取验证码按钮后，显示倒计时，隐藏获取验证码按钮）。字体颜色 #b7b7b7。
ui->label_time->setStyleSheet("QLabel{color:#b7b7b7;}");ui->label_time->hide();
复制代码
除了这些控件外，我们还需要创建一个定时器，用来实现倒计时的功能,定时器的溢出时间为 1s，定时器的槽函数为 slotVCodeTimeout()。
//创建成员变量QTimer *m_timer;//动态创建定时器，并指定定时器的溢出事件和槽函数m_vCodeTimer = new QTimer(this);connect(m_vCodeTimer, SIGNAL(timeout()), this, SLOT(slotVCodeTimeout()));m_vCodeTimer->setInterval(1000); // 1s
复制代码
功能实现：
1. 输入限制：
不显示上下文菜单，禁止输入中文，默认显示“请输入验证码”，手机号只能是 11 位 0~9 的数字。
ui.lineEdit->setContextMenuPolicy (Qt::NoContextMenu); // 不显示上下文菜单ui.lineEdit->setAttribute(Qt::WA_InputMethodEnabled, false); // 设置禁止中文输入ui.lineEdit->setPlaceholderText(QString::fromLocal8Bit("请输入验证码")); // 设置默认显示内容QRegExp rx("[0-9]{1,8}"); // 正则表达式：数字, 8位QRegExpValidator *validator = new QRegExpValidator(rx, this);ui.lineEdit->setValidator(validator);// 设置正则表达式
复制代码
2.点击获取验证码按钮，执行获取验证码操作：
在按钮的点击响应函数中，调用获取验证码的方法，通常是调用后台接口，实现给指定手机号发送验证码的功能。这里可以发射一个信号，由控件外部响应这个信号，再做相应的操作，如判断是否输入手机号、手机号是否正确、调用后台接口、判断是否成功发送验证码等。
void VCodeLineEdit::on_pushButton_clicked(){ //调用获取验证码方法}
复制代码
3.隐藏获取验证码按钮，显示倒计时：
ui->pushButton->hide();//隐藏获取验证码按钮ui->label_time->show();//显示倒计时标签
if (m_vCodeTimer->isActive())如果定时器已经启动，先停止定时器，再重新打开定时器{ m_vCodeTimer->stop();}m_vCodeTimer->start();//设置倒计时显示的文本ui->label_time->setText(QString::number(m_time) +QStringLiteral("s后重新发送"));
复制代码
4.定时器响应函数：
这里定义了一个成员变量 m_time，m_time 的初始值设置为 60（倒计时事件为 60s）。每次定时器溢出，m_time 的值减 1，先判断 m_time 是否已经小于等于 0。如果是，则表示倒计时结束，隐藏倒计时标签，重新显示获取验证码按钮，并关闭定时器，重置 m_time。如果没有小于等于 0，表示倒计时没有结束，则更新倒计时显示标签内容。
m_time -= 1;if(m_time <= 0){ ui->label_time->hide(); ui->pushButton->show(); if (m_vCodeTimer->isActive()) { m_vCodeTimer->stop(); } m_time = 60;}else{ ui->label_time->setText(QString::number(m_time) +QStringLiteral("s后重新发送"));}
复制代码
评论