前言

给孩子练习键盘打字, 发现终端还是欠点意思, 研究了一下gui, 最终用 fltk库弄了一个.

对于没有接触过gui的人, 发现, 编程的逻辑和终端区别很大, 很繁琐, 可能需要适应适应, 另外, 文档很重要, 示例很重要.

一、FLTK GUI 库

FLTK is a cross-platform C++ GUI toolkit for UNIX®/Linux® (X11), Microsoft® Windows®, and macOS®. FLTK provides modern GUI functionality without the bloat and supports 3D graphics via OpenGL® and its built-in GLUT emulation.

FLTK is designed to be small and modular enough to be statically linked, but works fine as a shared library. FLTK also includes an excellent UI builder called FLUID that can be used to create applications in minutes.

FLTK is provided under the terms of the GNU Library Public License, Version 2 with exceptions that allow for static linking.

总之, 就是足够小, 跨平台, 可商用, 当然更具体的请去官网查看.

二、使用步骤

1.引入库

我使用msys2安装的, 因为比较容易, 我暂时不想自己编译.

以下是比较常用的头文件, 主要用于建立窗口, 输入输出框, 时钟, GUI也少不了图片解析, 比如jpg和png.

#include <FL/Fl.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_Clock.H>
#include <FL/Fl_Double_Window.H>
#include <FL/Fl_Input.H>
#include <FL/Fl_Output.H>
#include <FL/Fl_Image.H>
#include <FL/Fl_PNG_Image.H>

编译参数需要加上fltk的库文件

 E:\msys64\clang64\bin\clang++.exe -glldb  -lfltk -lfltk_images  test227.cpp p -o E:\clangC++\answer\C++\test227.exe

2.使用代码

代码如下（示例）：

头文件, 用于给出最基本的结构及函数, 为了能够catch键盘事件, 派生一个windowInput类, 改写handle函数.

// generated by Fast Light User Interface Designer (fluid) version 1.0308
#ifndef TYPING_H
#define TYPING_H

#include <FL/Fl.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_Clock.H>
#include <FL/Fl_Double_Window.H>
#include <FL/Fl_Input.H>
#include <FL/Fl_Output.H>

struct windowInput : Fl_Input
{
    windowInput(int X, int Y, int W, int H, const char *l = nullptr)
        : Fl_Input(X, Y, W, H, l)
    {}
    auto handle(int event) -> int override;
};

struct windowObject
{
    Fl_Double_Window *window;
    Fl_Box *box;
    windowInput *input;
    Fl_Output *displayText;
    Fl_Output *displayChar;
    Fl_Clock *clock;
};

auto makeWindow(const char *fileName) -> windowObject &;

auto openFile(const char *fileName) -> bool;

#endif

cpp文件, 装载函数实现, 但我要坦白, 由于对库不是特别了解, 使用了大量的全局数据, 但通过匿名的命名空间, 约束在cpp文件中, 尽量不污染全局.

gui本身不复杂, 但需要熟练, 文档和示例协助理解.

当然, 编程思路和终端编程还是有比较大的区别, 比如, 原先我想主程序由while循环和标准IO流驱动, 但发现, 在这种框架下是不可能的, 因为需要在进入gui框架循环前不能有任何阻塞, 否则就进入不了图形界面, 所以需要将循环部分揉进GUI框架的handle函数中, 而这个函数, 还不能传进数据, 只能用全局数据.

不过也可能是我用的实在不熟, 一天时间有点紧, 可能callback这种传数据的方法, 更符合这种编程模式, 只是我不太了解callback的运行逻辑(这个GUI框架的逻辑), 可能要看看源码.

// generated by Fast Light User Interface Designer (fluid) version 1.0308
#include "typingGUI.h"
#include <FL/Fl_Image.H>
#include <FL/Fl_PNG_Image.H>
#include <fstream>
#include <string>

namespace
{
windowObject winObj;

std::ifstream file;
std::string text;
std::array<char, 128> chrArr{"请输入: "};

int chr = 0xff8d;
int charIndex;

auto image_keyboard2(const char *fileName) -> Fl_Image *
{
    static Fl_Image *image = new Fl_PNG_Image(fileName);
    return image;
}

} // namespace

auto openFile(const char *fileName) -> bool
{
    file.open(fileName);
    return file.is_open();
}

auto windowInput::handle(int event) -> int
{
    if (event == FL_KEYDOWN || event == FL_KEYUP)
    {
        static int keycode;
        keycode = Fl::event_key();

        if (keycode == chr)
        {
            if (charIndex != text.size())
            {
                chr = text[charIndex];
                chrArr[11] = text[charIndex++];
                winObj.displayChar->value(chrArr.data());
                winObj.input->value(reinterpret_cast<char *>(&chr));
            }
            else if (file >> text)
            {
                charIndex = 0;
                chr = text[charIndex];
                chrArr[11] = text[charIndex++];
                winObj.displayText->value(text.c_str());
                winObj.displayChar->value(chrArr.data());
                winObj.input->value(reinterpret_cast<char *>(&chr));
            }
            else
            {
                winObj.displayText->value("恭喜过关, 请关闭窗口");
                file.close();
            }
        }
        else
        {
            winObj.input->value(reinterpret_cast<char *>(&keycode));
        }
    }
    return Fl_Input::handle(event);
}

auto makeWindow(const char *fileName) -> windowObject &
{
    winObj.window = new Fl_Double_Window(1920, 1017, "打字练习");
    winObj.window->resizable(winObj.window);

    // 获取系统中的字体数目
    Fl::set_fonts("-*");

    if (winObj.window != nullptr)
    {
        winObj.window->box(FL_UP_BOX);
        winObj.window->color(static_cast<Fl_Color>(25));

        {
            winObj.box = new Fl_Box(80, 23, 1720, 512);
            winObj.box->image(
                image_keyboard2(fileName)); //"E:\\clangC++\\keyboard2.png"
            winObj.box->labelfont(617);
            winObj.box->labelsize(53);
            winObj.box->labelcolor(static_cast<Fl_Color>(139));
        } // Fl_Box* box

        {
            winObj.input = new windowInput(276, 747, 1517, 84, "input:");
            winObj.input->labelfont(617);
            winObj.input->labelsize(72);
            winObj.input->textfont(617);
            winObj.input->textsize(72);
            winObj.input->align(static_cast<Fl_Align>(36));
        } // Fl_Input* input

        {
            winObj.displayText = new Fl_Output(83, 545, 1710, 84);
            winObj.displayText->box(FL_UP_BOX);
            winObj.displayText->labeltype(FL_NO_LABEL);
            winObj.displayText->labelfont(617);
            winObj.displayText->labelsize(72);
            winObj.displayText->textfont(617);
            winObj.displayText->textsize(72);
            winObj.displayText->value("按回车开始练习!");
        } // Fl_Text_Display* displayText

        {
            winObj.displayChar = new Fl_Output(83, 644, 1710, 84);
            winObj.displayChar->box(FL_UP_BOX);
            winObj.displayChar->labeltype(FL_NO_LABEL);
            winObj.displayChar->labelfont(617);
            winObj.displayChar->labelsize(72);
            winObj.displayChar->textfont(617);
            winObj.displayChar->textsize(72);
        } // Fl_Text_Display* displayChar

        {
            winObj.clock = new Fl_Clock(918, 849, 150, 150);
            winObj.clock->labelfont(617);
            winObj.clock->labelsize(24);
            winObj.clock->align((FL_ALIGN_CENTER));
        } // Fl_Clock* clock
        winObj.window->end();

        winObj.window->show();
    } // Fl_Double_Window* window

    return winObj;
}

下面是测试程序, 就显得十分简单了, 毕竟运行逻辑都在Cpp文件中了

#include "typingGUI.h"

auto main() -> int
{
    openFile("E:\\clangC++\\keytest.txt");
    makeWindow("E:\\clangC++\\keyboard2.png");

    return Fl::run();
}