### FLTK-Tutorial
#### 一、引言
FLTK（Fast Light Tool Kit）是一款用于C++程序的轻量级图形用户界面库。它适用于多种操作系统平台，包括Linux、Windows、Apple Mac以及DOS。相较于其他GUI库，FLTK具有较低的内存需求，并且可以作为静态库与应用程序进行链接，也可以编译为共享库。
当前最新的稳定版本是1.3.0。尽管之前有过2.0版本的开发计划，但该分支最终未能脱离Alpha阶段，因此被放弃，后续开发集中于1.3.0版本之上。对于希望使用FLTK的新开发者来说，1.3.0是推荐使用的版本。
#### 二、FLTK结构
由于FLTK是用C++编写的，它为每个GUI组件定义了一个类。在GUI工具包中，通常将所有类型的对象如按钮、输入框、滚动条等称为“小部件”（Widgets）。在FLTK中，`Fl_Widget`类作为所有小部件的基本类，其他各种小部件都是从`Fl_Widget`类派生出来的。
以下是一些直接继承自`Fl_Widget`的子类示例：
- `Fl_Box`
- `Fl_Button`
- `Fl_Group`
- `Fl_Input`
- `Fl_Menu`
- `Fl_Progress`
- `Fl_Timer`
值得注意的是，`Fl_Window`类是从`Fl_Group`类派生而来的，这使得`Fl_Window`成为创建任何程序窗口的基础类。
#### 三、安装FLTK工具包
安装FLTK的具体步骤依赖于所使用的操作系统。一般而言，可以通过包管理器或者从源代码构建的方式来安装FLTK。例如，在Linux上，可以使用`apt-get`或`yum`来安装预编译的FLTK包。对于Windows系统，可能需要从官方网站下载相应的安装程序。
#### 四、第一个程序
编写一个简单的FLTK程序通常包括以下步骤：
1. 包含必要的头文件。
2. 定义一个窗口对象。
3. 在窗口内添加所需的控件。
4. 显示窗口并进入事件处理循环。
下面是一个基本的FLTK程序示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Hello World");
Fl_Box *hello = new Fl_Box(40, 40, 120, 80, "Hello World!");
hello->box(FL_UP_BOX);
hello->labelsize(24);
hello->labelfont(FL_BOLD+FL_ITALIC);
win->end();
win->show();
return Fl::run();
}
```
#### 五、按钮小部件
按钮是GUI应用程序中最常见的元素之一。在FLTK中，`Fl_Button`类提供了基本的按钮功能。可以通过设置回调函数来响应用户的点击操作。
下面是一个简单的按钮示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_Button.H>
void cb(Fl_Widget*, void*) {
std::cout << "Button clicked!" << std::endl;
}
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Button Example");
Fl_Button *btn = new Fl_Button(60, 60, 100, 40, "Click me!");
btn->callback(cb);
win->end();
win->show();
return Fl::run();
}
```
#### 六、回调函数
在FLTK中，回调函数是与用户交互的核心机制。当用户执行某个操作时（如点击按钮），会触发相应的回调函数。回调函数可以接受两个参数：触发回调的小部件指针和一个用户数据指针。通常情况下，回调函数只接收小部件指针就足够了。
上面的例子展示了如何定义一个简单的回调函数`cb()`，并在按钮点击时调用它。
#### 七、输入和输出对话框
FLTK提供了多个函数来显示简单的输入和输出对话框。这些对话框可以用来提示用户输入信息或者显示消息。常用的函数有`Fl::input()`和`Fl::alert()`。
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
void input_cb(Fl_Widget*, void*) {
char* name = Fl::input("Please enter your name:");
if (name) {
std::cout << "Hello " << name << "!" << std::endl;
free(name); // Don't forget to free the memory allocated by Fl::input()
}
}
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Input Box Example");
Fl_Button *btn = new Fl_Button(60, 60, 100, 40, "Enter Name");
btn->callback(input_cb);
win->end();
win->show();
return Fl::run();
}
```
#### 八、编辑器小部件
`Fl_Input`类提供了文本输入的功能，用户可以在其中键入文字。此外，还有`Fl_Multiline_Input`类支持多行文本输入。
下面是一个简单的文本输入框示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_Input.H>
void show_text_cb(Fl_Widget*, void*) {
Fl_Input* input = (Fl_Input*)Fl::find_widget("input");
std::cout << "Text: " << input->value() << std::endl;
}
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Input Example");
Fl_Input *input = new Fl_Input(20, 20, 160, 25, "input");
Fl_Button *btn = new Fl_Button(60, 60, 100, 40, "Show Text");
btn->callback(show_text_cb);
win->end();
win->show();
return Fl::run();
}
```
#### 九、浏览器小部件
`Fl_Browser`类提供了列表框的功能。它可以显示一个包含多项的列表，并允许用户选择其中的一项或多选。
下面是一个简单的`Fl_Browser`示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Browser.H>
#include <FL/Fl_Button.H>
void add_item_cb(Fl_Widget*, void*) {
Fl_Browser* browser = (Fl_Browser*)Fl::find_widget("browser");
browser->add("New Item");
}
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Browser Example");
Fl_Browser *browser = new Fl_Browser(20, 20, 160, 100, "browser");
Fl_Button *btn = new Fl_Button(60, 140, 100, 40, "Add Item");
btn->callback(add_item_cb);
win->end();
win->show();
return Fl::run();
}
```
#### 十、菜单栏小部件
`Fl_Menu_Bar`类提供了一个简单的菜单栏。可以创建下拉菜单，以及菜单项，并为每个菜单项关联一个回调函数。
下面是一个简单的菜单栏示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Menu_Bar.H>
void menu_cb(Fl_Widget* widget, void*) {
Fl_Menu_Bar* menu = (Fl_Menu_Bar*)widget;
std::cout << "Selected: " << menu->label() << std::endl;
}
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Menu Bar Example");
Fl_Menu_Bar *menu = new Fl_Menu_Bar(0, 0, 200, 20, "menu");
menu->menu({
{"File", nullptr, nullptr, 0, FL_SUBMENU},
{"Open", nullptr, menu_cb, (void*)"Open"},
{"Save", nullptr, menu_cb, (void*)"Save"},
{nullptr}, // separator
{"Edit", nullptr, nullptr, 0, FL_SUBMENU},
{"Cut", nullptr, menu_cb, (void*)"Cut"},
{"Copy", nullptr, menu_cb, (void*)"Copy"},
{nullptr}, // separator
{"Help", nullptr, nullptr, 0, FL_SUBMENU},
{"About", nullptr, menu_cb, (void*)"About"},
{nullptr} // end of menu
});
win->end();
win->show();
return Fl::run();
}
```
#### 十一、工具栏和下拉列表
工具栏和下拉列表是GUI设计中的常见元素。FLTK通过`Fl_Toolbar`和`Fl_Choice`类提供了这两个功能。
下面是一个简单的工具栏和下拉列表示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Toolbar.H>
#include <FL/Fl_Choice.H>
void toolbar_cb(Fl_Widget*, void*) {
std::cout << "Toolbar button clicked." << std::endl;
}
void choice_cb(Fl_Widget* widget, void*) {
Fl_Choice* choice = (Fl_Choice*)widget;
std::cout << "Selected: " << choice->text(choice->value()) << std::endl;
}
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Toolbar and Choice Example");
Fl_Toolbar *toolbar = new Fl_Toolbar(20, 20, 160, 20, "toolbar");
toolbar->add("Action", nullptr, toolbar_cb);
Fl_Choice *choice = new Fl_Choice(20, 50, 160, 20, "choice");
choice->add("Option 1");
choice->add("Option 2");
choice->callback(choice_cb);
win->end();
win->show();
return Fl::run();
}
```
#### 十二、带有单选按钮的对话框
在FLTK中，`Fl_Round_Button`和`Fl_Check_Button`类提供了单选按钮的功能。可以通过`Fl_Group`类来组合多个单选按钮，并创建一个简单的对话框。
下面是一个简单的带有单选按钮的对话框示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Round_Button.H>
#include <FL/Fl_Group.H>
void check_cb(Fl_Widget*, void*) {
Fl_Round_Button* radio1 = (Fl_Round_Button*)Fl::find_widget("radio1");
Fl_Round_Button* radio2 = (Fl_Round_Button*)Fl::find_widget("radio2");
if (radio1->value())
std::cout << "Radio 1 is selected." << std::endl;
else if (radio2->value())
std::cout << "Radio 2 is selected." << std::endl;
}
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Radio Button Example");
Fl_Group *group = new Fl_Group(20, 20, 160, 100, "group");
Fl_Round_Button *radio1 = new Fl_Round_Button(20, 40, 100, 30, "radio1");
radio1->label("Option 1");
Fl_Round_Button *radio2 = new Fl_Round_Button(20, 80, 100, 30, "radio2");
radio2->label("Option 2");
Fl_Button *btn = new Fl_Button(60, 140, 100, 40, "Check Selection");
btn->callback(check_cb);
group->end();
win->end();
win->show();
return Fl::run();
}
```
#### 十三、显示图像
FLTK支持加载和显示图像。`Fl_Image`类及其派生类（如`Fl_JPEG_Image`、`Fl_PNG_Image`等）提供了加载不同格式图像的能力。
下面是一个简单的显示图像的示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_JPEG_Image.H>
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Image Example");
Fl_JPEG_Image img("image.jpg");
Fl_Box *box = new Fl_Box(20, 20, 160, 160, "image");
box->image(&img);
box->align(FL_ALIGN_IMAGE | FL_ALIGN_INSIDE);
win->end();
win->show();
return Fl::run();
}
```
#### 十四、分组小部件在标签页中
`Fl_Tabs`类提供了一种组织多个窗口的方式，可以将其视为标签页。用户可以通过点击不同的标签来切换到不同的窗口。
下面是一个简单的标签页示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_Tabs.H>
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Tabs Example");
Fl_Tabs *tabs = new Fl_Tabs(20, 20, 160, 160, "tabs");
Fl_Box *box1 = new Fl_Box(20, 20, 160, 160, "tab1");
box1->label("Tab 1");
tabs->add(box1);
Fl_Box *box2 = new Fl_Box(20, 20, 160, 160, "tab2");
box2->label("Tab 2");
tabs->add(box2);
win->end();
win->show();
return Fl::run();
}
```
#### 十五、处理鼠标事件 - 第一部分
在FLTK中，可以通过覆盖`Fl_Widget`类中的虚拟函数`handle(int)`来处理鼠标事件。这个函数接收一个整型参数，表示事件类型。例如，`FL_PUSH`表示鼠标按下事件，`FL_RELEASE`表示鼠标释放事件。
下面是一个简单的处理鼠标按下的示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>
class MyBox : public Fl_Box {
public:
int handle(int event) override {
if (event == FL_PUSH) {
std::cout << "Mouse pushed." << std::endl;
}
return Fl_Box::handle(event);
}
};
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Mouse Example");
MyBox *box = new MyBox(20, 20, 160, 160, "box");
win->end();
win->show();
return Fl::run();
}
```
#### 十六、处理鼠标事件 - 第二部分
继续上面的例子，我们可以扩展`MyBox`类来处理更多的鼠标事件，如鼠标移动和拖拽。
下面是一个简单的处理鼠标移动和拖拽的示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>
class MyBox : public Fl_Box {
public:
int handle(int event) override {
switch (event) {
case FL_PUSH:
std::cout << "Mouse pushed." << std::endl;
break;
case FL_DRAG:
std::cout << "Mouse dragged." << std::endl;
break;
case FL_MOVE:
std::cout << "Mouse moved." << std::endl;
break;
default:
return Fl_Box::handle(event);
}
return 1; // Event handled
}
};
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Mouse Example");
MyBox *box = new MyBox(20, 20, 160, 160, "box");
win->end();
win->show();
return Fl::run();
}
```
#### 十七、显示由FLTK生成的事件
有时候，为了调试或者了解应用程序中发生的事件，我们需要查看由FLTK产生的事件。可以通过打印出事件类型来实现这一目的。
下面是一个简单的打印事件类型的示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>
class MyBox : public Fl_Box {
public:
int handle(int event) override {
std::cout << "Event: " << event << std::endl;
return Fl_Box::handle(event);
}
};
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Event Example");
MyBox *box = new MyBox(20, 20, 160, 160, "box");
win->end();
win->show();
return Fl::run();
}
```
#### 十八、树形小部件
`Fl_Tree`类提供了树形结构的展示方式，适用于显示目录结构或层级关系的数据。
下面是一个简单的树形小部件示例：
```cpp
#include <FL/FL.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Tree.H>
int main() {
Fl_Window *win = new Fl_Window(200, 200, "Tree Example");
Fl_Tree *tree = new Fl_Tree(20, 20, 160, 160, "tree");
tree->add("Root", nullptr, nullptr, 0, FL_TREE_ROOT);
tree->add("Child 1", "Root", nullptr, 0, FL_TREE_LEAF);
tree->add("Child 2", "Root", nullptr, 0, FL_TREE_LEAF);
win->end();
win->show();
return Fl::run();
}
```
#### 十九、参考
本教程涵盖了FLTK的一些基础知识和常用小部件。更多关于FLTK的信息可以参考官方文档和API文档。此外，FLTK社区论坛也是一个很好的资源，可以获取帮助和支持。
