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 用于打印程序或者库文件所依赖的共享库列表。


相关文章
|
6月前
|
SQL 关系型数据库 MySQL
qt登录界面简单制作,是真的保姆级别了!!!
qt登录界面简单制作,是真的保姆级别了!!!
|
4月前
|
数据安全/隐私保护 C++ 计算机视觉
Qt(C++)开发一款图片防盗用水印制作小工具
文本水印是一种常用的防盗用手段,可以将文本信息嵌入到图片、视频等文件中,用于识别和证明文件的版权归属。在数字化和网络化的时代,大量的原创作品容易被不法分子盗用或侵犯版权,因此加入文本水印成为了保护原创作品和维护知识产权的必要手段。 通常情况下,文本水印可以包含版权声明、制作者姓名、日期、网址等信息,以帮助识别文件的来源和版权归属。同时,为了增强防盗用效果,文本水印通常会采用字体、颜色、角度等多种组合方式,使得水印难以被删除或篡改,有效地降低了盗用意愿和风险。 开发人员可以使用图像处理技术和编程语言实现文本水印的功能,例如使用Qt的QPainter类进行文本绘制操作,将文本信息嵌入到图片中,
181 1
Qt(C++)开发一款图片防盗用水印制作小工具
|
3月前
|
监控 C++ 容器
【qt】MDI多文档界面开发
【qt】MDI多文档界面开发
89 0
|
2月前
|
开发工具 C++
qt开发技巧与三个问题点
本文介绍了三个Qt开发中的常见问题及其解决方法,并提供了一些实用的开发技巧。
|
2月前
|
3月前
|
C++
C++ Qt开发:QUdpSocket网络通信组件
QUdpSocket是Qt网络编程中一个非常有用的组件,它提供了在UDP协议下进行数据发送和接收的能力。通过简单的方法和信号,可以轻松实现基于UDP的网络通信。不过,需要注意的是,UDP协议本身不保证数据的可靠传输,因此在使用QUdpSocket时,可能需要在应用层实现一些机制来保证数据的完整性和顺序,或者选择在适用的场景下使用UDP协议。
158 2
Qt开发网络嗅探器02
Qt开发网络嗅探器02
|
3月前
|
存储 运维 监控
Qt开发网络嗅探器01
Qt开发网络嗅探器01
|
3月前
|
网络协议 容器
Qt开发网络嗅探器03
Qt开发网络嗅探器03
|
3月前
【qt】多窗口开发
【qt】多窗口开发
60 0