QT项目 MyQQ 学习笔记（一）

大家好，我是一名纯新手小白，这也是我写的第一篇博客。

最近在学习QT，模仿做一个非常非常 简（low） 单（B） 的QQ界面，以下内容仅为个人学习整理后的，如果能帮到你就最好啦！！！

正式开始啦。

一、登陆界面

登陆界面实现的功能：

1、自由拖动。

2、账号密码的输入。

3、登陆、注册账号、找回密码等用户功能的实现。

4、关闭、最小化、小键盘、二维码等小控件的样式改变、背景等美化。

现在来逐步的整理一下。

【自由拖动】——鼠标事件：单击，并移动

1、首先第一步肯定是增加头文件啦，在 myqqWidget.h 文件中，添加头文件 #include<QMouseEvent>，这样就可以利用已经写好的函数。

2、声明和重载函数。这里用到了两个，（初学为了加深记忆，所以这里采用手打和放图的两种方式）

原理：按压鼠标，随时捕捉到鼠标位置（随时移动），在鼠标移动后的位置重新将窗口“绘制”出来。但是由于绘图事件是从窗口左上角开始，所以要确定 以鼠标移动后的位置为基准，窗口的左上角的位置坐标，即移动后的绘图开始的位置。

void myQQWidget::mousePressEvent(QMouseEvent *e)//鼠标按压事件

{

if (e->button() == Qt::leftButton) // 如果当前按压事件  是  按压的鼠标左键，这里的leftButton是一个枚举类型的量

{

p1 = e->globalPos() - frameGeometry().topleft(); //记录一个p1坐标，值为整个当前窗口在整个屏幕的坐标 - 当前窗口的左上角坐标（因为画图是左上角开始）

}

}

void myQQWidget::mouseMoveEvent(QMouseEvent *e)

{

if (e->buttons() & Qt::LeftButton)// 【注意这里是buttons()】如果当前移动事件  &  按压着鼠标左键  为真      换言之就是在移动事件发生的时候，同时处于按压左键的状态

{

move(e->globalPos() - p1);//移动的函数，参数可以是（int x, int y），也可以是一个const QPoint &，如这里的

}

}

上述leftButton是一个枚举类型，这里简单的展示一下

这样构造好之后，就可以随意的拖动窗口啦 ！

【.账号密码的输入】

这里开始的大部分能看到的，基本都是通过添加ui界面的控件完成。

操作：（1）、添加Line Edit 控件，在Input Widgets里的第三个。

（2）、单击该控件，在右下角的属性栏中绿色的部分，找到下述的这一栏，添加文字部分，即可实现没有输入时，提示需要输入的内容，当输入时，清除提示。

密码的输入，肯定不能显示出来咯，所以也需要设置一个属性，同样点击控件，在右下角设置echoMode为Password，这样显示出来就是“********”的样子了。

（3）、这里的小键盘是一个ToolButton，涉及到了样式表的改变，这里暂不说明，在之后的修改密码等处会详细说明。

【登陆、找回密码、注册账号等按钮】

（1）、首先添加按钮 Push Button

（2）、当我们点击 “登陆” 的时候 应该跳出另一个窗口，这里就涉及到了槽，由于这里是通过点击控件发生动作，因此可以直接在ui界面上直接转到槽。

方法 右键已经添加好的控件，选择“转到槽”，会自动生成一个函数定义、声明，我们可以直接在定义中，定义要实现的功能。

代码实现如上，逻辑就是正常的判断账号密码输入是否为空，判断账号密码是否匹配，匹配成功的提示等，由于这里还没涉及到连接数据库，所以我只是用两个字符串来作为匹配的账号密码，后续会进行修正。

这里的重点是QMessageBox 类的使用，添加头文件 <QMessageBox>，后可以通过调用其成员函数来做一些提示性的窗口语句。

如： QMessageBox::warning(this,"Warning","账号、密码不能为空 ！")；,效果如图

当账号密码输入匹配时候，即登陆成功，应该跳出好友列表的界面即另一个窗口，这里有两种方式

第一种为代码实现：

（1）、新建一个工程myfriend，（c++里的class）

（2）、设置成员，这里的成员就是具体体现在稍后好友列表界面上的各种控件

“我的好友”和“黑名单”两个分组，就是这里的 groupBox1,groupBox2；

“我的好友”里设置3个好友，就是这里的toolBtn1_1,toolBtn1_2,toolBtn1_3；

一个布局管理器 垂直布局方式，即QVBoxLayout *layout1

一个chat类的指针（用作稍后的打开聊天窗口）

（3）、设置按钮属性，依次为

设置窗口标题

新建ToolButton按钮并设置其各种属性如按钮名字、添加图片、图片尺寸按照图片的大小、设置悬浮风格等，大家可自行尝试

这样就完成了一个好友的显示，同理我们重复多次，得到多个好友

然后进行分组（即具体展示的时候的排版），这里可以将不同的好友放在不同的组里，如 我的好友  黑名单等分组。

这样一个简（hen）单（low）的列表就做好了。

当设置好好友列表后，开始做正式的聊天界面；还记得吗，之前说的可以用两种方法设置窗口的跳转，好友列表我们是通过代码实现的，接下来这里介绍的就是另一种方法实现的窗口的跳转

新建一个Widget窗口，在里面添加基本界面，类似这样的  有一个窗口，一个输入栏，一个发送按钮

这里我们需要做到当输入完内容时，按发送按钮，将输入栏里的信息显示在窗口中，并清空输入栏，这里实现方法其实很简单，将发送按钮转为槽，当点击发送按钮时，在聊天显示窗口控件中打印出输入栏控件中的内容，并同时将输入栏的内容设为“”（空的），即可。具体看一下代码实现

上述两条语句分别理解为 ：ui界面中的chat_listWidget（聊天显示窗口）的一行显示出  input_lineEdit（输入栏）->text()（中的文字信息），输入栏设置为“”（清空）。就实现了图中的功能。

找回密码和注册账号的功能和登陆的功能类似，都是通过槽（代码实现或者ui窗口实现均可），调出另一个窗口，再次不再赘述，但是这里分享一个小细节

找回密码的界面，当问题都回答正确后，在跳出设置新密码的控件

通过设置一个flag 标志位，初始值为0

ui->new_password->setVisible(false);先通过这条语句，false即不显示状态 那么对应的 new_password（新密码控件）就不显示，如上图左

当判断两次问题都回答正确后，将flag置为1，并通过if语句，将控件属性设置为true 即可显示，达到上述的效果。

【更改样式表、插入图片背景】

最后一部分比较简单，重点是在于美化我们的界面。大家可以现在将鼠标移动到右上角的关闭按钮，会有高亮提示，移开则没有，当你点击的时候，又会是一种状态，这就很好的提示了用户现在鼠标执行的动作。这里的原理是通过三个不同的图片实现的

这里鼠标的状态就分为 普通（空）、悬浮（hover），和按压（pressed），通过改变样式表来实现。右键想要改变的控件，如“关闭”控件，选择改变样式表

样式表具体的代码如下，大家可以仿照，但是这里特别注意

1.【空格不要随便多加，否则实现不了】，紫色的“QPUS和Button”是根据控件的类型变得，如果是改变ToolButton类型的，则就应该写ToolButton。

2.#后面跟控件名称和状态，状态即普通（空）、悬浮（hover），和按压（pressed）。

3.一长串是图片的路径啦。

这样就实现了三种状态的不同高亮提示，具体效果展示起来不方便截图，大家可以自行尝试。

好了，截至到此我的简单的山寨QQ有了一个基本的框架，其他功能的实现都是类似的，。比如添加好友，打开空间，打开QQ游戏等等，都是通过按钮和槽来实现不同窗口的展示，再此不再赘述，（其实是我还没完成），关于后面数据库的连接和账号的申请、保存，我还没学到，所以暂时没有做，所以只有功能按钮部分的。大家可以根据这些基本的方法做出各种美观的界面和有趣的功能。我仅做一个自己的项目整理和分享，谢谢。