Qt从入门到入土（七）-实现炫酷的登录注册界面（下）

前言

Qt从入门到入土（六）-实现炫酷的登录注册界面（上）主要讲了如何使用QSS样式表进行登录注册的界面设计，本篇文章将介绍如何对登录注册界面进行整体控件的布局，界面的切换以及实现登录、记住密码等功能。

创建登录页面

QWidget *Dialog::createLoginPage()
{
QWidget* w=new QWidget(this);
m_usernameEdit=new QLineEdit();
m_passwordEdit=new QLineEdit();
m_remPswChk=new QCheckBox("记住密码");
m_goRgeBtn=new QPushButton("没有账号？去注册");
m_loginBtn=new QPushButton("登录");
//水平布局
QHBoxLayout* hlayout=new QHBoxLayout();
hlayout->addWidget(m_remPswChk);
hlayout->addWidget(m_goRgeBtn);
//垂直布局
QVBoxLayout* vlayout=new QVBoxLayout(w);
vlayout->addWidget(m_usernameEdit);
vlayout->addWidget(m_passwordEdit);
vlayout->addLayout(hlayout);
vlayout->addWidget(m_loginBtn);
return w;
}

初始化登录页面

//创建登录页面
QWidget* loginPage=createLoginPage();
loginPage->setParent(this);

//移动登录页面到合适位置
loginPage->move(462,185);

创建注册页面

QWidget *Dialog::createRegPage()
{
QWidget* w=new QWidget;
m_reg_usernameEdit=new QLineEdit;
m_reg_pwdEdit=new QLineEdit;
m_reg_rePwdEdit=new QLineEdit;
m_goLoginBtn=new QPushButton("去登陆");
m_regBtn=new QPushButton("注册");

//水平布局
QHBoxLayout* hlayout=new QHBoxLayout;
hlayout->addWidget(m_goLoginBtn);
hlayout->addWidget(m_regBtn);

//垂直布局
QVBoxLayout* vlayout=new QVBoxLayout(w);
vlayout->addWidget(m_reg_usernameEdit);
vlayout->addWidget(m_reg_pwdEdit);
vlayout->addWidget(m_reg_rePwdEdit);
vlayout->addLayout(hlayout);

return w;
}

初始化注册页面

//创建注册页面
QWidget* regPage=createRegPage();
regPage->setParent(this);
regPage->move(462,185);

堆栈窗口

使用QStackedWidget来存放登录和注册页面从而方便实现交互

//创建堆栈窗口
QStackedWidget* stackWidget=new QStackedWidget(this);
stackWidget->addWidget(createLoginPage()); //默认是这个窗口
stackWidget->addWidget(createRegPage());
stackWidget->setGeometry(455,150,200,240);

登录和注册页面交互

//与登录页面建立联系
connect(m_goLoginBtn,&QPushButton::clicked,[this]()
{
this->m_stk->setCurrentIndex(0); //设置当前堆栈窗口索引
});

//与注册页面建立联系
connect(m_goRgeBtn,&QPushButton::clicked,[this]()
{
this->m_stk->setCurrentIndex(1); //设置当前堆栈窗口索引
});

当前效果

到这一步整个登录注册界面基本上就已经完成了，接下来就是进行界面的美化操作。

登录注册页面美化

在QSS中对控件进行美化

美化文本框

qss中设置无边框文本框

QLineEdit
{
border:none;
border-bottom-width:1px;
border-bottom-color:rgb(223,223,223);
border-bottom-style:solid;
font-size:14px;
height:40px;
}

QLineEdit:hover
{
border-bottom-color:rgb(127,127,127);
}

设置文本提示

//设置文本提示
m_usernameEdit->setPlaceholderText("用户名");
m_passwordEdit->setPlaceholderText("密码");

//设置文本提示
m_reg_usernameEdit->setPlaceholderText("用户名");
m_reg_pwdEdit->setPlaceholderText("密码");
m_reg_rePwdEdit->setPlaceholderText("确认密码");

效果

设置对象名

设置对象名，便于在qss中对指定控件特殊化处理

//设置对象名
m_goLoginBtn->setObjectName("goLoginBtn");
m_regBtn->setObjectName("regBtn");

m_goRgeBtn->setObjectName("goRgeBtn");
m_remPswChk->setObjectName("remPswChk");
m_loginBtn->setObjectName("loginBtn");

美化复选框

QCheckBox
{
color:rgb(127,127,127);
}

QCheckBox:hover
{
color:rgb(120,45,255);
}

QCheckBox::indicator
{
border-image:url(":/Resources/images/uncheck.png");
}

QCheckBox::indicator:checked
{
border-image:url(":/Resources/images/check.png");
}

美化按钮

美化登录界面按钮

美化去注册按钮

QPushButton#goRgeBtn
{
border:none;
color:rgb(127,127,127);
}

QPushButton#goRgeBtn:hover
{
border:none;
color:rgb(120,45,255);
}

美化登录按钮

QPushButton#loginBtn
{
border:none;
border-radius:5px;
/*线性渐变*/
background:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(11,194,255), stop:1 rgb(0,182,250));
font-size:14px;
color:white;
height:30px;
}

QPushButton#loginBtn:hover
{
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 rgb(34,203,255), stop:1 rgb(26,194,251));
}

美化注册界面按钮

设置水平布局两控件间隔为0

hlayout->setSpacing(0);

qss对去登陆和注册按钮控件的美化

QPushButton#goLoginBtn,#regBtn
{
border:none;
color:white;
font-size:12px;
height:30px;
}
QPushButton#goLoginBtn
{
border-top-left-radius:5px;
background:rgb(255,58,5);
width:120px;
}

QPushButton#goLoginBtn:hover
{
background:rgb(227,0,0);
}

QPushButton#regBtn
{
border-bottom-right-radius:5px;
background:rgb(6,255,238);
}

QPushButton#regBtn:hover
{
background:rgb(5,227,212);
}

响应登录和注册

使用QLabel来设置登录注册提示（登录注册失败、登录注册成功、账号密码输入错误等等）

初始化提示标签

//初始化提示标签
m_tipLab=new QLabel(this);
//设置位置
m_tipLab->setGeometry(454,375,200,30);
//设置居中显示
m_tipLab->setAlignment(Qt::AlignCenter)
//设置颜色
m_tipLab->setStyleSheet("color:red;");

初始化定时器

主要为了实现提示信息过段时间消失

//初始化定时器
m_timer=new QTimer(this);
//设置定时器结束
m_timer->callOnTimeout([this](){
m_tipLab->clear();
m_timer->stop();
});

提示信息函数

void Dialog::setTipMsg(const QString &msg, int msec)
{
m_tipLab->setText(msg);
//判断是否连续点击
if(m_timer->isActive())
m_timer->stop();
m_timer->start(msec);
}

设置密码掩膜

//设置密码掩膜
m_reg_pwdEdit->setEchoMode(QLineEdit::Password);
m_reg_rePwdEdit->setEchoMode(QLineEdit::Password);

m_passwordEdit->setEchoMode(QLineEdit::Password);

登录与注册响应函数

void Dialog::onLogin()
{
//账号密码检查
auto username=m_usernameEdit->text();
auto password=m_passwordEdit->text();

if(username.isEmpty()||password.isEmpty())
{
setTipMsg("账号或密码不能为空！");
return;
}
if(username.size()<5)
{
setTipMsg("账号长度有误！");
return;
}
if(password.size()<8)
{
setTipMsg("密码长度有误！");
return;
}
}

void Dialog::onRegister()
{
//账号密码检查
auto username=m_reg_usernameEdit->text();
auto password=m_reg_pwdEdit->text();
auto rePsw=m_reg_rePwdEdit->text();

if(username.isEmpty()||password.isEmpty())
{
setTipMsg("账号或密码不能为空！");
return;
}
if(username.size()<5)
{
setTipMsg("账号长度有误！");
return;
}
if(password.size()<8)
{
setTipMsg("密码长度有误！");
return;
}
if(password!=rePsw)
{
setTipMsg("两次密码输入不一致!");
return;
}

}

把登录按钮设为焦点

本程序默认关闭按钮是焦点，也就是说按下回车登录界面就会关闭，所以应该要把登录按钮设置为焦点。

//取消焦点
closeBtn->setFocusPolicy(Qt::NoFocus);

//取消焦点
m_goRgeBtn->setFocusPolicy(Qt::NoFocus);
//设置焦点
m_loginBtn->setDefault(true);

登录成功后进入主界面

//账号密码与设定一致时
if(username=="admin"&&password=="admin")
this->accept();

//登录

{
Dialog w;
auto ret=w.exec();
if(ret!=QDialog::Accepted)
return 0;
}
//登录成功进入主窗口
QWidget homeW;
homeW.show();

保存登录成功的账号密码到应用程序

qApp->setProperty("username",username);
qApp->setProperty("password",password);

qInfo()<<qApp->property("username")<<qApp->property("password");

实现记住密码以及保存账号和密码到指定文件

设置应用程序名

qApp->setApplicationName("LogRegAPP");

使用QSettings来存储和访问应用程序的设置和配置

QSettings settings(filepath,QSettings::Format::IniFormat);
//setValue方法用于将键值对存储到配置文件中
settings.setValue("remPswChk",m_remPswChk->isChecked());
settings.setValue("username",username);
settings.setValue("password",password);

使用QStandardPaths来获取应用程序本地数据位置路径

auto path=QStandardPaths::writableLocation(QStandardPaths::AppLocalDataLocation);

生成配置文件路径

QString configPath()
{
//如果成功则返回到本地应用程序位置路径，否则返回当前文件夹
auto path=QStandardPaths::writableLocation(QStandardPaths::AppLocalDataLocation);
QDir dir;
if(dir.mkpath(path))
{
if(dir.cd(path))
{
return dir.path()+"/"+"LogRegAPP.ini";
}
}
return "LogRegAPP.ini";
}

读取配置文件中的信息

//获取配置文件中的信息
QSettings settings(configPath(),QSettings::Format::IniFormat);
//如果settings.value()返回的值不是空，它将被转换为true，否则为false。
m_remPswChk->setChecked(settings.value("remPswChk",false).toBool());
//如果找不到该设置，它将默认为一个空字符串""。
m_usernameEdit->setText(settings.value("username","").toString());
if (m_remPswChk->isChecked()) {
m_passwordEdit->setText(settings.value("password", "").toString());
}