【Qt应用】Qt编写简易登录注册界面

news2024/9/21 14:40:49

目录

引言

一、准备工作

二、设计思路

2.1 登录 

2.2 注册

三、登录功能 

3.1 创建账号与密码输入框 

3.2 设置密码输入框格式

3.2.1 初始

3.2.2 创建一个显示隐藏按钮

3.2.3 信号与槽函数 

3.3 创建登录按钮

3.4 创建可选功能

四、注册功能

4.1 账号和密码输入框

4.2 设置密码输入框格式

4.2.1 设置输入框为密码样式

4.2.2 创建显示与隐藏密码按钮

4.2.3 设置按钮样式

五、优化

5.1 账号密码输入框动态显示个数

5.1.1 创建QLabel

5.1.2 连接信号与槽函数 

5.1.3 槽函数实现 

5.2 设置窗口背景

5.3 实现效果

结语 

引言

在开发桌面应用程序时，登录和注册界面是常见的需求，它们不仅提供了用户身份验证的功能，还是用户体验的重要组成部分。Qt，作为跨平台的C++图形用户界面应用程序开发框架，凭借其丰富的控件集和高效的开发环境，成为实现这类界面的理想选择。本文将详细介绍如何使用Qt编写一个包含登录和注册功能的界面，涵盖准备工作、设计思路、功能实现及测试调试等方面。 

一、准备工作

在开始编写代码之前，确保你的开发环境中已经安装了Qt和相应的Qt Creator IDE。Qt Creator是Qt的官方集成开发环境，提供了代码编辑、项目管理、调试等一系列开发工具。

  1. 下载并安装Qt

    访问Qt官网下载适合你的操作系统的Qt版本。安装时，请确保选择安装Qt库（如Qt Widgets模块）和Qt Creator IDE。

  2. 配置Qt Creator

    安装完成后，打开Qt Creator，通过“工具”->“选项”->“构建和运行”->“Qt版本”来检查Qt版本是否正确配置。同时，确保编译器（如MinGW或MSVC）也已正确设置。

  3. 创建新项目

    在Qt Creator中，选择“文件”->“新建文件或项目”，然后选择“应用程序”下的“Qt Widgets Application”。填写项目名称（如“LoginRegisterApp”），选择保存位置，并选择合适的Qt版本。点击“下一步”进行项目配置，最后点击“完成”创建项目。

二、设计思路

在设计登录和注册界面之前，我们需要明确界面的功能和布局需求。

2.1 登录 

  • 包含账号和密码输入框。
  • 包含一个登录按钮，用于提交登录信息。
  • 包含记住密码和自动登录的可选框功能。
  • 提供登录失败与登录成功提示。

2.2 注册

  • 包含账号、密码、确认密码、邮箱等输入框。
  • 包含一个注册按钮，用于提交注册信息。
  • 验证两次输入的密码是否一致等。
  • 提供注册成功或失败的提示。

为了简化开发，我们可以考虑使用QStackedWidget来在同一个窗口中切换登录和注册界面，或者设计为两个独立的窗口。这里，我们选择使用QStackedWidget来切换界面。

三、登录功能 

3.1 创建账号与密码输入框 

这里创建了一个QGroupBox控件去管理用户名与密码的控件

//创建登录的QGroupBox
QGroupBox *groupbox1 = new QGroupBox(this);
QVBoxLayout *layout1 = new QVBoxLayout(groupbox1);
QLabel *account = new QLabel("账号：", groupbox1);
accountLineEdit = new QLineEdit(groupbox1);
QLabel *password = new QLabel("密码：", groupbox1);
passwordLineEdit = new QLineEdit(groupbox1);

此外，还可以设置两个QLineEdit的占位符文本

// 设置占位符属性(默认文本)
accountLineEdit->setPlaceholderText("请输入账号...");
passwordLineEdit->setPlaceholderText("请输入密码...");

3.2 设置密码输入框格式

3.2.1 初始

初始时密码输入设置为小黑点样式

passwordLineEdit->setEchoMode(QLineEdit::Password);
3.2.2 创建一个显示隐藏按钮

创建一个QPushButton按钮，并对其图标、位置、大小与背景进行设置

// 创建密码显示或隐藏按钮
passwordShow = new QPushButton(this);
// 设置图标
passwordShow->setIcon(QIcon(":/image/show.png"));
// 设置位置与大小
passwordShow->resize(30, 30);
passwordShow->move(350, 85);
// 设置透明背景
passwordShow->setStyleSheet("QPushButton { background-color: transparent; }");
3.2.3 信号与槽函数 

连接按钮的点击信号与槽函数：

// 连接信号与槽函数
connect(passwordShow, &QPushButton::clicked, this, &Widget::passwordShowHide);

槽函数的实现：

//密码输入框密码显示与隐藏槽函数
void Widget::passwordShowHide()
{
    QPushButton *temp = qobject_cast<QPushButton *>(sender());
    QLineEdit *temp2;
    if(temp == passwordShow)
    {
        temp2 = passwordLineEdit;
    }
    else if(temp == passwordShow2)
    {
        temp2 = passwordLineEdit2;
    }
    else
    {
        temp2 = passwordLineEdit3;
    }

    if (temp2->echoMode() == QLineEdit::Password) {
        temp2->setEchoMode(QLineEdit::Normal); // 切换为明文显示
        temp->setIcon(QIcon(":/image/hide.png"));
    } else {
        temp2->setEchoMode(QLineEdit::Password); // 切换回密码显示
        temp->setIcon(QIcon(":/image/show.png"));
    }
}

3.3 创建登录按钮

QPushButton *loginButton = new QPushButton("登录", wid);

 其中wid参数是其父窗口指针 

3.4 创建可选功能

通过创建一个QGroupBox对两个复选框QCheckBox进行管理

//创建信息可选项的QGroupBox
QGroupBox *groupbox2 = new QGroupBox(this);
QHBoxLayout *layout2 = new QHBoxLayout(groupbox2);
//创建复选框
QCheckBox *memory = new QCheckBox("记住密码", groupbox2);
QCheckBox *automate = new QCheckBox("自动登录", groupbox2);
//将创建的复选框加入到布局中
layout2->addWidget(memory);
layout2->addWidget(automate);

四、注册功能

4.1 账号和密码输入框

//创建注册的QGroupBox
QGroupBox *groupbox4 = new QGroupBox(this);
QVBoxLayout *layout4 = new QVBoxLayout(groupbox4);
QLabel *account2 = new QLabel("账号：", groupbox4);
accountLineEdit2 = new QLineEdit(groupbox4);
QLabel *password2 = new QLabel("设置密码：", groupbox4);
passwordLineEdit2 = new QLineEdit(groupbox4);
QLabel *password3 = new QLabel("确认密码：", groupbox4);
passwordLineEdit3 = new QLineEdit(groupbox4);

此外，还可设置占位符文本：

// 设置占位符属性(默认文本)
accountLineEdit2->setPlaceholderText("请输入账号...");
passwordLineEdit2->setPlaceholderText("请输入密码...");
passwordLineEdit3->setPlaceholderText("请再次输入密码...");

4.2 设置密码输入框格式

4.2.1 设置输入框为密码样式
// 设置echoMode为Password，使得输入时显示小黑点或星号
passwordLineEdit2->setEchoMode(QLineEdit::Password);
passwordLineEdit3->setEchoMode(QLineEdit::Password);
4.2.2 创建显示与隐藏密码按钮
// 创建密码显示或隐藏按钮
passwordShow2 = new QPushButton(this);
passwordShow3 = new QPushButton(this);
4.2.3 设置按钮样式
// 设置图标
passwordShow2->setIcon(QIcon(":/image/show.png"));
passwordShow3->setIcon(QIcon(":/image/show.png"));
// 设置位置与大小
passwordShow2->resize(30, 30);
passwordShow2->move(350, 83);
passwordShow3->resize(30, 30);
passwordShow3->move(350, 132);
// 设置透明背景
passwordShow2->setStyleSheet("QPushButton { background-color: transparent; }");
passwordShow3->setStyleSheet("QPushButton { background-color: transparent; }");
// 连接信号与槽函数
connect(passwordShow2, &QPushButton::clicked, this, &Widget::passwordShowHide);
connect(passwordShow3, &QPushButton::clicked, this, &Widget::passwordShowHide);

五、优化

5.1 账号密码输入框动态显示个数

账号密码在输入时应该实时反映给槽函数

5.1.1 创建QLabel

登录界面创建两个QLabel作为个数显示，并对其属性进行设置

//创建两个QLabel作为账号密码输入框的动态显示文本数量
display1 = new QLabel("0/11", accountLineEdit);
display2 = new QLabel("0/8", passwordLineEdit);
//设置对齐方式
display1->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
display2->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
//设置大小
display1->setFixedSize(40, 40);
//设置QLabel的样式
display1->setStyleSheet(QString::fromLocal8Bit("border:none;color: #cccccc;font: 10pt \"微软雅黑\";"));
display2->setStyleSheet(QString::fromLocal8Bit("border:none;color: #cccccc;font: 10pt \"微软雅黑\";"));
//设置QLabel的在QLineEdit中的位置
display1->move(310, -10);
display2->move(310, 2);

注册界面创建三个QLabel作为个数显示，并对其属性进行设置

//创建三个QLabel作为账号密码输入框的动态显示文本数量
display3 = new QLabel("0/11", accountLineEdit2);
display4 = new QLabel("0/8", passwordLineEdit2);
display5 = new QLabel("0/8", passwordLineEdit3);
//设置对齐方式
display3->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
display4->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
display5->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
//设置大小
display3->setFixedSize(40, 40);
display4->setFixedSize(40, 40);
display5->setFixedSize(40, 40);
//设置QLabel的样式
display3->setStyleSheet(QString::fromLocal8Bit("border:none;color: #cccccc;font: 10pt \"微软雅黑\";"));
display4->setStyleSheet(QString::fromLocal8Bit("border:none;color: #cccccc;font: 10pt \"微软雅黑\";"));
display5->setStyleSheet(QString::fromLocal8Bit("border:none;color: #cccccc;font: 10pt \"微软雅黑\";"));
//设置QLabel的在QLineEdit中的位置
display3->move(310, -10);
display4->move(290, -10);
display5->move(290, -10);
5.1.2 连接信号与槽函数 
connect(accountLineEdit, &QLineEdit::textEdited, this, &Widget::accountTextChange);
connect(passwordLineEdit, &QLineEdit::textEdited, this, &Widget::passwordTextChange);

connect(accountLineEdit2, &QLineEdit::textEdited, this, &Widget::accountTextChange);
connect(passwordLineEdit2, &QLineEdit::textEdited, this, &Widget::passwordTextChange);
connect(passwordLineEdit3, &QLineEdit::textEdited, this, &Widget::passwordTextChange);
5.1.3 槽函数实现 

账号输入框文本变化槽函数： 

//登录注册界面的账号输入框文本变化槽函数
void Widget::accountTextChange(const QString& text)
{
    //获取文本变化的输入框的指针
    QLineEdit *temp = qobject_cast<QLineEdit *>(sender());
    QLabel *temp2;
    if(temp == accountLineEdit)
    {
        temp2 = display1;
    }
    else
    {
        temp2 = display3;
    }
    int len = text.length();
    if(len > 11)
    {
        //将文本回退到未超过上限时的样子
        QString text1 = text;
        //移除最后一个字符
        text1.chop(1);
        temp->setText(text1);

        QMessageBox::warning(this, "警告", "账号位数超过上限!");
    }
    else if(len == 11)
    {
        temp2->setText(QString("%1/11").arg(len));
        temp2->setStyleSheet(QString::fromLocal8Bit("color: #1afa29;font: 10pt \"微软雅黑\";"));
    }
    else
    {
        temp2->setText(QString("%1/11").arg(len));
        temp2->setStyleSheet(QString::fromLocal8Bit("color: #FF5050;font: 10pt \"微软雅黑\";"));
    }
}

密码输入框文本变化槽函数：

//登录注册界面的密码输入框文本变化槽函数
void Widget::passwordTextChange(const QString& text)
{
    int len = text.length();
    //获取文本变化的输入框的指针
    QLineEdit *temp = qobject_cast<QLineEdit *>(sender());
    QLabel *temp2;
    if(temp == passwordLineEdit)
    {
        temp2 = display2;
    }
    else if(temp == passwordLineEdit2)
    {
        temp2 = display4;
    }
    else
    {
        temp2 = display5;
    }
    if(len < 8)
    {
        temp2->setText(QString("%1/8").arg(len));
        temp2->setStyleSheet(QString::fromLocal8Bit("color: #FF5050;font: 10pt \"微软雅黑\";"));
    }
    else if(len >= 8 && len <= 16)
    {
        int l = temp2->text().length();
        //if(display2->text().right(1).toInt() != 6)
        if(temp2->text().at(l - 1) != '6')
        {
            temp2->resize(50, 40);
            temp2->move(300, -10);
        }
        temp2->setText(QString("%1/16").arg(len));
        temp2->setStyleSheet(QString::fromLocal8Bit("color: #1afa29;font: 10pt \"微软雅黑\";"));
    }
    else
    {
        //将文本回退到未超过上限时的样子
        QString text1 = text;
        //移除最后一个字符
        text1.chop(1);
        temp->setText(text1);

        QMessageBox::warning(this, "警告", "密码位数超过上限!");
    }
}

5.2 设置窗口背景

QWidget窗口的背景设置可以通过重写paintEvent函数实现：

//重写绘制函数
void Widget::paintEvent(QPaintEvent *event)
{
    QWidget::paintEvent(event);

    //创建QPainter绘制对象
    QPainter painter(this);
    //加载并缩放图片
    QPixmap pixmap(":/image/2.jpg");
    pixmap = pixmap.scaled(this->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation); //保持宽高比并使用平滑变化
    //绘制图片
    painter.drawPixmap(this->rect(), pixmap);
}

5.3 实现效果

结语 

        通过本文，我们详细介绍了如何使用Qt编写一个包含登录和注册功能的界面。从准备工作、设计思路、功能实现等等，我们涵盖了开发过程中的主要步骤。当然，这只是一个基础示例，实际应用中可能需要考虑更多的细节，如用户权限管理、会话保持、界面美化等。

        Qt框架的强大之处在于其丰富的功能和灵活性，你可以根据自己的需求，进一步扩展和定制你的应用程序。例如，你可以使用Qt Charts模块来添加图表功能，使用Qt Multimedia模块来处理音视频数据，或者使用Qt Network模块来实现网络通信等。希望本文能为你提供一个良好的起点，让你在Qt开发的道路上越走越远。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2127652.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Go】深入探索Go语言中运算符

【Go】深入探索Go语言中运算符

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
路基边坡自动化监测解决方案

路基边坡自动化监测解决方案

物联网云平台 平台登录--用户登录 输入网址&#xff1a;http://yun.sj2000.org.cn&#xff0c;进入系统登录界面&#xff0c;输入用户名及密码后进入系统平台。 设备详情--设备概览 登录系统平台后&#xff0c;用户可在界面左侧看到系统项目栏和子项目选项&#xff0c;登陆的…
阅读更多...
【Python爬虫系列】_018.多线程与多进程

【Python爬虫系列】_018.多线程与多进程

我 的 个 人 主 页：👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 ：👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 ：👉👉 Python项目虚拟环境(超详细讲解) 👈👈 PyQt5 系 列 教 程：👉👉 Python GUI(PyQt5)文章合集 👈👈 Oracle数…
阅读更多...
3. 进阶指南：自定义 Prompt 提升大模型解题能力

3. 进阶指南：自定义 Prompt 提升大模型解题能力

怎么判断 Prompt 的好坏&#xff0c;有什么问题有着标准答案么&#xff1f; 答&#xff1a;让大模型求解数学问题。 李宏毅老师的 HW4 正好提到了有关数学问题的 Prompt&#xff0c;所以我决定中间插一篇这样的文章。通过本文你将&#xff1a; 了解各种 Prompt 如何影响大型语言…
阅读更多...
基于asp.net电子邮件系统设计与实现

基于asp.net电子邮件系统设计与实现

1 引言 1&#xff0e;1 电子邮件介绍 电子邮件(简称E-mai1)又称电子信箱、电子邮政&#xff0c;它是—种用电子手段提供信息交换的通信方式。它是全球多种网络上使用最普遍的一项服务。这种非交互式的通信,加速了信息的交流及数据传送,它是—个简易、快速的方法。通过连接全…
阅读更多...
个人用户如何有效利用固态硬盘数据恢复工具

个人用户如何有效利用固态硬盘数据恢复工具

固态硬盘相较于机械硬盘来说更为小巧&#xff0c;所以很多人选择使用固态硬盘来进行数据的存储。这些存储设备都可能会遇到一些意外导致的数据丢失情况。好在现在的科技比较发达&#xff0c;这次我们来聊一聊有哪些固态硬盘数据恢复工具可以解决这个问题吧。 1.福晰数据恢复 …
阅读更多...
Sentinel 高级

Sentinel 高级

一、请求限流 1.介绍 处理并发量大时资源耗尽问题 Sentinel的请求限流功能主要体现在对QPS&#xff08;每秒查询率&#xff09;和线程数的控制上。当某个API接口或服务的请求量达到设定的QPS阈值时&#xff0c;Sentinel会触发限流规则&#xff0c;对这些超出阈值的请求进行限…
阅读更多...
Selenium自动化测试面试题合集！

Selenium自动化测试面试题合集！

1、什么是自动化测试、自动化测试的优势是什么&#xff1f; 通过工具或脚本代替手工测试执行过程的测试都叫自动化测试。 自动化测试的优势&#xff1a; 1、减少回归测试成本 2、减少兼容性测试成本 3、提高测试反馈速度 4、提高测试覆盖率 5、让测试工程师做更有意义的…
阅读更多...
官宣：Zilliz 在亚马逊云科技中国区正式开服！

官宣：Zilliz 在亚马逊云科技中国区正式开服！

01 Zilliz Cloud 正式上线亚马逊云科技宁夏区服务 9 月 4 日&#xff0c;Zilliz 正式官宣&#xff0c; Zilliz Cloud 正式上线亚马逊云科技在宁夏区的云服务。至此&#xff0c;Zilliz Cloud 已实现全球 5 大云 19 个节点 的全覆盖&#xff0c;成为全球首个提供海内外多云服务的…
阅读更多...
读构建可扩展分布式系统：方法与实践01可扩展系统简介

读构建可扩展分布式系统：方法与实践01可扩展系统简介

1. 简介 1.1. 在过去20年里&#xff0c;软件系统的规模、复杂性和容量都出现了前所未有的增长 1.2. 代码是容器、数据库、消息传递系统和其他组件的一部分&#xff0c;通过调用API和构建指令&#xff0c;构成你的应用程序 1.3. 可扩展(scalable)是软件工程中用来描述软件系统…
阅读更多...
WinCC Professional 变量的线性转换

WinCC Professional 变量的线性转换

把PLC中的变量进行线性转换的显示到WinCC Profession画面上&#xff0c;操作步骤如下&#xff1a; 1.在PLC的DB块中创建三个变量&#xff0c;如下所示&#xff1a; 2.在WinCC RT PRO的变量表中也同样创建三个变量&#xff0c;如下所示&#xff1a; 3.对WinCC RT PRO变量表中的…
阅读更多...
3个热门、好用、功能强大的C#开源帮助工具类

3个热门、好用、功能强大的C#开源帮助工具类

下面推荐3个热门、好用、功能强大的C#开源帮助工具类。 1、Z.ExtensionMethods Z.ExtensionMethods是由zzzprojects公司开发并维护的一款开源库&#xff0c;为.NET开发人员提供一系列实用的扩展方法&#xff0c;可以减少重复劳动、提高开发效率&#xff0c;支持.NET Framewor…
阅读更多...
快递柜电子锁的使用

快递柜电子锁的使用

一、快递柜电子锁的介绍 主要特点&#xff1a; 1、电源需求&#xff1a;该电子锁需要12伏特的直流电源供电&#xff0c;电流限制在2安培&#xff0c;“通电时间≤3S&#xff08;不可长时间通电&#xff09;”&#xff0c;以防止因长时间通电导致的损坏或安全隐患。 2、负荷&am…
阅读更多...
DeepGaitV2：显式时间建模，CNN和Transformer在步态任务上的影响

DeepGaitV2：显式时间建模，CNN和Transformer在步态任务上的影响

Exploring Deep Models for Practical Gait Recognition 论文链接&#xff1a;http://arxiv.org/abs/2303.03301 代码链接&#xff1a;https://github.com/ShiqiYu/OpenGait 一、摘要 文中提出了一个统一的视角&#xff0c;探讨如何构建用于最先进的户外步态识别的深度模型&…
阅读更多...
二层交换机如何工作

二层交换机如何工作

在学习之前&#xff0c;先提出几个问题&#xff1a; 二层交换机在哪里&#xff1f;二层交换机是怎么转发数据的&#xff1f;二层交换机如何生成mac地址表&#xff1f;二层交换机怎么去维护mac地址表&#xff1f; 二层交换机&#xff1a;二层交换机是工作在ISO/OSI模型第二层—…
阅读更多...
力扣最热一百题——相交链表

力扣最热一百题——相交链表

题目链接&#xff1a;160. 相交链表 - 力扣&#xff08;LeetCode&#xff09; 注&#xff1a;下述题目描述和示例均来自力扣 题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返…
阅读更多...
【LabVIEW学习篇 - 23】：简单状态机

【LabVIEW学习篇 - 23】：简单状态机

文章目录 简单状态机状态机的创建和了解状态机实现红绿灯 简单状态机 一个优秀的应用程序离不开好的程序框架&#xff0c;不仅要很好满足用户的功能需求&#xff0c;还要考虑到系统的稳定性、实时性、可扩展性、可维护性&#xff0c;执行效率等方面。借用一些成熟的设计框架&a…
阅读更多...
Jmeter终极线程组“Ultimate Thread Group“如何使用？

Jmeter终极线程组“Ultimate Thread Group“如何使用？

1、安装,点击"选项"&#xff0c;再点击"Plugins Manager"&#xff0c;下载"Custom Thread Groups" 2、添加"jpgc - Ultimate Thread Group" 3、"jpgc - Ultimate Thread Group"使用
阅读更多...
HarmonyOS开发5.0【骨架屏】 app界面制作

HarmonyOS开发5.0【骨架屏】 app界面制作

实现原理 1.定义组件和状态变量&#xff1a; 使用 Entry 和 Component 装饰器定义了一个名为 IvSkeleton 的组件。 定义了一个状态变量 translageX&#xff0c;初始值为 -100%&#xff0c;用于控制闪电效果的位置。 定义了两个数值变量 widthValue 和 heightValue&#xff0c;…
阅读更多...
wangeditor——cdn引入的形式创建一个简易版编辑器——js技能提升

wangeditor——cdn引入的形式创建一个简易版编辑器——js技能提升

昨天同事那边有个需求&#xff0c;就是要实现聊天功能&#xff0c;需要用到一个富文本编辑器&#xff0c;参考如下&#xff1a; 上面的这个效果图是博客园的评论输入框 最终使用wangEditor编辑器实现的效果如下&#xff1a; 只保留了个别的菜单&#xff1a; 默认模式的wangE…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023