QT 实现类似于qq的登录注册界面

admin管理员组

文章数量:1532461

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数据库进行操作，我暂时还遇到一些问题，）

本文标签： 类似于界面QTqq