QT6 C++ 高仿QQ -- 4. 注册新用户，验证码防刷，自定义QLineEdit，自定义流式编辑框，包裹字体图标，提示信息，功能按钮

概述

接下来将从即时通信的使用流程进行各个UI和功能的介绍，本节为启动系统后注册新用户功能，效果如图示:

UI布局

本节内容比较简单，有一定QT基础的应该很容易看懂创建新用户对话框的布局，如下图示：

自定义编辑框说明

现在比较流行APP式的流式布局，看起来的效果如最前面的图示，在编辑框中包住了：

• 1. 左侧字体图标；
• 2. 编辑提示文本移动到字体图标右侧；
• 3. 编辑输入内容也要在字体图标右侧；
• 4. 最后有功能按钮；
• 5. 最后的功能按钮与前面三个部件有个伸缩弹簧，在窗口变宽时，功能按钮横向拉伸到最右侧，使布局看起来比较美观，如下：
     

主要代码

//创建用户名输入框
void RegisterDialog::createUserNameEdit()
{
    //创建垂直布局
    auto layout = new QHBoxLayout();

    //左边字体图标lable
    auto label = new QLabel();
    QPixmap pix = IconHelper::getPixmap("#b3b3b3", 0xf2c0, 18, 20, 20);//字体图标: fa-user-o 0xf2c0 灰色
    label->setPixmap(pix);

    //创建右边的按钮
    auto btnCheckName = new QPushButton(tr("name check"));
    btnCheckName->setCheckable(true);
    btnCheckName->setCursor(Qt::PointingHandCursor);
    btnCheckName->setStyleSheet("background: transparent; border-style:none; color: blue");    //设置按钮 透明背景, 无边框, 字体颜色 蓝色
    connect(btnCheckName, &QPushButton::clicked, this, &RegisterDialog::onCheckUser);          //请求重名检查

    //重名检查结果
    userCheckResultLabel_ = new QLabel();
    userCheckResultLabel_->setStyleSheet("background: transparent; border-style:none;");    //设置按钮 透明背景, 无边框, 字体颜色 蓝色

    //将字体图标，功能按钮添加到layout中
    layout->addWidget(label);           //添加左边图标
    layout->addStretch();               //添加弹簧
    layout->addWidget(userCheckResultLabel_);     //添加重名检查结果lable
    layout->addWidget(btnCheckName);    //添加右边按钮
    layout->setContentsMargins(5, 0, 5, 0); //设置边距: 左 上 右 下

    //将布局添加到按钮中
    ui->userNameEdit->setLayout(layout);
    ui->userNameEdit->setPlaceholderText(tr("user name"));
    ui->userNameEdit->setStyleSheet("height: 40px; ");
    ui->userNameEdit->setTextMargins(25, 0, 0, 0);      //设置编辑框文本显示左边距
}

服务器返回的图形验证码的显示

要说这里还有什么可以谈谈的QT使用技术，那就是注册新用户时防止DOS攻击服务器的验证码显示，服务器将验证码图标进行base64编码后字符串发送给客户端，客户端收到后QPixmap从base64编码构建后显示即可，如下

// 图形验证码请求结果的处理函数 将 base64的png数据转为图片显示在UI上
void RegisterDialog::onImageCodeResult(bool result, QString requestId, QString base64Png)
{
    if (true != result) {
        QMessageBox msg;
        msg.setText(tr("Failed to request image code"));
        msg.setStandardButtons(QMessageBox::Yes);
        msg.exec();
        return;
    }

    if (requestId != requestId_) {
        QMessageBox msg;
        msg.setText(tr("Do not request too fast"));
        msg.setStandardButtons(QMessageBox::Yes);
        msg.exec();
        return;
    }

    QPixmap image;
    image.loadFromData(QByteArray::fromBase64(base64Png.toLocal8Bit()));
    imageCodeLabel_->setPixmap(image); //将图片放入label，使用setPixmap,注意指针*img
}

其他类似对话框，样式类似，不再赘述，效果展示如下

• 用户登录
• 修改密码
• 重置密码
• 忘记密码