i.MX6ULL终结者QT应用开发Qt基础

qt的移植性非常的强。一套代码我们不用改太多，直接通用所有的平台。
不久的将来，qt会被用到MCU上，学习QT还是非常有意义的。

1 安装Qtcreator

Qtcreator下载地址：http://download.qt.io/new_archive/qt/5.11/，进入选择版本号界面，本教程使用的是5.11.1，也推荐读者选择此版本。进入如图 62.2.1.1界面后，选择安装包，我们在windows下学习Qt，所以选择qt-opensource-windows-x86-5.11.1.exe，点击即可下载。

图 1.1

下载后右键点击exe文件，选择以管理员身份运行。注册账号，点击下一步（或next），选择安装路径。选择下一步，勾选需要用到的组件，本阶段教程需要勾选以下七个选项：

图 1.2

图 1.3

选择完后一直点下一步，安装完成后如图 1.4：

图 1.4

2 创建工程

创建一个QT工程步骤：
步骤一：

图 2.1

步骤二：
填写工程名字，不要有中文路径：

图 2.2

步骤三：填写类名：

图 2.3

创建成功后如图 2.4：

图 2.4

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

图 2.5

点击forms，然后双击ui文件，就可以进入ui编辑器。

图 2.6

ui编辑器面板介绍：

图 2.7

3 信号和槽

信号就是指控件发出的特定的信号。槽就是槽函数的意思，信号和槽都位于类中，不是C++标准代码。我们可以把槽函数绑定在某一个控件的信号上。当需要调用外部函数时，发送一个信号，此时与该信号相关联的槽便会被调用，槽其实就是一个函数，槽与信号的关联要由程序员来完成，关联方法有自动关联和手动关联。

3.1 自动关联

使用Qt信号和槽的自动关联,可加快开发速度，一般用于同一个窗体之间的控件关联，槽函数格式非常关键，格式为：
void on_<窗口部件名称>_<信号名称>();
自动关联步骤：
步骤一：手动选择相应的控件，然后右键->转到槽。

图 3.1.1

选择信号类型：

图 3.1.2

自动关联会在.h文件声明槽函数。槽函数只能声明到private slots或者public slots 下面。按住Ctrl+鼠标左键，跳转到.cpp文件对应的函数功能实现部分。填写功能代码，我们在槽函数内用qDebug打印信息。

图 3.1.3

保存，点击构建，运行：

图 3.1.4

每次点击，按钮都会发信号，对应的槽函数就会执行，结果如图 3.1.5：

图 3.1.5

3.2 手动关联

信号和槽机制是QT的核心机制，要精通QT编程就必须对信号和槽有所了解。信号和槽是一种高级接口，应用于对象之间的通信，它是QT的核心特性，也是QT区别于其它工具包的重要地方。此外如果遇到不懂的函数或类，可以先选中，然后按F1键，即可查看介绍。
虽然Qt有自动关联功能，但涉及到多个窗体和复杂事件的时候，只能使用手动关联，手动关联使用connect这个函数。

connect(const QObject *sender, const char *signal,
       const QObject *receiver, const char *member,
 Qt::ConnectionType = Qt::AutoConnection);

通常只传递前四个参数，参数含义：

sender：发送对象；
singal：发送对象里面的一个信号，格式一般为SIGNAL(信号);
receiver：接收对象；
member：接收对象里面的槽函数，格式一般为SLOT(信号)。
ConnectionType：设置信号和槽的同步异步,一般使用默认值Qt::AutoConnection，可 不填。

connect(A,SIGNAL(B),C,SLOT(D));
当对象A发出B信号时候，就
会触发对象C的槽函数D

signals 是 QT 的关键字，而非 C/C++ 的。signals 关键字指出进入了信号声明区，随后即可声明自己的信号。
slots 槽是普通的 C++ 成员函数，当与其关联的信号被发射时，这个槽函数就会被调用。槽函数有的参数个数和类型，在对应的信号函数中必须一一对应，即信号函数的参数个数必须多于或等于槽函数的个数。
emit Qt定义的一个宏，作用是发射信号，与此信号关联的槽函数就会被调用。
例程：我们在widget.h中自定义一个信号和一个槽函数

图 3.2.1

并在widget.cpp实现槽函数：

图 3.2.2

然后在widget.cpp中绑定信号和槽：

图 3.2.3

在widget.ui中创建按钮，并转到槽，自动关联的槽函数如图 3.2.4：

图 3.2.4

发射信号

图 3.2.5

这样，点击按钮，就会发射自定义的信号my_Signal()，与my_Signal()相关联的this对象槽函数my_Solt就会被调用，槽函数就会输出打印信息，如图 3.2.6：

图 3.2.6

部分核心代码如下：

Widget.h:
class student
{
   
public:
       student();
       ~student();
       char name[64];
       int age;
 
       void test();
       void test(int a);
#include <QWidget>
 
namespace Ui {
   
class Widget;
}
 
class Widget : public QWidget
{
   
    Q_OBJECT
 
public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();
signals:
    void my_Signal(void);   //自定义的信号
 
private slots:
    void on_pushButton_clicked();
    void my_Solt(void);     //自定义的槽函数
 
private:
    Ui::Widget *ui;
};

Widget.cpp:

#include "widget.h"
#include "ui_widget.h"
 
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
   
    ui->setupUi(this);
    connect(this,SIGNAL(my_Signal()),this,SLOT(my_Solt()));
}
 
Widget::~Widget()
{
   
    delete ui;
}
 
void Widget::on_pushButton_clicked()
{
   
    emit my_Signal();
}
void Widget::my_Solt(void)
{
   
    qDebug("按下");
}

4 给界面添加图片

4.1 添加资源

选中项目名称，右键单击—>选择添加新文件

图 4.1.1

在弹出窗口中选择Qt—>Qt Resource File ，选择Choose

图 4.1.2

填写写资源名称，

图 4.1.3

例如填写 picture后，在工程下的Resources会出现picture.qrc文件，成功后如图 4.1.4。
双击picture.qrc，点击“添加前缀”。

图 4.1.4

指定路径，这里笔者填的“/”此路径可根据需要自定义：

图 4.1.5

4.2 添加图片

我们首先将要添加的图片复制到工程目录下。
右击picture.qrc，选择Open With -> 资源编辑器，出现资源管理界面，点击下面的 添加->添加前缀，下方前缀栏填写的是 “ / ”，这个路径可以根据需要自定义，然后保存。

图 4.2.1

再次点击“添加”，点击“添加文件”，

图 4.2.2

选中图片，点击“打开”，进入资源编辑器

图 4.2.3

在资源编辑器中会看到添加的图片，然后保存。

图 4.2.4

以此点开Resources下的各个文件夹，即可看到添加的图片，此时图片已经添加到工程。

图 4.2.5

4.3 Label添加图片

在ui文件添加QLabel组件，右击->选择改变样式表，

图 4.3.1

弹出对话框，选择添加资源->border image，

图 4.3.2

选择要添加的图片，如图 4.3.3：

图 4.3.3

点击OK，apply，OK，即可完成添加，如图 4.3.4：

图 4.3.4

5 界面布局

图 5.1

5.1 水平布局

Horizontal Layout 水平方向布局，组件自动在水平方向上分布
使用时先选中组件，然后点击水平布局即可完成，可看到组件变为水平排列。如图 5.1.1：

图 5.1.1

5.2 垂直布局

Vertical Layout 垂直方向布局，组件自动在垂直方向上分布，操作方法和水平布局一致，在布局之后组件垂直排列。
我们点击打破布局按钮，重新选择要布局的组件，然后点击垂直布局按钮，如图 5.2.1：

图 5.2.1

5.3 栅格布局

Grid Layout 网格状布局，网状布局大小改变时，每个网格的大小都改变

图 5.3.1

我们发现布局之后各个组件都是紧挨着的，这时候可以用“弹簧”控件来控制组件位置。
Horizontal Spacer 一个用于水平分隔的空格

图 5.3.2

图 5.3.3

完成后如图 5.3.4：

图 5.3.4

Vertical Spacer 一个用于垂直分隔的空格，拖拽组件如图 5.3.5：

图 5.3.5

选中点击垂直布局，完成后如图 5.3.6：

图 5.3.6

6 界面切换

本节通过实验介绍通过创建窗口对象的方式实现界面切换：
步骤一：
在主界面ui文件添加pushButton按钮，

图 6.1

然后新建一个窗口，工程下创建新的Qt设计师界面类，如图 6.2：