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