QT 实现类似于qq的登录界面(仅供参考)
看一下效果图
一:首先创建一个widget项目设计ui界面
使用了LineEdit,QPushButton,QToolButton,QLabel,还有弹簧 还有一个widget组件
这是LineEdit设置提示 username 和password
注册按钮和— X都是运用了QToolButton 注册按钮勾选了autoRasie可以使按键透明
1…1因想要达到同态背景的效果 也就是加载gif所以运用了QLabel组件
在.CPP文件中利用QMovie 代码如下
//把窗口边框去除 这是去除原来的关闭边框 setWindowFlags(Qt::FramelessWindowHint | windowFlags());//把窗口背景设置为透明;setAttribute(Qt::WA_TranslucentBackground);QMovie *movie=new QMovie(":/1.gif");//加载的资源文件中的路径ui->label->setMovie(movie);movie->start(); ui->label->show();
这就需要添加资源文件了:
首先右键文件家 找到Add New 点击 选择QT 选择resource file资源文件
然后按你喜好命名 点击下一步
再点击完成
选择add prefix(增加前缀)一般输入 “/” 然后选择add files添加你需要的文件(要确保文件在你的项目文件夹中)一开始可能不会出现 先crtl+b编译一下
如果不小心退出 右键 res.qrc 选择 open in Editor 可以重新进去添加前缀和文件的界面
然后设计样式表 也就是在ui界面右键选择改变样式表 让界面美观一些
QLineEdit{font-size:16px;border-style:outset;border-radius:10px;font-style:MingLiU-ExtB;}QPushButton{background-color: rgb(0, 255, 255);border-style:outset;border-radius:10px;font-style:MingLiU-ExtB;}QPushButton:pressed{background-color:rgb(224,0,0);border-style:inset;font-style:MingLiU-ExtB;
因为我把控件放进了新建的widget中所以无法拖拽 所以需要增加一个鼠标按下并移动的事件
在widget.h中增加两个事件的声明和创建一个点
protected:void mouseMoveEvent(QMouseEvent *e);//鼠标移动void mousePressEvent(QMouseEvent *e);//鼠标按下移动private:Ui::QQ *ui;QPoint p;//创建一个点
然后在widget.cpp中 注意文章中的QQ::是我项目的名称(因人而异的)
#include<QMouseEvent>.....void QQ::mousePressEvent(QMouseEvent *e){if(e->button() == Qt::LeftButton){//求坐标差值//当前点击坐标-窗口左上角坐标p = e->globalPos() - this->frameGeometry().topLeft();}}void QQ::mouseMoveEvent(QMouseEvent *e){if(e->buttons() & Qt::LeftButton){//移到左上角move(e->globalPos() - p);}}
1…2把—(缩小)X(关闭)的功能完善
在ui界面中选择转到槽 选择clicked()方法 会自动在头文件中进行声明 然后在 .cpp文件中进行事件的处理(或者使用connec 来连接信号和槽 可使用lamda函数)
在.cpp文件中
void QQ::on_toolButton_4_clicked(){this->close();}void QQ::on_toolButton_3_clicked(){showMinimized();}
1…3实现界面的跳转 运用QDialog对话框可实现
首先右键文件家 找到Add New 选择QT
下一步
下一步
在完成即可 无需修改任何东西 可能版本不同 格式不一
然后在注册的ui界面中进行布局 按你个人喜好 这里我就直接添加背景图片了
改变样式表 border-image选择这个才可以平铺
QDialog{border-image: url(:/1.gif);}
1…4实现界面的跳转
在最初的ui界面中选择注册 然后转到槽 用clicked()方法 跳转到注册界面 这需要包括注册界面的头文件
#include "dialog.h"......void QQ::on_bt_register_clicked(){Dialog dia;dia.show();dia.exec();}
1…5这里先完成了界面的框架和样式(借助于各种资料编写,望各位见谅), 接下来进行逻辑的判断和数据库的搭建(运用qt自带的sql数据库进行操作,我暂时还遇到一些问题,)