恋恋风辰的官方博客

聊天项目(12) 注册界面完善
Posted on 2024-04-26 18:09:07 by 恋恋风辰 | In C++ | 原文链接

增加定时按钮

点击获取验证码后需要让按钮显示倒计时，然后倒计时结束后再次可点击。
添加TimberBtn类

  1. #ifndef TIMERBTN_H
  2. #define TIMERBTN_H
  3. #include <QPushButton>
  4. #include <QTimer>
  6. class TimerBtn : public QPushButton
  7. {
  8. public:
  9.     TimerBtn(QWidget *parent = nullptr);
  10.     ~ TimerBtn();
  12.     // 重写mouseReleaseEvent
  13.     virtual void mouseReleaseEvent(QMouseEvent *e) override;
  14. private:
  15.     QTimer  *_timer;
  16.     int _counter;
  17. };
  19. #endif // TIMERBTN_H

添加实现

  1. #include "timerbtn.h"
  2. #include <QMouseEvent>
  3. #include <QDebug>
  5. TimerBtn::TimerBtn(QWidget *parent):QPushButton(parent),_counter(10)
  6. {
  7.     _timer = new QTimer(this);
  9.     connect(_timer, &QTimer::timeout, [this](){
  10.         _counter--;
  11.         if(_counter <= 0){
  12.             _timer->stop();
  13.             _counter = 10;
  14.             this->setText("获取");
  15.             this->setEnabled(true);
  16.             return;
  17.         }
  18.         this->setText(QString::number(_counter));
  19.     });
  20. }
  22. TimerBtn::~TimerBtn()
  23. {
  24.     _timer->stop();
  25. }
  27. void TimerBtn::mouseReleaseEvent(QMouseEvent *e)
  28. {
  29.     if (e->button() == Qt::LeftButton) {
  30.         // 在这里处理鼠标左键释放事件
  31.         qDebug() << "MyButton was released!";
  32.         this->setEnabled(false);
  33.          this->setText(QString::number(_counter));
  34.         _timer->start(1000);
  35.         emit clicked();
  36.     }
  37.     // 调用基类的mouseReleaseEvent以确保正常的事件处理（如点击效果）
  38.     QPushButton::mouseReleaseEvent(e);
  39. }

然后将注册界面获取按钮升级为TimerBtn

调整输入框错误提示

在RegisterDialog构造函数中删除原来的输入框editing信号和逻辑，添加editingFinished信号和处理逻辑。

  1. //day11 设定输入框输入后清空字符串
  2. ui->err_tip->clear();
  4. connect(ui->user_edit,&QLineEdit::editingFinished,this,[this](){
  5.     checkUserValid();
  6. });
  8. connect(ui->email_edit, &QLineEdit::editingFinished, this, [this](){
  9.     checkEmailValid();
  10. });
  12. connect(ui->pass_edit, &QLineEdit::editingFinished, this, [this](){
  13.     checkPassValid();
  14. });
  16. connect(ui->confirm_edit, &QLineEdit::editingFinished, this, [this](){
  17.     checkConfirmValid();
  18. });
  20. connect(ui->varify_edit, &QLineEdit::editingFinished, this, [this](){
  21.         checkVarifyValid();
  22. });

global.h中添加TipErr定义

  1. enum TipErr{
  2.     TIP_SUCCESS = 0,
  3.     TIP_EMAIL_ERR = 1,
  4.     TIP_PWD_ERR = 2,
  5.     TIP_CONFIRM_ERR = 3,
  6.     TIP_PWD_CONFIRM = 4,
  7.     TIP_VARIFY_ERR = 5,
  8.     TIP_USER_ERR = 6
  9. };

RegisterDialog声明中添加

  1. QMap<TipErr, QString> _tip_errs;

_tip_errs用来缓存各个输入框输入完成后提示的错误，如果该输入框错误清除后就显示剩余的错误，每次只显示一条

实现添加错误和删除错误

  1. void ResetDialog::AddTipErr(TipErr te, QString tips)
  2. {
  3.     _tip_errs[te] = tips;
  4.     showTip(tips, false);
  5. }
  7. void ResetDialog::DelTipErr(TipErr te)
  8. {
  9.     _tip_errs.remove(te);
  10.     if(_tip_errs.empty()){
  11.       ui->err_tip->clear();
  12.       return;
  13.     }
  15.     showTip(_tip_errs.first(), false);
  16. }

实现错误检测

  1. bool ResetDialog::checkUserValid()
  2. {
  3.     if(ui->user_edit->text() == ""){
  4.         AddTipErr(TipErr::TIP_USER_ERR, tr("用户名不能为空"));
  5.         return false;
  6.     }
  8.     DelTipErr(TipErr::TIP_USER_ERR);
  9.     return true;
  10. }
  13. bool ResetDialog::checkPassValid()
  14. {
  15.     auto pass = ui->pwd_edit->text();
  17.     if(pass.length() < 6 || pass.length()>15){
  18.         //提示长度不准确
  19.         AddTipErr(TipErr::TIP_PWD_ERR, tr("密码长度应为6~15"));
  20.         return false;
  21.     }
  23.     // 创建一个正则表达式对象，按照上述密码要求
  24.     // 这个正则表达式解释：
  25.     // ^[a-zA-Z0-9!@#$%^&*]{6,15}$ 密码长度至少6，可以是字母、数字和特定的特殊字符
  26.     QRegularExpression regExp("^[a-zA-Z0-9!@#$%^&*]{6,15}$");
  27.     bool match = regExp.match(pass).hasMatch();
  28.     if(!match){
  29.         //提示字符非法
  30.         AddTipErr(TipErr::TIP_PWD_ERR, tr("不能包含非法字符"));
  31.         return false;;
  32.     }
  34.     DelTipErr(TipErr::TIP_PWD_ERR);
  36.     return true;
  37. }
  41. bool ResetDialog::checkEmailValid()
  42. {
  43.     //验证邮箱的地址正则表达式
  44.     auto email = ui->email_edit->text();
  45.     // 邮箱地址的正则表达式
  46.     QRegularExpression regex(R"((\w+)(\.|_)?(\w*)@(\w+)(\.(\w+))+)");
  47.     bool match = regex.match(email).hasMatch(); // 执行正则表达式匹配
  48.     if(!match){
  49.         //提示邮箱不正确
  50.         AddTipErr(TipErr::TIP_EMAIL_ERR, tr("邮箱地址不正确"));
  51.         return false;
  52.     }
  54.     DelTipErr(TipErr::TIP_EMAIL_ERR);
  55.     return true;
  56. }
  58. bool ResetDialog::checkVarifyValid()
  59. {
  60.     auto pass = ui->varify_edit->text();
  61.     if(pass.isEmpty()){
  62.         AddTipErr(TipErr::TIP_VARIFY_ERR, tr("验证码不能为空"));
  63.         return false;
  64.     }
  66.     DelTipErr(TipErr::TIP_VARIFY_ERR);
  67.     return true;
  68. }

除此之外修改之前点击确认按钮的逻辑，改为检测所有条件成立后再发送请求

  1. void ResetDialog::on_sure_btn_clicked()
  2. {
  3.     bool valid = checkUserValid();
  4.     if(!valid){
  5.         return;
  6.     }
  8.     valid = checkEmailValid();
  9.     if(!valid){
  10.         return;
  11.     }
  13.     valid = checkPassValid();
  14.     if(!valid){
  15.         return;
  16.     }
  18.     valid = checkVarifyValid();
  19.     if(!valid){
  20.         return;
  21.     }
  23.     //发送http重置用户请求
  24.     QJsonObject json_obj;
  25.     json_obj["user"] = ui->user_edit->text();
  26.     json_obj["email"] = ui->email_edit->text();
  27.     json_obj["passwd"] = xorString(ui->pwd_edit->text());
  28.     json_obj["varifycode"] = ui->varify_edit->text();
  29.     HttpMgr::GetInstance()->PostHttpReq(QUrl(gate_url_prefix+"/reset_pwd"),
  30.                  json_obj, ReqId::ID_RESET_PWD,Modules::RESETMOD);
  31. }

隐藏和显示密码

我们在输入密码时希望能通过点击可见还是不可见，显示密码和隐藏密码，这里先添加图片放入资源中，然后在Register.ui中添加两个label，分别命名为pass_visible和confirm_visible, 用来占据位置。

因为我们要做的点击后图片要有状态切换，以及浮动显示不一样的效果等，所以我们重写ClickedLabel,继承自QLabel.

  1. #ifndef CLICKEDLABEL_H
  2. #define CLICKEDLABEL_H
  3. #include <QLabel>
  4. #include "global.h"
  6. class ClickedLabel:public QLabel
  7. {
  8.     Q_OBJECT
  9. public:
  10.     ClickedLabel(QWidget* parent);
  11.     virtual void mousePressEvent(QMouseEvent *ev) override;
  12.     virtual void enterEvent(QEvent* event) override;
  13.     virtual void leaveEvent(QEvent* event) override;
  14.     void SetState(QString normal="", QString hover="", QString press="",
  15.                   QString select="", QString select_hover="", QString select_press="");
  17.     ClickLbState GetCurState();
  18. protected:
  20. private:
  21.     QString _normal;
  22.     QString _normal_hover;
  23.     QString _normal_press;
  25.     QString _selected;
  26.     QString _selected_hover;
  27.     QString _selected_press;
  29.     ClickLbState _curstate;
  30. signals:
  31.     void clicked(void);
  33. };
  35. #endif // CLICKEDLABEL_H

一个Label有六种状态，普通状态，普通的悬浮状态，普通的点击状态，选中状态，选中的悬浮状态，选中的点击状态。

当Label处于普通状态，被点击后，切换为选中状态，再次点击又切换为普通状态。

ClickLbState定义在global.h中，包含两种状态一个是普通状态，一个是选中状态。而Label中的六种状态就是基于这两种状态嵌套实现的。

  1. enum ClickLbState{
  2.     Normal = 0,
  3.     Selected = 1
  4. };

六种状态用qss写好，这样我们只需要根据鼠标事件切换不同的qss就可以实现样式变换。

  1. #pass_visible[state='unvisible']{
  2.    border-image: url(:/res/unvisible.png);
  3. }
  5. #pass_visible[state='unvisible_hover']{
  6.    border-image: url(:/res/unvisible_hover.png);
  7. }
  9. #pass_visible[state='visible']{
  10.    border-image: url(:/res/visible.png);
  11. }
  13. #pass_visible[state='visible_hover']{
  14.    border-image: url(:/res/visible_hover.png);
  15. }
  18. #confirm_visible[state='unvisible']{
  19.    border-image: url(:/res/unvisible.png);
  20. }
  22. #confirm_visible[state='unvisible_hover']{
  23.    border-image: url(:/res/unvisible_hover.png);
  24. }
  26. #confirm_visible[state='visible']{
  27.    border-image: url(:/res/visible.png);
  28. }
  30. #confirm_visible[state='visible_hover']{
  31.    border-image: url(:/res/visible_hover.png);
  32. }

我们实现ClickedLabel功能

  1. #include "clickedlabel.h"
  2. #include <QMouseEvent>
  3. ClickedLabel::ClickedLabel(QWidget* parent):QLabel (parent),_curstate(ClickLbState::Normal)
  4. {
  6. }
  9. // 处理鼠标点击事件
  10. void ClickedLabel::mousePressEvent(QMouseEvent* event)  {
  11.     if (event->button() == Qt::LeftButton) {
  12.         if(_curstate == ClickLbState::Normal){
  13.               qDebug()<<"clicked , change to selected hover: "<< _selected_hover;
  14.             _curstate = ClickLbState::Selected;
  15.             setProperty("state",_selected_hover);
  16.             repolish(this);
  17.             update();
  19.         }else{
  20.                qDebug()<<"clicked , change to normal hover: "<< _normal_hover;
  21.             _curstate = ClickLbState::Normal;
  22.             setProperty("state",_normal_hover);
  23.             repolish(this);
  24.             update();
  25.         }
  26.         emit clicked();
  27.     }
  28.     // 调用基类的mousePressEvent以保证正常的事件处理
  29.     QLabel::mousePressEvent(event);
  30. }
  32. // 处理鼠标悬停进入事件
  33. void ClickedLabel::enterEvent(QEvent* event) {
  34.     // 在这里处理鼠标悬停进入的逻辑
  35.     if(_curstate == ClickLbState::Normal){
  36.          qDebug()<<"enter , change to normal hover: "<< _normal_hover;
  37.         setProperty("state",_normal_hover);
  38.         repolish(this);
  39.         update();
  41.     }else{
  42.          qDebug()<<"enter , change to selected hover: "<< _selected_hover;
  43.         setProperty("state",_selected_hover);
  44.         repolish(this);
  45.         update();
  46.     }
  48.     QLabel::enterEvent(event);
  49. }
  51. // 处理鼠标悬停离开事件
  52. void ClickedLabel::leaveEvent(QEvent* event){
  53.     // 在这里处理鼠标悬停离开的逻辑
  54.     if(_curstate == ClickLbState::Normal){
  55.          qDebug()<<"leave , change to normal : "<< _normal;
  56.         setProperty("state",_normal);
  57.         repolish(this);
  58.         update();
  60.     }else{
  61.          qDebug()<<"leave , change to normal hover: "<< _selected;
  62.         setProperty("state",_selected);
  63.         repolish(this);
  64.         update();
  65.     }
  66.     QLabel::leaveEvent(event);
  67. }
  69. void ClickedLabel::SetState(QString normal, QString hover, QString press,
  70.                             QString select, QString select_hover, QString select_press)
  71. {
  72.     _normal = normal;
  73.     _normal_hover = hover;
  74.     _normal_press = press;
  76.     _selected = select;
  77.     _selected_hover = select_hover;
  78.     _selected_press = select_press;
  80.     setProperty("state",normal);
  81.     repolish(this);
  82. }
  84. ClickLbState ClickedLabel::GetCurState(){
  85.     return _curstate;
  86. }

将label升级为ClickedLabel，然后在RegisterDialog的构造函数中添加label点击的响应函数

  2. //设置浮动显示手形状
  3. ui->pass_visible->setCursor(Qt::PointingHandCursor);
  4. ui->confirm_visible->setCursor(Qt::PointingHandCursor);
  6. ui->pass_visible->SetState("unvisible","unvisible_hover","","visible",
  7.                             "visible_hover","");
  9. ui->confirm_visible->SetState("unvisible","unvisible_hover","","visible",
  10.                                 "visible_hover","");
  11. //连接点击事件
  13. connect(ui->pass_visible, &ClickedLabel::clicked, this, [this]() {
  14.     auto state = ui->pass_visible->GetCurState();
  15.     if(state == ClickLbState::Normal){
  16.         ui->pass_edit->setEchoMode(QLineEdit::Password);
  17.     }else{
  18.             ui->pass_edit->setEchoMode(QLineEdit::Normal);
  19.     }
  20.     qDebug() << "Label was clicked!";
  21. });
  23. connect(ui->confirm_visible, &ClickedLabel::clicked, this, [this]() {
  24.     auto state = ui->confirm_visible->GetCurState();
  25.     if(state == ClickLbState::Normal){
  26.         ui->confirm_edit->setEchoMode(QLineEdit::Password);
  27.     }else{
  28.             ui->confirm_edit->setEchoMode(QLineEdit::Normal);
  29.     }
  30.     qDebug() << "Label was clicked!";
  31. });

这样就实现了通过点击切换密码的显示和隐藏。

注册成功提示页面

注册成功后要切换到提示页面，所以在initHandlers函数内实现收到服务器注册回复的请求

  1. //注册注册用户回包逻辑
  2. _handlers.insert(ReqId::ID_REG_USER, [this](QJsonObject jsonObj){
  3.     int error = jsonObj["error"].toInt();
  4.     if(error != ErrorCodes::SUCCESS){
  5.         showTip(tr("参数错误"),false);
  6.         return;
  7.     }
  8.     auto email = jsonObj["email"].toString();
  9.     showTip(tr("用户注册成功"), true);
  10.     qDebug()<< "email is " << email ;
  11.     qDebug()<< "user uuid is " <<  jsonObj["uuid"].toString();
  12.     ChangeTipPage();
  13. });

页面切换逻辑

  1. void RegisterDialog::ChangeTipPage()
  2. {
  3.     _countdown_timer->stop();
  4.     ui->stackedWidget->setCurrentWidget(ui->page_2);
  6.     // 启动定时器，设置间隔为1000毫秒（1秒）
  7.     _countdown_timer->start(1000);
  8. }

在RegisterDialog.ui中stackwidget的page2添加标签和返回按钮

https://cdn.llfc.club/1712821604946.jpg

在RegisterDialog构造函数中添加定时器回调

  1. // 创建定时器
  2. _countdown_timer = new QTimer(this);
  3. // 连接信号和槽
  4. connect(_countdown_timer, &QTimer::timeout, [this](){
  5.     if(_countdown==0){
  6.         _countdown_timer->stop();
  7.         emit sigSwitchLogin();
  8.         return;
  9.     }
  10.     _countdown--;
  11.     auto str = QString("注册成功，%1 s后返回登录").arg(_countdown);
  12.     ui->tip_lb->setText(str);
  13. });

除此之外在返回按钮的槽函数中停止定时器并发送切换登录的信号

  1. void RegisterDialog::on_return_btn_clicked()
  2. {
  3.     _countdown_timer->stop();
  4.     emit sigSwitchLogin();
  5. }

取消注册也发送切换登录信号

  1. void RegisterDialog::on_cancel_btn_clicked()
  2. {
  3.     _countdown_timer->stop();
  4.     emit sigSwitchLogin();
  5. }

界面跳转

回到mainwindow，构造函数简化，只做登录界面初始化

  1. MainWindow::MainWindow(QWidget *parent) :
  2.     QMainWindow(parent),
  3.     ui(new Ui::MainWindow)
  4. {
  5.     ui->setupUi(this);
  6.     //创建一个CentralWidget, 并将其设置为MainWindow的中心部件
  7.     _login_dlg = new LoginDialog(this);
  8.     _login_dlg->setWindowFlags(Qt::CustomizeWindowHint|Qt::FramelessWindowHint);
  9.     setCentralWidget(_login_dlg);
  11.     //连接登录界面注册信号
  12.     connect(_login_dlg, &LoginDialog::switchRegister, this, &MainWindow::SlotSwitchReg);
  13.     //连接登录界面忘记密码信号
  14.     connect(_login_dlg, &LoginDialog::switchReset, this, &MainWindow::SlotSwitchReset);
  15. }

在点击注册按钮的槽函数中

  1. void MainWindow::SlotSwitchReg()
  2. {
  3.     _reg_dlg = new RegisterDialog(this);
  4.     _reg_dlg->hide();
  6.     _reg_dlg->setWindowFlags(Qt::CustomizeWindowHint|Qt::FramelessWindowHint);
  8.      //连接注册界面返回登录信号
  9.     connect(_reg_dlg, &RegisterDialog::sigSwitchLogin, this, &MainWindow::SlotSwitchLogin);
  10.     setCentralWidget(_reg_dlg);
  11.     _login_dlg->hide();
  12.     _reg_dlg->show();
  13. }

切换登录界面

  1. //从注册界面返回登录界面
  2. void MainWindow::SlotSwitchLogin()
  3. {
  4.     //创建一个CentralWidget, 并将其设置为MainWindow的中心部件
  5.     _login_dlg = new LoginDialog(this);
  6.     _login_dlg->setWindowFlags(Qt::CustomizeWindowHint|Qt::FramelessWindowHint);
  7.     setCentralWidget(_login_dlg);
  9.    _reg_dlg->hide();
  10.     _login_dlg->show();
  11.     //连接登录界面注册信号
  12.     connect(_login_dlg, &LoginDialog::switchRegister, this, &MainWindow::SlotSwitchReg);
  13.     //连接登录界面忘记密码信号
  14.     connect(_login_dlg, &LoginDialog::switchReset, this, &MainWindow::SlotSwitchReset);
  15. }

这样登录界面和注册界面的切换逻辑就写完了。

热门评论
点击查看更多评论 没有更多评论了,点击收起 展开评论

热门文章

  1. 解密定时器的实现细节
    喜欢(566) 浏览(1914)

  2. C++ 类的继承封装和多态
    喜欢(588) 浏览(2642)

  3. slice介绍和使用
    喜欢(521) 浏览(1770)

  4. Linux环境搭建和编码
    喜欢(594) 浏览(5676)

  5. windows环境搭建和vscode配置
    喜欢(587) 浏览(1723)

最新评论

  1. 双链表实现LRU算法 secondtonone1:双链表插入和删除节点是本篇的难点，多多练习即可。
  2. 线程安全的无锁栈 secondtonone1:谢谢支持，如果pop的次数大于push的次数是会让线程处于重试的，这个是测试用例，必须满足push和pop的次数相同，实际情况不会这么使用。栈的设计没有问题。
  3. 再谈单例模式 secondtonone1:是的，C++11以后返回局部static变量对象能保证线程安全了。
  4. Linux环境搭建和编码 恋恋风辰:Linux环境下go的安装比较简单，可以不用设置GOPATH环境变量，后期我们学习go mod 之后就拜托了go文件目录的限制了。
  5. C++ 类的拷贝构造、赋值运算、单例模式 secondtonone1:好的，已修复。

其他链接

  1. GitHub
  2. 个人博客
  3. 博客园
  4. CSDN

个人公众号

个人微信