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

桃扇骨 2022-12-30 13:52 833阅读 0赞

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

**原文链接**：[https://mp.weixin.qq.com/s/O9PXaibAyd\_\_ONBBASYI\_Q][https_mp.weixin.qq.com_s_O9PXaibAyd_ONBBASYI_Q]

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

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

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

### 0。GUI vs CLI ###

简单介绍一下这两者，GUI（Graphical User Interface）和CLI（Command-Line Interface）是两种不同形式的人机接口，说白了就是用户使用某个软件时，那个软件所呈现出的界面外观。CLI编过C语言程序的同学应该都很熟悉，就是那个黑色的窗口，然后打出几个白色的字符：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzgxODA4MQ_size_16_color_FFFFFF_t_70 1]  
这种程序又叫控制台应用程序，因为并不是所有的程序都有使用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][https_pan.baidu.com_s_1rQtGmVzOYKRR-jV9lduHcQ] 提取码：qhpd，下载的文件结构如下：  
![在这里插入图片描述][20201226002700451.png]  
当然，大家也可以使用自己版本的VS进行编译，这里也提供了一份FLTK的源码：[https://pan.baidu.com/s/1M9R0QNWaR\_Lp1\_j\_bYvqoA][https_pan.baidu.com_s_1M9R0QNWaR_Lp1_j_bYvqoA] 提取码：ucz7。如果过程中遇到什么麻烦，可以私信我讨论~

### 3。GUI点名器 ###

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

*  布局。开发GUI程序，布局是很必要的一个环节，当然了，因为这个工具非常简单，这里也没有必要再把他小题大做，只要稍微把这几个控件（菜单条、展示框和按钮）安排一下就可以了。
 *  功能。快速理一下这个工具的用法，它需要我们导入一张班级名单，点击’>'按钮后，人名开始快速切换，再次点击后，暂停，然后人名对应的那个同学在内心深处传来一声痛苦的嚎叫。  
    ![在这里插入图片描述][20201226002811747.png_pic_center]
 *  导入功能。为不失重点，我们使用.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更新列表中的下一个名字，于是名字就快速切换开来：  
    ![在这里插入图片描述][20201226003009588.gif_pic_center]
 *  下面是每当定时器被触发时，会调用的函数，我们的做的极为有限，把已经准备好名字列表，按索引赋值给展示标签，如果到达最后一个，我们就让它从头开始。

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][https_pan.baidu.com_s_1ikReql_RAawtstPJA6MHmg] 提取码：5s1t  
FLTK库就简要介绍到这，有需求的同学可以继续前进，提前熟悉使用一个GUI框架有很多好处，如写工具，提高编码能力，也可以完成一些任务…遇到什么麻烦，欢迎大家找我交流~

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

![在这里插入图片描述][20201226003306298.png_pic_center]

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

文章首发~  
![公众号：Dawo][Dawo]

[https_mp.weixin.qq.com_s_O9PXaibAyd_ONBBASYI_Q]: https://mp.weixin.qq.com/s/O9PXaibAyd__ONBBASYI_Q
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzgxODA4MQ_size_16_color_FFFFFF_t_70]: /images/20221120/04dcb72476d04dd78b483ab8db2fc58b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzgxODA4MQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/dadfdfdd031c4c7f95cca113f8f553ac.png
[https_pan.baidu.com_s_1rQtGmVzOYKRR-jV9lduHcQ]: https://pan.baidu.com/s/1rQtGmVzOYKRR-jV9lduHcQ
[20201226002700451.png]: https://img-blog.csdnimg.cn/20201226002700451.png
[https_pan.baidu.com_s_1M9R0QNWaR_Lp1_j_bYvqoA]: https://pan.baidu.com/s/1M9R0QNWaR_Lp1_j_bYvqoA
[20201226002725324.png_pic_center]: https://img-blog.csdnimg.cn/20201226002725324.png#pic_center
[20201226002811747.png_pic_center]: https://img-blog.csdnimg.cn/20201226002811747.png#pic_center
[20201226003009588.gif_pic_center]: https://img-blog.csdnimg.cn/20201226003009588.gif#pic_center
[https_pan.baidu.com_s_1ikReql_RAawtstPJA6MHmg]: https://pan.baidu.com/s/1ikReql_RAawtstPJA6MHmg
[20201226003306298.png_pic_center]: https://img-blog.csdnimg.cn/20201226003306298.png#pic_center
[Dawo]: https://img-blog.csdnimg.cn/20201228004253481.png#pic_center