Qt5 简易注册界面

  对于下图中学堂在线官网上注册窗口，这种简单的图形化界面，Qt的实现也是较为简单的。本文将详细讲解基于Qt的注册界面的设计。

  新建项目的具体流程不再细述，在图形化界面分别创建4个label、3个LineEdit、2个RadioButton和1个PushButton按钮，组成一个简易的注册界面。该界面：点击提交按钮后将收集的数据提交数据库（这里简化为在控制台打印提交的数据）。三个单行输入框中，为输入数据时，会有提示词；输入密码时会有隐私保护；电话号码限定在11位。

//设置第一个单行输入框，显示提示信息、并自动显示清除按钮
ui->lineEdit_name->setPlaceholderText("请输入姓名");
ui->lineEdit_name->setClearButtonEnabled(true);

//设置第二个单行输入框，显示提示信息、回显方式输入字符隐藏以及自动显示清除按钮
ui->lineEdit_password->setPlaceholderText("请输入密码");
ui->lineEdit_password->setEchoMode(QLineEdit::Password);
ui->lineEdit_password->setClearButtonEnabled(true);
//设置第三个单行输入框，显示提示信息、自动显示清除按钮以及设置输入内容格式约束
ui->lineEdit_phone->setPlaceholderText("请输入电话号码");
ui->lineEdit_phone->setInputMask("000-0000-0000");
ui->lineEdit_phone->setClearButtonEnabled(true);

对于提交按钮，按照图1中选择PushButton对应的槽函数，单击“提交”，触发下列代码：

void Widget::on_pushButton_submit_clicked()
{
    QString gender = ui->radioButton_male->isChecked()?"男":"女";
    qDebug()<<"姓名："<<ui->lineEdit_name->text()
           <<"性别："<<gender
          <<"密码："<<ui->lineEdit_password->text()
         <<"电话："<<ui->lineEdit_phone->text();
}

上图还是不够美观，将界面一分为二，左侧插入图片，右侧作为注册界面：

QPixmap pixmap(":/imge/synchronization.png");
ui->label_imge->setPixmap(pixmap);
ui->label_imge->setScaledContents(true);

//对于窗口标题及窗口图片也进行优化
QIcon icon(":/imge/dog.png");
this->setWindowIcon(icon);
this->setWindowTitle("Register");