网络知识 娱乐 嵌入式学习之QT学习----3 制作简单的QT界面(如:QQ登录界面)

嵌入式学习之QT学习----3 制作简单的QT界面(如:QQ登录界面)

1、创建一个QT工程

new project —> Application —> Qt Widgets Application —> choose…(注意不要有中文路径)填写名称(我写的名称为class2)和创建路径(D:qtqt_democlass2) —> 填写类名,这里基类要选择“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的啦。
在这里插入图片描述