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