[TOC]

前言

做嵌入式的上位机开发需要要用到Qt的，Qt是一个开源、跨平台的程序和UI开发框架。我们使用Qt可以用Python或者C++进行开发，这里我使用的全部都是C++，不涉及到Python。

一、Qt安装

要学习Qt前先得学习一下如何安装Qt，这里安装的是QtIDE，是Qt的集成开发环境，首先搜索下面的网址：Qt下载官网

进入这个网站后会出现下面的界面：

这里点击archive，这个目录中是存放Qt开发环境安装包的，然后进入后：

选择qt这个目录，这个目录中是存放Qt开发环境的下载目录：

这里有很多的Qt开发环境的版本，选择一个你喜欢的（这里推荐用5.12），然后选择：

在里面选择一个版本后点击：

这里如果你是Windows电脑，选择.exe，如果是Linux，根据你Linux的版本选择安装包。

下载后双击安装，一开始会让你进行登录，登录的话需要去Qt官网进行注册一下（这个可以自己进行百度），然后将注册的填写进去即可。

这边推荐去官网进行注册，在这个软件中注册不一定能注册得上去

第二步就是选择安装路径和关联文件，也就是设置一下路径

设置完后就需要选择安装组件：

这里需要选择的是

MinGW 5.3.0 32 bit
Qt Charts
Qt Data Visualization
Qt Purchasing
Qt Virtual Keyboard
Qt WebEngine
Qt Network Auth(TP)
Qt Remote Object(TP)
Qt Speech(TP)
Qt Creator 4.3.0 CDB Debug
MinGW 5.3.0

根据上面列出的工具进行选择即可。

二、创建一个Qt工程

安装完成后打开Qt Creator，打开后就会出现下面的界面：

点击左上角的文件，在里面选择新建项目或文件，然后弹出下面的界面：

这里是选择一个模板或者文件和类，因为我们要建一个工程，所以选择项目，在里面选择Application(Qt)，其中有一个Qt Widgets Application，选择完成后点击Choose..进入下一步

这里是为改项目取个名字并放置在一个文件夹中。

设置好后点击下一步：

这里选择构建项目的编译器，使用默认的qmake即可，然后点击下一步。

这里是选择基类的类和类名，文件名，使用ui吗是一些设置。

需要注意的是Base class中可以选择三个选项，第一个是QMainWindow。

第二个是QWidget，第三个是QDialog，先选择QWidget，等创建完工程再慢慢解释一下这些基类的不同点。

这个Generate form可以选也可以不选，先选择吧，可能后面有用。

如果不选这个选项，那么ui界面就没有办法使用。然后点击下一步

下一步中的内容选择默认即可，这个是选择翻译文件，但咱用不到，所以直接默认。

下一步就是选择解释器了

这里选择MinGW 32bit的就可以了，然后下一步，。

下一步也是默认即可

这里是告诉你这个工程要添加的文件和添加版本控制系统，如果你有可以添加，没有就算了，直接点击完成。

等一会就会创建好工程：

左边是文件，右边是编辑区，我们来看看创建出来的这些文件：

首先是Student.pro，这个是工程的配置文件

在这你可以使用代码配置一下这个项目使用的一些库或者文件。

然后是放头文件和源文件的文件夹了，先看一下源文件

在源文件中有两个文件

main.cpp是入口文件，在里面有一个main函数，程序的入口：

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
   
   
    QApplication a(argc, argv);  // 实例化QAppLication类
    Widget w;   // 实例化Widget类
    w.show();   // 显示窗口
    return a.exec();   // 让程序一直循环不退出
}

上面的代码就是main函数中的内容，可以看到这里的代码很少，只需要运行这个就可以出现一个窗口了，在里面其实就是创建一个窗口并显示并且保持显示不退出，所以我们的代码不是在这写的。

那代码在哪写呢？可以在main.cpp中看到一个类，Widget这个类，这个类是一个窗口类，在源文件中就可以找到这个文件widget.cpp了。

点击这个文件进入：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
   
   
    ui->setupUi(this);
}

Widget::~Widget()
{
   
   
    delete ui;
}

可以看到这里的代码也很少，有一个构造函数和一个析构函数，构造函数中有一个ui->setupUi(this)，这个代码是将ui文件中搭建好的页面更新显示出来。我们的代码一般书写到这个widget.h这个文件中。

在文件夹中还有一个文件夹Forms文件夹，这个文件夹中只有一个文件.ui，这个就是可以使用拖动控件来达到搭建UI界面的功能

三、基类的区别和常用函数

在之前创建工程的时候说过，有三个基类，那这三个基类的区别是什么呢？

下面就给大家说一下这些区别。

1.QWidget

先说一下我们上面创建的一个基类，这个类是Qt中用于构建GUI界面的基础类之一，它是集成QObject类的，这个类提供了窗口控件等基本元素的功能。

它有很多的功能函数，下面给大家介绍一下这个基类中的一些常用函数：

1.1 设置窗口标题

使用的函数为：

void setWindowTitle(const QString &)

这个函数可以将窗口的标题改为你指定的内容，比如说我要将我的窗口标题改为：hello，那我的代码可以这样写（这些代码写在widget.cpp就是我上面说的那个文件中

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
   
   
    setWindowTitle("hello");    // 设置窗口标题 
}

运行后窗口的标题就会被改变：

当然也可以用实例化变量来进行调用：

widget.setWindowTitle("hello");

1.2 设置窗口大小和显示位置

这个使用的函数是：

void setGeometry(int x, int y, int w, int h)
/*
x:窗口出现位置的x轴
y:窗口出现位置的y轴
w:窗口的宽
h:窗口的高
*/

它还有一种重载的函数：

void setGeometry(const QRect&);

我们先看上面的那种方式，其中x和y是指以你桌面的左顶点为(0,0)来进行计算

比如说我们要将这个窗口位置设置在中心位置，窗口的宽度和高度分别为600和400，那么代码如下：

setGeomentry(1920 / 2, 1080 / 2, 600, 400);

运行代码后窗口出现的位置就在中心：

这里为什么是1920/2和1080/2，因为我的电脑桌面的分辨率就是为1920和1080。

也可以用实例化变量来调用设置：

widget.setGeomentry(1920 / 2, 1080 / 2, 600, 400);

如果使用第二种方式，需要先创建一个QRect对象，然后把这个对象放在形参的位置即可：

QRect rect = QRect(1920/2, 1080/2, 600, 400);
this->setGeometry(rect);

1.3 显示窗口

这里使用的函数是

show();

我们在main.cpp中是见到过的，当时实例化Widget这个类后，用实例化对象中的show()方法就显示出该窗口了。

widget.show();

1.4 隐藏窗口

使用的函数是：

hide();

这个是可以隐藏QWidget创建的窗口，使用的方法就是直接用实例化出来的实例化对象.hide()

widget.hide();

1.5 改变窗口大小

这里使用的方法是：

void resize(int w, int h)

填写的参数很简单，就是窗口改变后的宽和高。

比如说我没有使用setGeomentry()更改窗口的位置，那我就可以使用这个函数对窗口进行更改大小：

resize(600, 400);

当然你也可以直接直接用实例化对象来调用这个方法：

widget.resize(600, 400);

1.6 设置窗口的位置

如果你想单独修改窗口的位置，并不想修改大小就可以使用这个函数

void move(int x, int y);

也有一个重载的

void move(const QPoint &);

其实都差不多

move(600, 400);

widget.move(600, 400);

QPoint point = QPoint(600, 400);
widget.move(point);

1.7 刷新窗口

使用的函数是：

void QWidget::update();

更新窗口的一些小部件

2.QDialog

QDialog一般用来实现对话框，对话框分为模块化对话框和非模块化对话框。

模块化对话框是在主窗口的顶层，如果不解决这个对话框，那么没办法和主窗口进行交互。

非模块化对话框和模块化相反，当激活对话框后不会阻塞主窗口，让你的主窗口也能和用户进行交互。

这个控件也有一些基本的方法，比如说：show()、exec()、move()、resize()、hide()、setGeomentry()、setGeomentry()。

2.1 QDialog对话框

一般使用这个控件是来做一个对话框的，比如说我在上面刚才创建好的工程中添加一下用继承QDialog的函数写一个弹出的对话框。

首先在Headers文件夹右键选择Add New

然后再里面选择C++ Header File

然后点击下一步，再这取一个名字即可，这里叫Dialog.h

然后再右键Sources文件夹，还是和上面一样的，只不过需要选择C++ Source File。这里叫Dialog.cpp

然后在Dialog.h中写上下面的代码：

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

//QT_BEGIN_NAMESPACE
//namespace Ui { class Widget; }
//QT_END_NAMESPACE

class Dialog:public QDialog{
   
   
    public:
        Dialog();
        ~Dialog();
};

#endif // DIALOG_H

在Dialog.cpp中将析构函数和构造函数都实现一下，但是里面没有东西：

#include "Dialog.h"

Dialog::Dialog(){
   
   

}

Dialog::~Dialog(){
   
   

}

因为我懒得加，你也可以加一个改变标题的方法。

Dialog::Dialog(){
   
   
    setWindowTitle("this is message");
}

然后在widget.cpp中实例化一下对象，然后创建一个按钮并且连接一下：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
   
   
    ui->setupUi(this);
    QPushButton* button1 = new QPushButton;
    button1->setParent(this);
    button1->setText("dian yi xia");
    connect(button1, &QPushButton::clicked, [=](){
   
   
        this->dialog.show();
    });
}