嵌入式学习之QT学习----3 制作简单的QT界面（如：QQ登录界面）

article/2025/9/15 7:47:19

1、创建一个QT工程

new project —> Application —> Qt Widgets Application —> choose…（注意不要有中文路径）填写名称（我写的名称为class2）和创建路径（D:\qt\qt_demo\class2） —> 填写类名，这里基类要选择“QWidget”，这样一个QT工程就创建好啦。
在这里插入图片描述
qt的移植性非常强，一套代码我们不用修改太多，直接通用所有的平台。
说明：

QMain Window：主窗口类，主窗口具有主菜单栏、工具栏和状态栏，类似于一般的应用程序的主窗口。
QWidget：它是所有具有可视界面的基类，选择QWidget创建的界面对各种界面组件都可以支持。
QDialog：对话框类，可建立一个基于对话框的界面。

2、工程目录下的.pro工程文件分析

.pro文件是项目管理文件，文件名就是项目的名称，如：class2.pro
项目管理文件用于记录项目的一些设置，以及项目包含文件的组织管理。

#-------------------------------------------------
#
# Project created by QtCreator 2022-05-01T13:51:06
#
#-------------------------------------------------QT       += core gui
#往qt工程里面加入core gui模块greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
# 假如qt库的版本大于4 就加入一个widgets的模块
TARGET = class2
# 生成APP的名字
TEMPLATE = app
#编译产物的类型# The following define makes your compiler emit warnings if you use
# any feature of Qt which has been marked as deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS
#定义一个宏# You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0#指定工程里面都有哪些cpp
SOURCES += \main.cpp \widget.cpp
#指定工程里面都有哪些头文件
HEADERS += \widget.h
#指定工程里面都有哪些ui文件
FORMS += \widget.ui

3、ui编辑器（界面文件）

点击工程下的“forms”，然后双击widget.ui文件（.ui为后缀的文件就是界面文件），就可以进入ui编辑器。
在这里插入图片描述

4、制作简单的QQ登录界面

在这里插入图片描述

参照腾讯qq的登录界面，我们知道qq登录界面需要有账号、密码、qq图标以及qq字样、注册、登录字样和按钮等。具体怎么做呢？利用组件来实现一下吧。

放置文本、图片、gif的组件是：Display Widgets----》 Label（qlabel），直接将其拖入待设计的窗体，修改名字为“QQ登录界面”
以同样地方式设计“账号”、“密码”
接下来设计“文本输入框”，在我们输入账号以及密码的时候，无论账号和密码有多长，都不会换行，所以还需要用到一行文本输入框Input Widgets----》 Line Edit（qlineedit）
设计登录以及注册按钮Buttons-----》Push Button，将该控件拖拽至待设计的窗体，双击该组件就可以更改该组件的名字啦
使用快捷键ctrl+r或者直接点击编译按钮进行编译即可
设计好的窗体如下：
编译结果如下：
可以在账号密码处填写信息，但是可以发现密码也是可视的，需要调整一下，一般密码是不可视的。

先关闭运行结果框，点击待设计窗体中的密码输入框组件，在属性编辑器里面，找到echoMode，将其设置为passwd即可。

有一点需要注意，在设计完之后，需要给控件改名字，为了分析代码方便，也为了使得我们的设计通俗易懂，可读性高，不然拿给别人看，别人看我们设计的这个东西就很蓝的啦。
选中要修改名字的控件，在属性编辑器里面就可以修改。

将注册以及登录按钮控件的名字分别改为了“registBt”、“logoBt”；账号输入以及密码输入的一行文本输入框的名字分别改为“userEdit”、“passwdEdit”

5、信号和槽

信号：信号是指控件发出的特定的信号。
槽：槽是槽函数的意思，我们可以把槽函数绑定在某一个控件的信号上。比如控件pushButton就有自己的信号，它一共有四个信号。
点击菜单栏里面的“帮助”—》“索引”，搜索“pushbutton”即可看到相关信息
在这里插入图片描述

点击一下它的父类，可以看到该控件的四个信号如下：

6、怎么关联信号和槽？

关联信号和槽有两种方式，一种是自动关联，一种是手动关联。

（1）自动关联
若选择自动关联，只需要选住控件，然后点击右键，选择“转到槽”即可。
自动关联会给工程的“Headers”下的文件里面声明槽函数。
如：给“登录”控件自动关联槽，就选择默认的信号“clicked（）”，点击“ok” 在这里插入图片描述
关联完毕之后，会自动跳转到Sources文件夹下的widget.cpp文件，并且声明槽函数，具体的功能我们在里面直接添加就可以。

在该文件里面添加槽函数的功能（一点登录就打印“logo success”），编译运行：

其次，有一点需要注意，也是自动在widget.h文件的private slots下面声明槽函数的。槽函数只能声明到private slots或者public slots下面
在这里插入图片描述
这个是qt特有的，标准的c++里面是没有这个的。
（2）手动关联
手动关联的话，需要用到一个函数connect函数，可以在菜单栏的“帮助”--->"索引"，查找一下connect，便可了解其用法。
手动关联的具体实现是在widget.cpp文件中进行操作的。

先使用connect函数

 connect(ui->registBt,SIGNAL(clicked()),this,SLOT(registBt_clicked_slots()));//ui指的是大的界面，这些控件都是在大的界面里面的，当访问这个界面里面的控件的时候，前面都要加上ui//要关联的信号是SIGNAL(clicked())//SLOT(registBt_clicked_slots()是要绑定的槽函数，在widget.h文件里面声明一下槽函数//注意槽函数的声明一定要声明到private slots或public slots里面------------void registBt_clicked_slots();//然后在现在这个文件里面实现一下刚刚声明的槽函数

再去widget.h文件里面去声明槽函数

private slots:void on_logoBt_clicked();void registBt_clicked_slots();

最后在widget.cpp文件里面实现刚刚声明的槽函数

//实现手动关联时声明的槽函数
void Widget::registBt_clicked_slots()
{qDebug("regist success!");
}

编译运行一下试试，点击了两次登录，两次注册，效果ok的啦。
在这里插入图片描述