嵌入式Linux GUI基础

嵌入式Linux GUI基础

一、Ot入门

1.Qt概述

Qt 是一种基于 C++的跨平台图形用户界面应用程序开发框架。 如何跨平台？上到服务器上位机，下到 嵌入式 GUI ，上天入地无所不能。 Qt 最早是由 1991 年由 Qt Company 开发，但是到 2008 年，Qt Company 科技被诺基亚公司收购，是的，就是拥有着我们很多情怀的诺基亚。但在 2012 年， Qt 又被 Digia 收购。 Qt 的版本是按照不同的图形系统来划分的，目前分为四个版本： 适用于 Windows 平台； 适用于使用了 x 系统的各种 Linux 和 unix 的平台 ; Mac 版，适用于苹果 MacOS ； embedded 版，适合于具有帧缓冲（ frame buffer ）的 Linux 的平台。 Qt 一般指代桌面版本，例如在 Linux （ x86 ）， Windows ， Mac 系统上运行的。 QtE 全称是 Qt embedded ，特指嵌入式版本。它是 Qt 的 Embedded Linux 分支平台，在原始 Qt 的基 础上，做了许多出色的调整以适合嵌入式环境。删除掉了一些与嵌入式无关的 Lib 库，使其相对来说更加 节省嵌入式平台的内存空间，毕竟对嵌入式应用来讲，资源还是相对受限的，不像 PC 机、服务器这些通 用机系统有更大的内存和硬盘；为了稳定性以及成本考虑，嵌入式的产品一般更加简洁高效。 Qt 虽然经常被当做一个 GUI 库，用来开发图形界面应用程序，但这并不是 Qt 的全部； Qt 除了可以 绘制漂亮的界面（包括控件、布局、交互），还包含很多其它功能，比如多线程、访问数据库、图像处理、 音频视频处理、网络通信、文件操作等，这些 Qt 都已经内置了。 Qt 是应用程序开发的一站式解决方案，有了 Qt ，你就可以高枕无忧了！ Qt 本身包含的模块也日益丰富， 一直有新模块和第三方模块加入进来。 使用 Qt 开发： WPS 、 YY 语音、 Skype、豆瓣电台、虾米音乐、淘宝助理、千牛、暴雪的战网客户端、 VirtualBox 、 Opera 、咪咕音乐、 Google 地图、 Adobe Photoshop Album 等。 总的来说，Qt 主要用于桌面程序开发和嵌入式图形界面GUI的开发。

2.C++基础

c++ 是 c 语言的升级版，在 c 的基础上增加了很多功能。是一种高级语言，常见后缀： cpp ， c++ ， cc 等。 g++ 编译： gcc 是一个通用命令，它会根据不同的参数调用不同的编译器或链接器， GCC 为了让操作简 单推出 g++ 命令用来编译 C++ 。

1.什么是面向对象，什么又是面向过程

c 语言就是面向过程的， c++ 就是面向对象的，面向对象特点：封装，继承，多态。 举例： a+b 直接计算 a+b 就是面向过程。 面向对象就是给 a+b 穿上了一层衣服。不是直接计算 a+b 。

2.c++的灵魂，c++的类

类，可以把他看成 c 语言结构体的升级版。类的成员不仅可以是变量，也可以是函数，类可以看做 是一种数据类型，这种数据类型是一个包含成员变量和成员函数的集合。 对象：类的实例化 直接定义：

student my; // student 就是类 my 就是对象

在堆里面定义：

student *my = new student;

删除对象：

delete my; 目的是释放堆里面的内存
my = NULL;

变成空指针，杜绝成为野指针。

3.怎么访问类的成员

student my;
student *my1 = new student;
my.age = 18;
my1->age =19;
cout << my.age << endl;
cout << my1->age << endl;

访问方法和 C 语言结构体是一样的，普通变量通过“ . ” 指针通过“ ->”。

4.类的函数成员

因为类里面的成员不仅可以是变量，也可以是函数。 第一步：在类里面声明 第二步：实现这个函数。我们可以直接在类里面写，也可以写在类的外面。 直接写在类的里面：

class student
{
public:
char name[64];
int age;
void test(){
cout << 123 << endl;
};
};

写到类的外面：

class student
{
public:
char name[64];
int age;
void test();
};
void student::test(){ //student：表示属于这个类里面的函数，不加的话会被识别成普通函数。
cout << 123 << endl;
};
};

访问函数和访问变量是一样的。

5.类的访问修饰符

类的访问修饰符就是对类的成员进行权限管理。 public ： 表示函数和变量是公开的，任何人都可以访问。 private ： 表示函数和变量只能在自己的类里面自己访问自己，不能通过对象来访问。 能不能强行访问？可以的。 protected ：表示函数和变量只能在自己的类里面自己访问自己，但是可以被派生类来访问的。

二、Qtcreator的安装

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

 

下载后右键点击 exe 文件，选择以管理员身份运行。没有Qt的账号得先注册账号，点击下一步（或 next），选择安装路径。如下图。

选择下一步，勾选需要用到的组件，本阶段教程需要勾选以下七个选项： 

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

 

 

 到此为止，Qt就安装完毕。

三、创建一个 Qt 工程

1. 打开Qt

找到Qt的安装根目录Qt5.11.1ToolsQtCreatorbin，找到其应用程序  " "，也可以将其快捷方式发送到桌面。如下图。

图标为

打开后主界面如下图所示。

 2. 创建工程

首先找开文件菜单，新建文件或项目，如下图。

或者 点击快捷按钮，新建工程。如下图。

打开后，如下图选择。 

Widgets是在Qt中创建用户界面的主要元素，Widgets可以显示数据和状态信息，接收用户输入，并为其他应该分组在一起的Widget提供一个容器，没有嵌入父小部件的小部件称为窗口。

上一步选择操作后，填写项目名称，创建路径，下一步，不过不要有中文路径，如下图。

默认下一步之后，出现类信息的填写， 选择 " QWidget " 类名，如下图。 创建成功后，如下图。

工程目录下的.pro 工程文件说明如下图。 

 点击 forms，然后双击用户界面 ui （User Interface，用户界面）文件，就可以进入 ui 编辑器。

下图为ui编辑器面板介绍。

3. 信号和槽

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

（1）自动关联

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

 

 选择信号类型。

双击上图选择单击信号类型，自动关联到其所对应的槽函数定义处。槽函数在.h 文件声明，槽函数只能声明到 private slots 或者 public slots 下面。 按住 Ctrl+鼠标左键，跳转到 .cpp 文件对应的函数功能实现部分。填写功能代码，我们在槽函数内用 qDebug 打印信息。

保存，构建运行。如下图。 

 

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

（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 中自定义一个信号和一个槽函数，如下图。 源代码为：

signals:void my_signal(void); //自定义的信号private slots:void on_pushButton_clicked();void my_slot(void);//自定义的槽函数

并在 widget.cpp 实现槽函数，如下图。 源代码为：

void Widget::my_slot(void)
{
qDebug("再按下");
}

然后在 widget.cpp 中绑定信号和槽，如下 图 源代码为：

Widget::Widget(QWidget *parent) :QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);connect(this,SIGNAL(my_signal()),this,SLOT(my_slot()));
}

在 widget.ui 中创建按钮，并转到槽，自动关联的槽函数如下图。 发射信号，如下图。 源代码为：

void Widget::on_pushButton_2_clicked()
{emit my_slot();
}

构建项目，运行，点击按钮，就会发射自定义的信号 my_Signal() ，与 my_Signal() 相关联的 this 对象槽函数 my_Solt 就会被调用，槽函数就会输出打印出信息 “  再按下 ”。如下图。 下面给出widget.h完整代码截图：

给出widget.cpp完整代码截图：

 4. 界面添加图片

（1）添加资源

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

在弹出窗口中选择 Qt—>Qt Resource File ，选择 Choose ，如下图。

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

 

前缀可以根据需要自定义填入，如下图。 

（2）添加图片

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

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

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

 （3）Label 添加图片

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

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

选择要添加的图片，如下图。

 点击 OK，即可完成图片的添加，如下图。

5. 界面布局 

（1）水平布局

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

（2）垂直布局

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

（3）栅格布局

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