Qt实现菠菜登录界面

简介: Qt实现菠菜登录界面

Qt实现菠菜登录界面

用qt实现一个登录界面,界面为不规则图形,加上qss美化,较传统登录界面更为美观。当用户输入时动态验证输入合法性,当点击登录时将用户名和密码存为json格式。

首先实现不规则图形的界面:

qt创建的对话框默认为方形界面,为了打造”高大上“的界面效果,将一张不规则的图片作为界面。这里采用菠菜网图,图片的圆形周围透明。在窗体的构造函数中设置:

GaoLoginDialog::GaoLoginDialog()
{
    QPixmap pixmap;
    pixmap.load(":/new/qss/bocai.png");
    resize(pixmap.size());//重绘窗体大小
    setMask(pixmap.mask());//设置遮罩效果
//QPixmap的mask函数获取图片自身的遮罩
//图片的透明部分实际上是一个遮罩
}

同时还需要重写paintEvent,在窗体上重绘图片(构造函数中并没有绘制图片到窗体上)。

void GaoLoginDialog::paintEvent(QPaintEvent *event)
{
    QPainter p(this);
    p.drawPixmap(0, 0, QPixmap(":/new/qss/bocai.png"));
}

至此就完成了不规则窗体:

当试图移动该窗体时发现不能移动,因此需要重写鼠标的移动和点击函数

void GaoLoginDialog::mousePressEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton) {
        //鼠标左键点击,记下当前点击位置相对于窗体左上角偏移值
        dragPosition = event->globalPos() - frameGeometry().topLeft();
        event->accept();
    }
    if (event->button() == Qt::RightButton) {
        close();//鼠标右键点击退出
    }
}
void GaoLoginDialog::mouseMoveEvent(QMouseEvent *event)
{
    if (event->buttons() & Qt::LeftButton) {
        //move函数的参数指窗体左上角的位置
        //因此用鼠标当前位置的值减去偏移值
        move(event->globalPos() - dragPosition);
        event->accept();
    }
}
/*
需要在gaologindialog.h中定义成员变量QPoint dragPosition;
*/

窗体可以正常移动。

接着通过布局在窗体上添加标签和编辑框等控件,与普通界面相同。这里通过qss对控件进行修饰

首先需要读取qss文件:

GaoLoginDialog w;
QFile qss(":/new/qss/qss.qss");
qss.open(QFile::ReadOnly);
//作用于GaoLoginDialog
w.setStyleSheet(qss.readAll());
w.show();

qss中定义相应控件的样式:

QPushButton {
    border-radius: 6px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #FFFAF0, stop: 1 #90EE90);
    font-size: 20px;
    font-color::rgb(255, 255, 255);
}
QPushButton:pressed {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #90EE90, stop: 1 #FFFAF0);
}
QLineEdit {
    selection-color: white;
    selection-background-color: green;
    background:transparent;
    border-width:1;
    border: 2px solid gray;
    border-radius: 5px;
    height: 27px;
    border-style:outset;
}

qss样式官方文档:https://doc.qt.io/qt-5/stylesheet-reference.html

定义完成后,可以发现所有的按钮和编辑框都具有了一定的样式。

对于标签,可以在其上添加图片,让其看起来更美观

QPixmap pixUserName;
QLabel *plbUserName = new QLabel();
pixUserName.load(":/new/qss/username.png");
plbUserName->setPixmap(pixUserName);

至此就完成了界面的绘制。效果图:

动态验证用户输入的合法性可以将编辑框textChanged信号与一个槽函数关联起来,这样,当编辑框文本发生变化即用户输入时,就触发信号进而执行槽函数。槽函数获取文本判断合法性:

connect(m_pleUserName, SIGNAL(textChanged(const QString &)), this, SLOT(userTextChange(const QString &)));
void GaoLoginDialog::userTextChange(const QString &text)
{
    if (text.length() >= 6 && text.length() <= 10) {
        //长度合法,编辑框边框为绿色
        m_pleUserName->setStyleSheet("QLineEdit {border : 2px solid green;}");
    } else {
        m_pleUserName->setStyleSheet("QLineEdit {border : 2px solid red;}");
    }
}

当点击登录按钮时,获取相应的用户名和密码,并存入json对象中:

void GaoLoginDialog::onClickYes()
{
    QJsonObject *pjsonObj = new QJsonObject();
    QString strName = m_pleUserName->text();
    QString strPass = m_plePassWord->text();
    pjsonObj->insert("username:", strName);
    pjsonObj->insert("password:", strPass);
    //jsonobj to VariantHash
    QVariantHash qvarhash = pjsonObj->toVariantHash();
    qDebug() << qvarhash;
    qDebug() << qvarhash.value("username:");
    qDebug() << qvarhash.value("password:");
}

这样就完成了一个简单的,既有美观又有交互的登录界面。

参考资料:

[1]陆文周.Qt5开发及实例[M].电子工业出版社:北京,2014.

源码地址:

https://gitee.com/gao-yuelong/qtdemo

Linux命令

ldd 用于打印程序或者库文件所依赖的共享库列表。


相关文章
|
2月前
|
SQL 关系型数据库 MySQL
qt登录界面简单制作,是真的保姆级别了!!!
qt登录界面简单制作,是真的保姆级别了!!!
|
存储 数据可视化 关系型数据库
QT实现登录界面(利用MySQL保存数据和邮箱辅助注册)
QT实现登录界面(利用MySQL保存数据和邮箱辅助注册)
QT实现登录界面(利用MySQL保存数据和邮箱辅助注册)
|
2月前
|
网络协议 C++
C++ Qt开发:QTcpSocket网络通信组件
`QTcpSocket`和`QTcpServer`是Qt中用于实现基于TCP(Transmission Control Protocol)通信的两个关键类。TCP是一种面向连接的协议,它提供可靠的、双向的、面向字节流的通信。这两个类允许Qt应用程序在网络上建立客户端和服务器之间的连接。Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用`QTcpSocket`组件实现基于TCP的网络通信功能。
67 8
C++ Qt开发:QTcpSocket网络通信组件
|
2月前
|
算法 编译器 Linux
【Qt4 部署】ARM系统上使用Qt 4 进行开发的QWS 等环境变量部署
【Qt4 部署】ARM系统上使用Qt 4 进行开发的QWS 等环境变量部署
58 0
|
11天前
|
数据安全/隐私保护 C++ 计算机视觉
Qt(C++)开发一款图片防盗用水印制作小工具
文本水印是一种常用的防盗用手段,可以将文本信息嵌入到图片、视频等文件中,用于识别和证明文件的版权归属。在数字化和网络化的时代,大量的原创作品容易被不法分子盗用或侵犯版权,因此加入文本水印成为了保护原创作品和维护知识产权的必要手段。 通常情况下,文本水印可以包含版权声明、制作者姓名、日期、网址等信息,以帮助识别文件的来源和版权归属。同时,为了增强防盗用效果,文本水印通常会采用字体、颜色、角度等多种组合方式,使得水印难以被删除或篡改,有效地降低了盗用意愿和风险。 开发人员可以使用图像处理技术和编程语言实现文本水印的功能,例如使用Qt的QPainter类进行文本绘制操作,将文本信息嵌入到图片中,
31 1
Qt(C++)开发一款图片防盗用水印制作小工具
|
26天前
|
关系型数据库 MySQL 项目管理
数据库大作业——基于qt开发的图书管理系统(四)项目目录的整理与绘制登录页面
数据库大作业——基于qt开发的图书管理系统(四)项目目录的整理与绘制登录页面
|
26天前
|
SQL 关系型数据库 MySQL
数据库大作业——基于qt开发的图书管理系统(三)Qt连接Mysql数据库
数据库大作业——基于qt开发的图书管理系统(三)Qt连接Mysql数据库
|
26天前
|
SQL 数据可视化 关系型数据库
数据库大作业——基于qt开发的图书管理系统(二) 相关表结构的设计
数据库大作业——基于qt开发的图书管理系统(二) 相关表结构的设计
|
26天前
|
安全 BI 数据库
数据库大作业——基于qt开发的图书管理系统 (一)环境的配置与项目需求的分析
数据库大作业——基于qt开发的图书管理系统 (一)环境的配置与项目需求的分析
|
2月前
|
区块链
【qt】最快的开发界面效率——混合编程3
【qt】最快的开发界面效率——混合编程
50 1