前言
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());
}
整体效果
点击记住密码，当每次登录完成后，下次登陆就会自动从配置文件中读取信息填写账号密码，到这里，这个项目就大体完成了，但还是有需要完善的地方，如账号密码安全性、支持多个账号等等，后续有时间会继续完善的。
总结
本次登录注册项目，涉及到了qss界面设计和美化、图形界面绘制、控件布局设计以及一些实际功能的逻辑算法，对于初学者来说是非常友好的，是一个适合入门的项目。但还不够完美，有待进一步的完善。文笔不好请见谅，要是有问题欢迎在评论区留言或者私信我，也欢迎指出我的不足，感谢观看。