怎样用C/C++开发图形界面（GUI）程序—

怎样用C/C++开发图形界面（GUI）程序——点名器示例

原文链接：https://mp.weixin.qq.com/s/O9PXaibAyd__ONBBASYI_Q

仍旧是Via What系列，昨天熬夜读了FLTK的文档，今天终于可以给大家介绍一下了。为什么首选这个GUI框架来介绍，个人感觉它有下面几个好处：

GUI开发的急救之章
对刚开始开发GUI程序的同学比较友好
文档完整详实
不需要依赖其它杂七杂八的东西

如果你也受够了每次写出的程序只有DOS那个黑框，或是想开发自己的GUI工具，亦或是对GUI程序的开发技术感到好奇，那就一起学习一下吧~

0。GUI vs CLI

简单介绍一下这两者，GUI（Graphical User Interface）和CLI（Command-Line Interface）是两种不同形式的人机接口，说白了就是用户使用某个软件时，那个软件所呈现出的界面外观。CLI编过C语言程序的同学应该都很熟悉，就是那个黑色的窗口，然后打出几个白色的字符：

这种程序又叫控制台应用程序，因为并不是所有的程序都有使用GUI界面的需求，所以这种形式的程序也一直存在（比如Linux系统中大量的工具程序都是以命令行的方式使用的），这种程序对专业用户来说比较方便高效，但对普通用户却不友好。
GUI，也是大家平时使用较多的软件呈现方式，记事本、画图、计算器…这些有菜单、光标、图片…，并且交互方式也不局限于键盘，可以用鼠标指指点点，也可以用数位板、控制器等其它外部设备。当然了，GUI比CLI出现的晚，计算机早期都是用的CLI的形式，至于我们如今用的电脑的这种界面和交互形式，还得追溯到上世纪苹果、微软和施乐公司的相爱相杀。

1。GUI开发技术

CLI并没有什么花里胡哨的东西，但GUI涉及到的开发技术却要复杂的多，下面分析一个不完整的流派列表：

从系统的层面来说，Windows、Linux和Mac的界面技术都不相同
下面从Windows平台上的一些技术来说，第一是使用Windows系统提供的API来做GUI界面开发，这方面有一本流传经典的书籍，Charles Petzold的《Windows程序设计》（第五版）。
接下来是微软之后推出的一个界面开发框架MFC（Microsoft Foundation Classes），这个框架历史已经很悠久了，不过仍然是一个值得了解的框架。微软推出它也是有多种考虑，其一是之前基于Windows API的界面开发，仍然属于结构化的编程模式，但MFC完全基于面向对象的开发思想，而面向对象的开发模式是GUI开发的银弹；其二是应对当时的市场竞争。关于MFC也有一本与《Windows程序设计》齐名的书籍，Jeff Prosise的《MFC Windows程序设计》。
这其间还有一种基于可视化的GUI开发方式，如Visual Basic和Delphi等。这种开发技术又称为Rapid Applicaion Development（RAD）。
后来微软又完成自己.NET框架的备战，并在C#语言的基础上推出了WinForm开发技术。
另外还有数不清的GUI开发库，比如Qt、wxWidgets、WPF这种。当然还有我们今天要介绍的FLTK。
一种基于Chrome核的桌面软件开发技术，Chromium Embedded Framework（CEF）。
Windows 10之后微软又推出了UWP界面构建相关的技术。
…

2。FLTK

FLTK的全称是Fast Light Tookit，是一个快速、轻量的GUI开发框架。下面是引用官方的一段介绍：

FLTK是跨平台的C ++ GUI工具箱。FLTK提供了现代化的GUI功能，而没有膨胀，并通过OpenGL®及其内置的GLUT仿真支持3D图形。FLTK设计得足够小，并且具有足够的模块性，可以静态链接，但可以作为共享库正常工作。FLTK还包括一个出色的UI生成器，称为FLUID，可在几分钟内创建应用程序。

网址：https://www.fltk.org/index.php
源码：https://www.fltk.org/software.php
文档：https://www.fltk.org/documentation.php
下面我们通过一个小例子来展示使用FLTK构建GUI程序的过程，在开始之前，需要取得FLTK的源码，并编译成静态库供我们自己开发过程中调用。使用Visual Studio 2013版本的同学可以直接下载我编译好的一个静态库：https://pan.baidu.com/s/1rQtGmVzOYKRR-jV9lduHcQ 提取码：qhpd，下载的文件结构如下：

当然，大家也可以使用自己版本的VS进行编译，这里也提供了一份FLTK的源码：https://pan.baidu.com/s/1M9R0QNWaR_Lp1_j_bYvqoA 提取码：ucz7。如果过程中遇到什么麻烦，可以私信我讨论~

3。GUI点名器

点名器，大家应该都不陌生，我也是中毒者之一，但是它开发起来简单，比较适合在这里介绍。借助FLTK库，几十行代码就可以完成这个比较实用的小工具，感兴趣的话，大家也可以打开脑洞，做一些稀奇古怪的工具出来。如果大家想进一步学习FLTK，可以去翻翻FLTK的文档，里面有更综合一些的例子值得研究。

布局。开发GUI程序，布局是很必要的一个环节，当然了，因为这个工具非常简单，这里也没有必要再把他小题大做，只要稍微把这几个控件（菜单条、展示框和按钮）安排一下就可以了。
功能。快速理一下这个工具的用法，它需要我们导入一张班级名单，点击’>'按钮后，人名开始快速切换，再次点击后，暂停，然后人名对应的那个同学在内心深处传来一声痛苦的嚎叫。
导入功能。为不失重点，我们使用.txt文件来作为人名导入格式，使用C++代码迅速将这个功能实现一下：

void menu_import_clicked(Fl_Widget *widget, void *data)
{char *new_file = fl_file_chooser("Import file?", "*.txt", "");if (new_file != NULL){std::ifstream ifs(new_file);if (ifs.is_open()){std::string line;while (ifs >> line)g_names.push_back(line);ifs.close();}g_btn->activate();}
}

从代码中可以看出，我们实际完成的工作，只是将文本中的人名读到程序中的一个缓冲区当中，供之后快速切换名字之用。至于点击’Import…'菜单项，然后弹出文件选择的文本框，都由FLTK封装好了，也就是代码中的fl_file_chooser函数调用，当它返回时，我们自然得到了用户所期望导入的人员名单的路径。
按钮。我们使用了一个普通的按钮来实现这种开始与暂停功能，我相信FLTK有更适合解决这种需求的按钮，但我们用普通按钮来实现也非常容易，窍门就是使用一个静态变量来记录点击次数的奇偶性：

void btn_clicked(Fl_Widget *widget)
{static bool is_odd = true;if (is_odd){widget->label("| |");...is_odd = false;}else{widget->label(">");...is_odd = true;}
}

切换名字。点名器的核心功能自然是能够快速切换名字了，这里的实现思路是使用定时器，我们使用系统的定时器函数，然后设置了每80ms更新列表中的下一个名字，于是名字就快速切换开来：
下面是每当定时器被触发时，会调用的函数，我们的做的极为有限，把已经准备好名字列表，按索引赋值给展示标签，如果到达最后一个，我们就让它从头开始。

void WINAPI timer_proc(HWND hwnd, UINT msg, UINT_PTR id, DWORD elapsed)
{static int name_index = 0;g_timer_id = id;if (name_index >= g_names.size())name_index = 0;g_name_box->label(g_names[name_index++].c_str());
}

回调函数。还有一个问题我们一直没谈，也就是上面这些xxx_clicked函数是谁调用的呢？因为好像我们只是准备了这些函数，并没有在我们的程序中调用它们，但我们点击相应的按钮，的确触发了它们。结论是，这些是FLTK库帮我们调用的。那FLTK库是怎样知道哪个按钮对应哪个函数呢？在我们的实现中可以看到类似的代码：

btn->callback(btn_clicked);
about_confirm->callback(about_confirm_clicked)
{ "&Import...", 0, (Fl_Callback *) menu_import_clicked },
{ "E&xit", FL_COMMAND + 'q', (Fl_Callback *) menu_quit_clicked, 0}
{"&About", 0, (Fl_Callback *) menu_about_clicked },

这些代码片段便是我们告诉FLTK库，我们要将哪个函数与哪个控件联系在一起，这是GUI应用程序开发中一种很流行的技术，Qt库中被称为”信号-槽“(signal-slot)机制。其实，它们更广泛的名字是”回调函数“（callback-function）。
更多。这只是一个最原始的点名器雏形，可以让其支持xls表格的读取，可以让其有点名记录，可以加上切换名字的动画效果，可以让其点名算法更智能（如10次内不重复点），可以自动生成和导出缺勤报告，…一个课堂管理类程序呼之欲出：)

4。源码与结语

点名器的源码下载：
https://pan.baidu.com/s/1ikReql_RAawtstPJA6MHmg 提取码：5s1t
FLTK库就简要介绍到这，有需求的同学可以继续前进，提前熟悉使用一个GUI框架有很多好处，如写工具，提高编码能力，也可以完成一些任务…遇到什么麻烦，欢迎大家找我交流~

来源 | 作者：zhumo
编辑：zhumo
封面：zhumo

听说给点赞的最后都会混的和我一样~

文章首发~