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

发布于：2025-02-11 ⋅ 阅读:(50) ⋅ 点赞:(0)

前言

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界面设计和美化、图形界面绘制、控件布局设计以及一些实际功能的逻辑算法，对于初学者来说是非常友好的，是一个适合入门的项目。但还不够完美，有待进一步的完善。文笔不好请见谅，要是有问题欢迎在评论区留言或者私信我，也欢迎指出我的不足，感谢观看。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布