FLTK学习笔记

FLTK GUI模块

Ciallo～(∠・ω< )⌒★

一、FLTK导入

​ FLTK库文件下载地址：Download - Fast Light Toolkit (FLTK)

​ 进入到了下载地址后，下载最新版源码即可，具体安装步骤见下面这篇文章（可能会有点麻烦，慢慢来，不急）

​ Visual Studio 安装 FLTK_vs中添加fltk-CSDN博客

​ 若在使用过程中，发现无法使用中文，可以试着添加预编译命令：

#pragma execution_character_set("utf-8")

​ 该句会指定utf-8作为编码字符集

​ 另外，有些控件方法在不同控件之间是可以通用的，所以如果在使用某个控件时看到了在该控件下未列出的方法，可以向前查找一下，看看是否在前面出现。

二、FLTK控件简介

控件创建方法

​ 在FLTK中，所有的控件的创建方法都是一样的，其模式如下：

FL_SomeWidget* pw=new SomeWidget(x,y,w,h,label)

其中

• SomeWidget
  • 控件名
• x，y
  • 控件的x，y轴（控件的左上角）
• w，h
  • 控件的宽高
• label
  • 控件要显示的文本

窗口控件Fl_Window

作用

​ FL_Window用于创建窗口，窗口是用户界面的基本组成部分，用于承载其他可视化组件，以及提供给用户交互。

​ 需要包含的头文件：FL/Fl.H、FL/Fl_Window.H

构建方法

FL_Window* pw=new FL_Window(x,y,label)

• x，y
  • 坐标
• label
  • 窗口标题

​ 当有多个窗口时使用pw->end()结束窗口构建

显示窗口

​ 要想要显示窗口，可以使用FL_Window对象的show方法，然后使用retrun Fl::run()方法来开启事件循环。

如：

#pragma execution_character_set("utf-8")	//使用utf-8作为字符集，解决中文乱码问题
#include <FL/Fl.H>
#include <FL/Fl_Window.H>


int main(int argc, char** argv)
{
	Fl_Window* window = new Fl_Window(500,300 ,"测试样例");//定义窗口对象
	window->show();//显示窗口
	return Fl::run();//开启事件循环
}

控制方法

属性设置

方法	作用
void size(int w,int h)	调整窗口大小
void position(int x,int y)	调整窗口位置
void label(const char *title)	设置窗口标题
void resizable(Fl_Widget *w)	设置窗口大小可调整，并指定组件W为调整大小时的参考组件

窗口操作

方法	作用
void show()	显示窗口
void hide()	隐藏窗口
void iconize()	最小化窗口
void fullscreen()	将窗口设置为全屏模式
void make_current()	*使窗口成为当前OpenGL上下文
void make_current(Fl_Widget*w)	使指定的部件成为当前OpenGL上下文
void add(Fl_Widget*w)	将组件添加到窗口中

Fl_Box

作用

​ Fl_Box是FLTK中最简单的空间之一，用于显示静态文本或简单的图形图像。

构建方法

Fl_Box* box=new Fl_Box(x,y,w,h,label)

常用方法

• 标签相关方法
  • void align(ailignment)设置标签对齐方式
  • void label(const char *text)设置标签
  • void labelcolor(Fl_Color color)设置标签颜色
  • Fl_Color labelcolor()获取标签颜色
  • void labelfont(Fl_Font font)设置标签字体
  • void labelsize(int size)设置标签字体大小
• 盒子类型相关方法
  • void box(Fl_Boxtype type)设置控件外观
• 颜色相关
  • void color(Fl_Color color)设置控件的背景色
  • void color(Fl_Color bg,Fl_Color sel)设置背景色和被选中时的颜色
  • 注：box默认的盒子（边框）样式为FL_NO_BOX，即无盒子，此时改变它的颜色会由于无盒子的样式而不显示，为解决此问题，我们仅需要将样式设置为有盒子（边框）的即可
• 图像相关方法
  • void image(Fl_Image *img)设置图像
    • 注
      • Fl_Image图像可以使用Fl_PNG_Image(const char* dir)和Fl_JPEG_Image(const char* dir)来读取本地的图片
      • 使用Fl_Image需要导入两个第三方库：zlib,libpng
      • 导入方法见下
      • 两个第三方库的导入方法
  • Fl_Image image()获取当前图像
  • void deimage(Fl_Image*img)设置鼠标悬停时显示的图像

按钮控件

常用按钮控件

控件名	作用
Fl_Button	普通按钮
Fl_Light_Button	灯光按钮，通常用于表示状态或模式
Fl_Return_Button	回车按钮，用户按回车时执行的按钮，需要窗口使用方法指定
Fl_Check_Button	复选按钮
Fl_Repeat_Button	重复按钮，当用户按住按钮时，会连续触发事件
Fl_Round_Button	圆形单选按钮
Fl_Radio_Button	方形单选按钮
Fl_Toggle_Button	切换按钮，用于在两个状态间切换
Fl_Scroll_Button	滚动按钮，用于上下，左右滚动内容

注：每个控件的头文件均为控件名.H

构建方法

Fl_ButtonName* butn=new Fl_ButtonName(x,y,w,h,label)

• x，y
  • 坐标
• w，h
  • 宽高
• label
  • 显示的文字

例

#pragma execution_character_set("utf-8")	//使用utf-8作为字符集，解决中文乱码问题
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include<FL/Fl_Button.H>
#include<FL/Fl_Radio_Button.H>
#include<FL/Fl_Round_Button.H>
#include<FL/Fl_Light_Button.H>
#include<FL/Fl_Check_Button.H>
#include<FL/Fl_Repeat_Button.H>
#include<FL/Fl_Toggle_Button.H>
int main(int argc, char** argv)
{
	//创建窗口
	Fl_Window* window = new Fl_Window(800,100,"按钮控件");
	//普通按钮
	Fl_Button* button = new Fl_Button(0, 20, 100, 60, "普通按钮");
	//灯光按钮
	Fl_Light_Button* lib = new Fl_Light_Button(110, 20, 100, 60, "灯光按钮");
	//复选按钮
	Fl_Check_Button* chb = new Fl_Check_Button(220, 20, 100, 60, "复选按钮");
	//重复按钮
	Fl_Repeat_Button* reb = new Fl_Repeat_Button(330, 20, 100, 60, "重复按钮");
	//圆形单选按钮
	Fl_Round_Button* rob = new Fl_Round_Button(440, 20, 100, 60, "圆形单选按钮");
	//方形单选按钮
	Fl_Radio_Button* rab = new Fl_Radio_Button(550, 20, 100, 60, "方形单选按钮");
	//切换按钮
	Fl_Toggle_Button* tob = new Fl_Toggle_Button(660, 20, 100, 60, "切换按钮");
	window->show();
	return Fl::run();
}

控制方法

标签设置

​ 通过void label(const char* label)方法设置按钮标签文本

状态设置

​ void value(int)设置按钮的状态（1选中，0未选中）

​ int value()获取按钮当前的状态（1选中，0未选中）

外观设置

​ void color(Fl_Color)设置按钮的背景颜色

​ void selection_color(Fl_Color)设置按钮被选中时的背景色

​ void labelcolor(Fl_Color)设置按钮的标签文本颜色

​ void box(Fl_Boxtype)设置按钮的边框样式

​

注：Fl_Color为FLTK中内置的颜色，若想要使用rgb色，需要导入头文件Fl_Color_Chooser.H，使需用其中的fl_rgb_color(int ,int ,int )函数进行转换才行

大小位置设置

​ void resize(int x,int y,int w,int h)设置按钮的位置和大小

其他方法

• void down_box(Fl_Boxtype)设置按钮按下时的外观效果
• Fl_Boxtype down_box()获取按钮按下时的外观效果
• void down_color(uchar r,uchar g,uchar b)设置按钮按下时的背景色
• void clear()清除按钮的标签文本

例

#pragma execution_character_set("utf-8")//使用utf-8作为字符集，解决中文乱码问题
#include<string>
#include<iostream>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include<FL/Fl_Button.H>
#include<FL/Fl_Radio_Button.H>
#include<FL/Fl_Round_Button.H>
#include<FL/Fl_Light_Button.H>
#include<FL/Fl_Check_Button.H>
#include<FL/Fl_Repeat_Button.H>
#include<FL/Fl_Toggle_Button.H>
#include<FL/Fl_Color_Chooser.H>
using namespace std;
int main(int argc, char** argv)
{
	//创建窗口
	Fl_Window* window = new Fl_Window(600,200,"按钮控件");
	//未操作按钮
	Fl_Button* b = new Fl_Button(10, 45, 100, 60, "对照按钮");
	//测试按钮
	Fl_Button* b1 = new Fl_Button(210, 10, 100, 60, "测试按钮");
	Fl_Button* b2 = new Fl_Button(410, 10, 100, 60, "测试按钮");
	Fl_Button* b3 = new Fl_Button(210, 80, 100, 60, "测试按钮");
	Fl_Button* b4 = new Fl_Button(410, 80, 100, 60, "测试按钮");


	//更改b1标签
	b1->label("awsl");
	//设置b2背景色为天依蓝，文本色为红色，边框样式为边框框
	b2->color(fl_rgb_color(102,204,255));
	b2->labelcolor(fl_rgb_color(234, 28, 39));
	b2->box(FL_BORDER_BOX);

	//设置b3按下时的背景色为深蓝色
	b3->down_color(fl_rgb_color(6, 127, 215));
	//设置b3选中
	b3->value(1);

	//将b3的状态在b4上显示
	string b3state = to_string(b3->value());
	const char* state = b3state.c_str();
	b4->label(state);



	window->show();
	return Fl::run();
}

文本控件

常用的文本控件

控件名	作用
Fl_Text_Display	用于显示静态文本或者只读文本框，支持滚动、选择、复制文本
Fl_Text_Buffer	用于管理文本数据的缓冲区。即控制文本控件的文本
Fl_Text_Editor	用于编辑文本的控件，支持用户输入和编辑文本，并支持基本的编辑操作
Fl_Hold_Browser	以列表形式显示文本
Fl_Input	用于接受单行文本输入的窗口控件
Fl_Multiline_Input	用于接受多行文本输入的窗口控件
Fl_Output	用于显示单行文本输出的窗口控件
Fl_Multiline_Output	用于显示多行文本输出的窗口控件

文本缓冲区Fl_Text_Buffer

作用

​ Fl_Text_Buffer控件可用于修改文本，它可以指向一个文本控件的文本缓冲区，通过对它进行修改来改变文本控件显示的文本。

创建方法

//创建buffer控件
Fl_Text_Buffer* buf=new Fl_Text_Buffer();
//将buffer控件指向文本控件的文本缓冲区
a_text_Widget_point->buffer(buf);

操作方法

• void text(const char* text)设置缓冲区文本内容为指定文本
• const char* text()获取缓冲区内容
• int loadfile(const char* filename)从指定文件加载文本内容到缓冲区中
• int savefile(const char* filename)将缓冲区的文本内容保存到指定文件中
• void insert(int pos,const char* text)在指定位置插入文本
• void remove(int start_pos,int end_pos)删除指定范围内的文本
• void replace(int start_pos,int end_pos,const char* text)替换指定范围内的文本
• void select(int start_pos,int end_pos)选中指定范围内的文本
• const char* selected_text()获取当前选中的文本内容
• void highlight(int start_pos,int end_pos,Fl_Color color)使用指定颜色高亮指定范围的文本
• void unhighlight()取消文本缓冲区内的高亮显示
• int search_forward(const char* text,int start_pos)从指定位置开始向前搜索指定文本，返回第一次检索到该文本的首字母的位置
• in search_backward(const char* text,int start_pos)从指定位置开始向后搜索指定文本，返回第一次检索到该文本的首字母的位置

输出文本框

Fl_Output

作用

​ Fl_Output为单行输出框，可以用于显示单行文本的输出，但是不支持用户编辑文本或输入文本。

创建方法

Fl_Output* output=new Fl_Output(int x,int y,int w,int h,const char* label=0)

• x，y
  • 坐标位置
• w，h
  • 宽高
• label（可选）
  • 标签
  • 标签并不显示在文本框内，而是在文本框外，通常显示在文本框左边，如
  • 

操作方法

• const char* value()获得显示的文本内容
• void value(const char* text)设置显示的文本内容
• void textcolor(Fl_Color color)设置文本框内文本的颜色
• void color(Fl_Color color)设置文本框背景色
• Fl_Color textcolor()获取当前文本框文本的颜色
• void textfont(int s)设置文本框显示字体
  • FLTK提供了一些预定义的字体常量，可以直接使用这些常量来改变字体
• int textfont()获取文本框显示字体
• void textsize(int s)设置文本字号
• int textsize()获得文本字号
• void align(int a)设置标签位置
• int align()获取标签位置
• void label(const char* label)设置文本框标签
• const char* label()获取文本框标签
• void labelcolor(Fl_Color)设置标签颜色
• void box(Fl_Boxtype)设置边框样式
• void cursor_color(Fl_Color)设置光标颜色
• void selection_color(Fl_Color)设置被选中区域的背景色

例

#pragma execution_character_set("utf-8")//使用utf-8作为字符集，解决中文乱码问题
#include<string>
#include<iostream>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include<FL/Fl_Color_Chooser.H>
#include<FL/Fl_Text_Display.H>
#include<FL/Fl_Multiline_Input.H>
#include<FL/Fl_Text_Editor.H>
#include<FL/Fl_Output.H>
using namespace std;
int main(int argc, char** argv)
{
	//创建窗口
    Fl_Window* window = new Fl_Window(800, 200, "文本控件");
    //output控件
    auto output1 = new Fl_Output(150,50,200,25,"output1");
    auto output2 = new Fl_Output(450, 50, 200, 25, "output2");
    auto output3 = new Fl_Output(150, 100, 200, 25, "output3");
    auto output4 = new Fl_Output(450, 100, 200, 25, "output4");

    //设置output1的文本内容
    output1->value("Ciallo～(∠·ω< )⌒★");
    //获取output1的内容，并将它增长后显示在output2上
    string opval1 = output1->value();
    output2->value((opval1 + "hello").c_str());
    //将output1的文本颜色设置为天依蓝
    output1->textcolor(fl_rgb_color(102, 204, 255));
    //将output1的背景色设为灰色
    output1->color(fl_rgb_color(77, 77, 77));
   
    output3->value("Sakura");
    output4->value("Sakura");
    //设置output3的字体
    output3->textfont(FL_TIMES_BOLD_ITALIC);
    //设置output4的字号
    output4->textsize(20);
    //设置output3的标签显示在上方
    output3->align(FL_ALIGN_TOP);
    //设置output3边框样式为圆角无阴影
    output3->box(FL_RFLAT_BOX);
    //设置output4被选中区域颜色为天依蓝
    output4->selection_color(fl_rgb_color(102, 204, 255));
    //设置output4标签颜色
    output4->labelcolor(fl_rgb_color(40, 151, 71));


    window->end(); // 完成窗口构建
    window->show(); // 显示窗口
	return Fl::run();
}

Fl_Multiline_Output

​ Fl_Multiline_Output用法与Fl_Output基本一样，只是Fl_Multilin_Output可以显示多行文本。如

#pragma execution_character_set("utf-8")//使用utf-8作为字符集，解决中文乱码问题
#include<string>
#include<iostream>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include<FL/Fl_Color_Chooser.H>

#include<FL/Fl_Output.H>
#include<FL/Fl_Multiline_Output.H>

using namespace std;
int main(int argc, char** argv)
{
	//创建窗口
    Fl_Window* window = new Fl_Window(400, 300, "文本控件");
    auto output = new Fl_Output(100,50,200,50);
    auto mulilineOutput = new Fl_Multiline_Output(100,150,200,50);

    output->value("这里是output第一行\n这里是output第二行");
    mulilineOutput->value("这里是mulilineOutput第一行\n这里是mulilineOutput第二行");


    window->end(); // 完成窗口构建
    window->show(); // 显示窗口
	return Fl::run();
}

​ 可以看到，普通的Output并不能输出多行文本，而mulilineOutput可以

Fl_Text_Display

作用

​ Fl_Text_Display是一个用于显示文本的控件，常用于显示大量的文本信息，在文本信息超过显示区域时，会自动添加滚动条。另外，其为一个只读控件，用户不能直接编辑其中的文本内容。

创建方法

Fl_Text_Display* textDisplay=new Fl_Text_Display(x,y,w,h,label)

• x，y
  • 坐标位置
• w，h
  • 宽高
• label
  • 标签

操作方法

• void buffer(Fl_Text_Buffer* buf)将指定文本缓冲区连接到文本显示控件
• Fl_Text_Buffer* buffer()返回当前文本控件使用的文本缓冲区
• void textfont(int font)设置文本字体
• void textsize(int size)设置文本大小
• void textcolor(Fl_Color color)设置文本颜色
• void color(Fl_Color bg)设置背景色
• void scroll(int TopLineNum,int horizOffset)设置滚动条位置
  • TopLineNum：顶部的行数，即最上面为第几行
  • horizOffset：水平偏移量，即向右偏移的字符数

例

#pragma execution_character_set("utf-8")//使用utf-8作为字符集，解决中文乱码问题
#include<string>
#include<iostream>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include<FL/Fl_Color_Chooser.H>
#include<FL/Fl_Text_Display.H>
using namespace std;
int main(int argc, char** argv)
{
	//创建窗口
    Fl_Window* window = new Fl_Window(400, 300, "文本控件");
    //创建textDisplay控件
    auto textDisplay = new Fl_Text_Display(100, 100, 200, 100, "textDisplay");
   //获取textDisplay控件的文本缓冲区
    auto buf = new Fl_Text_Buffer();
    textDisplay->buffer(buf);
    //向其缓冲区内插入如下字符
    buf->text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\n\
bbbbbbbbbbbb\n\
cccccccccccccc\n\
ddddddddddddddd\n\
eeeeeeeeeeeeeeeee\n\
f1f2f3ffffffffffffffffffffffffffffffffffffffffffffffffff");
    //设置滚动条位置
    textDisplay->scroll(3,6);
    //设置文本前景色为天依蓝
    textDisplay->textcolor(fl_rgb_color(105, 205, 255));
    //设置背景色为灰色
    textDisplay->color(fl_rgb_color(77, 77, 77));


    window->end(); // 完成窗口构建
    window->show(); // 显示窗口
	return Fl::run();
}

Fl_Hold_Browser

作用

​ 以列表的形式来显示文本

创建方法

Fl_Hold_Browser* hb=Fl_Hold_Browser(x,y,w,h,label)

操作方法

• void add(const char* text)向列表中添加一个项目

• void add(const char* text,void* data)向列表中添加一个项目，并将该项目与一段数据关联

• void remove(int line)删除列表中指定行的项目

  • 行数从1开始计算

• void clear()清空列表

• int value()返回当前选中项目的索引号，如果没有则返回-1

• void value(int line)设置第line行选中

• void select(int line ,int val)选中或取消选中指定行的项目

  • 如果val为非零值，则选中指定行的项目
  • 如果val为零，则取消选中指定行的项目

• void deselect()取消所有项目的选中

• void insert(int line,const char* newtext)在指定行插入一个新的文本项目

• int size()返回列表中的文本项目数量

• const char* text(int line)返回指定行号处项目的文本内容

• void text(int line,const char* newtext)设定指定行号处项目的文本内容

• int topline()返回当前列表中可见区域的顶部行号

• void topline(int line)将指定行作为当前可见区域的顶部

• int middleline()返回当前列表中可见区域的中间行号

• void middleline(int line)将指定行作为当前可见区域的中间行

• int bottomline()返回当前列表中可见区域的底部行号

• void bottomline(int line)将指定行作为当前可见区域的底部行

• void show()显示列表

• void hide()隐藏列表

例

#pragma execution_character_set("utf-8")
#include<string>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Hold_Browser.H>
using namespace std;

int main() {
    Fl_Window* window = new Fl_Window(800, 600, "Hold Browser 控件");

    //构建HoldBrowser
    auto hb1 = new Fl_Hold_Browser(10,40,150,400,"列表1");
    auto hb2 = new Fl_Hold_Browser(180, 40, 150, 400, "列表2");
    auto hb3 = new Fl_Hold_Browser(350, 40, 150, 400, "输出");
    //创建小列表4
    auto hb4 = new Fl_Hold_Browser(520, 40, 150, 80, "输出");

    //设置标签显示在上方
    hb1->align(FL_ALIGN_TOP);
    hb2->align(FL_ALIGN_TOP);
    hb3->align(FL_ALIGN_TOP);
    hb4->align(FL_ALIGN_TOP);

    //设置列表1的边框样式为圆角矩形边框
    hb1->box(FL_ROUNDED_BOX);
    //调整hb1，hb2字号
    hb1->textsize(20);
    hb2->textsize(20);

    //向hb1,hb2中添加项目
    hb1->add("苹果");
    hb1->add("香蕉");
    hb1->add("菠萝");
    hb1->add("桃子");
    hb1->add("梨");
    hb1->add("猕猴桃");

    hb2->add("Windows");
    hb2->add("Android");
    hb2->add("Linux");
    hb2->add("MacOS");

    //删除hb1中的第二个项目“香蕉”
    hb1->remove(2);
    hb3->add("删除了“香蕉”");
    //设置Windows选中，并返回选中的索引号
    hb2->value(1);
    hb3->add(("hb2中选中的索引为"+to_string(hb2->value())).c_str());
    //选中hb1中的苹果
    hb1->select(1, 1);
    hb3->add("选中了hb1中的苹果");
    //返回hb2中的第二个项目
    hb3->add(hb2->text(2));
    //在hb1的第二个项目的位置插入一个“橘子”
    hb1->insert(2,"橘子");
    //输出hb2的项目数量
    hb3->add(("hb2中有" + to_string(hb2->size())+"项").c_str());
 
    //向hb4中添加项目
    hb4->add("op1");
    hb4->add("op2");
    hb4->add("op3");
    hb4->add("op4");
    hb4->add("op5");
    hb4->add("op6");
    hb4->add("op7");
    hb4->add("op8");
    //将hb4的第二行作为可视区域最上层
    hb4->middleline(4);

    window->end();
    window->show();

    return Fl::run();
}

输入文本框

Fl_Input

作用

​ 接收用户输入文本的输入框，支持输入单行文本（不会自带水平滑条）

创建方法

  Fl_Input* input = new Fl_Input(x,y,w,h,label);

操作方法

• void value()设置输入框中的文本内容
• const char* value()获取输入框内的内容
• int size()获取输入框内文本的大小（包括空格和换行）
• void copy(int clipboard)将当前选中的文本内容复制到剪切板
  • 将当前选中的文本内容复制，接收一个int型的参数，表示复制到哪里，0表示文本缓冲区，1表示粘贴板，2表示两者都
• int cut(int a, int b)将当前选中的文本删除
  • 删除输入框中索引*[a,b)*之间的所有字符
• int maximum_size()返回输入控件能够接受的最大的字符数
• void maximum_size(int m)设置输入控件能够接受的最大的字符数
• int readonly()查看输入框是否为只读状态，返回0（只读），1（可写）
• void readonly(int a)设置输入框的只读状态，传入任意不等于0的数均表示设置为只读
• int undo()撤销输入框的上一次操作
• void replace(int a,int b,const char*text)将输入框中[a,b)范围的字符替换为指定字符
• int position()返回输入框中光标的位置

Fl_Multiline_Input

​ Fl_Multiline_Input用法与Fl_Input基本一样，只是Fl_Multilin_Input可以显示多行文本

Fl_Text_Editor

作用

​ Fl_Text_Editor是FLTK中的一个用于显示和编辑文本的高级控件，支持多行文本的显示和编辑。

创建方法

  Fl_Text_Editor* input = new Fl_Text_Editor(x,y,w,h,label);

操作方法

• void buffer(Fl_Text_Buffer* buf)设置文本缓冲区
• Fl_Text_Buffer* buffer()获取文本编辑框当前所使用的文本缓冲区
• void insert(const char* text)在当前光标处插入文本
• void insert_position(int pos)将光标移动到指定位置
• int insert_position()返回光标的位置
• void remove(int s,int e)删除[s,e)间的文本
  • 该方法为buffer的方法，而非该控件的方法
• int position_to_xy(int pos,int* x,int* y)将pos位置的文本转换为相应的像素坐标，x，y为接收坐标的变量
• int word_start(int pos)获得pos位置的单词的首字母索引
• int word_end(int pos)获得pos位置的单词的尾字母索引
• void wrap_mode(int wrap,int wrap_margin)设置换行的模式
  • wrap为一枚举值
    • Fl_Text_Display::WRAP_NONE：不自动换行，超出控件宽度的文本将水平滚动。
    • Fl_Text_Display::WRAP_AT_BOUNDS：在单词边界处自动换行，确保整个单词不会跨行。
    • Fl_Text_Display::WRAP_AT_COLUMN：在指定的列数处自动换行，不考虑单词边界。
  • wrap_margin为换行的列边界，只有在设置在指定列数处换行时有用

Fl_Choice

作用

​ Fl_Choice是一个下拉菜单控件，用于创建一个可选的下拉列表

构建方法

Fl_Choice* fc=new Fl_Choice(x,y,w,h,label)

常用方法

• void add(const char* option)向下拉列表中添加选项
• int value()获取当前选中的选项索引
• int value(int index)设置当前索引选中，返回之前选中的选项索引
• const char* text(int index=-1)获取指定索引的选项文本，如果索引为-1，则返回当前选中的选项文本
• void clear()清空列表
• void remove(int index)移除指定索引的选项
• void replace(int index,const char* text)替换指定索引的选项文本
• int size()获取选项的数量
• int find_index(const char* label)返回指定选项文本的索引，如果未找到则返回1
• void down_box(Fl_Boxtype t)设置下拉菜单的边框类型
• void textcolor(Fl_Color c)设置选项文本的颜色
• void textfont(Fl_Font f)设置选项文本的字体
• void textsize(Fl_Fontsize s)设置选项文本的字号
• void align(Fl_Align alignment)设置标签文本的对齐方式

例

#pragma execution_character_set("utf-8")
#include<string>
#include<iostream>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include<FL/Fl_Choice.H>
#include<FL/Fl_Box.H>
#include<FL/Fl_Button.H>
#include<FL/Fl_Input.H>
#include<windows.h>

using namespace std;
 
void del_cb(Fl_Widget*w,void*datas) {
	struct data1
	{
		Fl_Choice* cho;
		Fl_Box* box;
		Fl_Window* win;
		string num;
	};
	auto box = ((data1*)datas)->box;
	auto cho = ((data1*)datas)->cho;
	auto win= ((data1*)datas)->win;

	cho->remove(cho->value());
	((data1*)datas)->num = "选项数量为：" + to_string(cho->size()-1);
	box->label(((data1*)datas)->num.c_str());
	win->redraw();
}
void add_cb(Fl_Widget* w, void* datas) {
	struct data2
	{
		Fl_Choice* cho;
		Fl_Box* box;
		Fl_Window* win;
		Fl_Input* inp;
		string num;
	};
	auto box = ((data2*)datas)->box;
	auto cho = ((data2*)datas)->cho;
	auto win = ((data2*)datas)->win;
	auto inp = ((data2*)datas)->inp;

	cho->add(inp->value());
	((data2*)datas)->num = "选项数量为：" + to_string(cho->size() - 1);
	box->label(((data2*)datas)->num.c_str());
	inp->value("");
	win->redraw();
}


int main() {
	SetConsoleOutputCP(CP_UTF8);

	auto window = new Fl_Window(600,400,"test");
	//创建一个choice
	auto choice = new Fl_Choice(100,100,100,30,"测试");
	//添加项
	choice->add("option1");
	choice->add("option2");
	choice->add("option3");
	choice->add("option4");

	//默认选中option2
	choice->value(1);

	//显示项数量
	auto onb = new Fl_Box(210,100,200,50);
	string opn = "选项数量为："+to_string(choice->size()-1);
	onb->label(opn.c_str());

	//删除按钮
	auto delbut = new Fl_Button(100,60,60,25,"删除");
	//添加按钮
	auto addbut = new Fl_Button(180, 60, 60, 25, "添加");
	//输入框
	auto inp = new Fl_Input(250,60,100,25);

	//删除按钮绑定操作
	struct data1
	{
		Fl_Choice* cho;
		Fl_Box* box;
		Fl_Window* win;
		string num;

	}data1{choice,onb,window,opn};
	delbut->callback(del_cb,(void*)&data1);

	//添加按钮绑定操作
	struct data2
	{
		Fl_Choice* cho;
		Fl_Box* box;
		Fl_Window* win;
		Fl_Input* inp;
		string num;

	}data2{ choice,onb,window,inp,opn };
	addbut->callback(add_cb,(void*)&data2);

	window->end();
	window->show();
	return Fl::run();
}

三、事件处理

通过回调函数

定义回调函数

​ 回调函数的原型一般是

void xxx_callback(Fl_Widget*w,void *data)
{
    //函数体
}

• Fl_Widget*
  • 指向调用回调函数的控件的指针
• void*
  • 传递的参数
  • 如果要传递多个参数给回调函数，可以将这些数据打包成一个结构体，然后将结构体传给回调函数

绑定回调函数

​ 使用控件的callback()函数即可将回调函数与该控件绑定，当该控件触发事件的时候，回调函数即可执行

如

#pragma execution_character_set("utf-8")
#include<string>
#include<iostream>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include<FL/Fl_Color_Chooser.H>
#include<FL/Fl_Button.H>
#include<FL/Fl_Input.H>
#include<FL/Fl_Box.H>
#include<FL/Fl_Output.H>

using namespace std;
//传入的数据
struct Mydata
{
    Fl_Input* a;
    Fl_Input* b;
    Fl_Output*c;
};

//加法计算
void but_cd(Fl_Widget*w,void*ts)
{
    Mydata* datas = (Mydata*)ts;
    //将输入框中的数据变为浮点数后相加
    double result = stod(datas->a->value())+ stod(datas->b->value());
    cout << result;
    datas->c->value(to_string(result).c_str());
    

}

int main() {
    //创建窗口
    Fl_Window* window = new Fl_Window(450,150, "Test");
    //改变窗口颜色
    window->color(fl_rgb_color(228, 235, 244));

    //构建输入和显示控件
    auto input1 = new Fl_Input(10, 50, 100, 25, "X1");
    auto jia = new Fl_Box(130, 50, 25, 25, "+");
    auto input2 = new Fl_Input(175,50,100,25,"X2");
    auto dy = new Fl_Box(300,50,25,25,"=");
    auto output = new Fl_Output(345,50,100,25,"Y");
    auto but = new Fl_Button(175,80,80,60,"计算");

    input1->textsize(15);
    input2->textsize(15);
    jia->labelsize(15);
    dy->labelsize(15);
    
    input1->align(FL_ALIGN_TOP);
    input2->align(FL_ALIGN_TOP);
    output->align(FL_ALIGN_TOP);

    //设置初值
    input1->value("0");
    input2->value("0");
    
    //将三个输入输出组件打包
    Mydata data1{ input1,input2,output };


    //绑定回调函数，并将参数变为void指针传入
    but->callback(but_cd,(void*) & data1);

    window->end();
    window->show();

    return Fl::run();
}

设置触发事件

​ 通过对控件使用when()方法，我们可以指定控件在什么时候回触发回调函数

Fl_Widget_Point->when(flage)

flage表点这里🚀

如在上一个示列的基础上，我们将函数绑定到第二个输入框上，并设定按回车执行

#pragma execution_character_set("utf-8")
#include<string>
#include<iostream>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include<FL/Fl_Color_Chooser.H>
#include<FL/Fl_Button.H>
#include<FL/Fl_Input.H>
#include<FL/Fl_Box.H>
#include<FL/Fl_Output.H>

using namespace std;
//传入的数据
struct Mydata
{
    Fl_Input* a;
    Fl_Input* b;
    Fl_Output*c;
};

//加法计算
void but_cd(Fl_Widget*w,void*ts)
{
    Mydata* datas = (Mydata*)ts;
    //将输入框中的数据变为浮点数后相加
    double result = stod(datas->a->value())+ stod(datas->b->value());
    cout << result;
    datas->c->value(to_string(result).c_str());
    

}

int main() {
    //创建窗口
    Fl_Window* window = new Fl_Window(450,150, "Test");
    //改变窗口颜色
    window->color(fl_rgb_color(228, 235, 244));

    //构建输入和显示控件
    auto input1 = new Fl_Input(10, 50, 100, 25, "X1");
    auto jia = new Fl_Box(130, 50, 25, 25, "+");
    auto input2 = new Fl_Input(175,50,100,25,"X2");
    auto dy = new Fl_Box(300,50,25,25,"=");
    auto output = new Fl_Output(345,50,100,25,"Y");
    auto but = new Fl_Button(175,80,80,60,"计算");

    input1->textsize(15);
    input2->textsize(15);
    jia->labelsize(15);
    dy->labelsize(15);
    
    input1->align(FL_ALIGN_TOP);
    input2->align(FL_ALIGN_TOP);
    output->align(FL_ALIGN_TOP);

    //设置初值
    input1->value("0");
    input2->value("0");
    
    //将三个输入输出组件打包
    Mydata data1{ input1,input2,output };


    //将回调函数绑定到input2上，设置为回车执行
    input2->callback(but_cd,(void*) & data1);
    //更改触发事件
    input2->when(FL_WHEN_ENTER_KEY_ALWAYS);

    window->end();
    window->show();

    return Fl::run();
}

通过重载handle方法

方法原型

int handle(int event) override{}

​ 其中，event为事件，详见下方链接

handle事件表点这里🚀

步骤

• 定义要重载事件处理的控件的子类，并继承该控件类

  • 如

  • class myInp:public Fl_Input{}
    

• 在新定义的子类中，编写构造函数（可以使用原来的构造函数）

  • 如

  • myInp(int x, int y, int w, int h, const char* label = 0) :
            Fl_Input(x, y, w, h, label) {}
    

• 再重载handle方法，使用switch语句来进行事件处理

  • int handle(int event) override {
        switch (event)
        {
        case FL_FOCUS:
            Fl_Input::handle(event);
            std::cout <<this->label()<<"have focus"<<std::endl;
            return 1;
            break;
        case FL_UNFOCUS:
            Fl_Input::handle(event);
            std::cout << this->label() << "lose focus" << std::endl;
        default:
            return Fl_Input::handle(event);
            break;
            
        }
    }
    

  • 注：在编写事件的处理方法时，可以先使用一次父类的handle函数，再编写你想操作的部分，这样可以防止控件原来的功能失效

键盘事件

​ 通过使用int Fl::event_key()可以获得键盘按下或松开的键，返回值为对应字符的ASCII码。除字母键和数字键以外，还有一些功能键，其对应常量如下

键码表点这里🚀

例

#pragma execution_character_set("utf-8")
#include<string>
#include<iostream>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include<FL/Fl_Color_Chooser.H>
#include<FL/Fl_Input.H>
using namespace std;

class myInp :public Fl_Input
{
public:
    myInp(int x, int y, int w, int h, const char* label = 0) :
        Fl_Input(x, y, w, h, label) {}
    int handle(int event) override {
        int key = Fl::event_key();
        switch (event)
        {
        case FL_FOCUS:
            Fl_Input::handle(event);
            cout <<this->label()<<"have focus"<<endl;
            return 1;
            break;
        case FL_UNFOCUS:
            Fl_Input::handle(event);
            cout << this->label() << "lose focus" << endl;
        case FL_KEYDOWN:
            if (key == 'a' || key == 'A')
            {
                cout << "A is pressed" << endl;
            }
            return Fl_Input::handle(event);

        default:
            return Fl_Input::handle(event);
            break;
            
        }
    }

};

int main() {
    //创建窗口
    Fl_Window* window = new Fl_Window(450,150, "Test");
    //改变窗口颜色
    window->color(fl_rgb_color(228, 235, 244));
    myInp inp1(10,10,100,30,"1");
    myInp inp2(120, 10, 100, 30, "2");
    
    window->end();
    window->show();

    return Fl::run();
}

Ciallo～(∠・ω< )⌒★

DLC

1.控件外观Fl_Boxtype

Fl_Boxtype为一个枚举类型，其包含如下值

外观样式	描述
FL_NO_BOX	无边框
FL_FLAT_BOX	平坦边框，无阴影
FL_THIN_UP_BOX	细边框，从下到上的渐变效果
FL_THIN_DOWN_BOX	细边框，从上到下的渐变效果
FL_THIN_UP_FRAME	细线边框和外框，从下到上渐变效果
FL_THIN_DOWN_FRAME	细线边框和外框，从上到下渐变效果
FL_ENGRAVED_BOX	浮雕边框
FL_BORDER_BOX	边框框(即纯框框)
FL_SHADOW_BOX	带阴影的边框
FL_FRAME_BOX	内边框
FL_ROUNDED_BOX	圆角矩形边框
FL_RFLAT_BOX	无阴影圆角矩形边框
FL_ROUND_UP_BOX	圆形边框，由下向上渐变
FL_ROUND_DOWN_BOX	圆形边框，由上向下渐变
FL_DIAMOND_UP_BOX	菱形边框，由下向上渐变
FL_DIAMOND_DOWN_BOX	菱形边框，由上向下渐变
FL_OVAL_BOX	椭圆形边框
FL_OFLAT_BOX	无阴影椭圆边框
FL_OSHADOW_BOX	椭圆形边框，带阴影
FL_PLASTIC_UP_BOX	塑料外观边框，从下到上的渐变效果
FL_PLASTIC_DOWN_BOX	塑料外观边框，从上到下的渐变效果
FL_PLASTIC_UP_FRAME	塑料外观边框和外框，从下到上的渐变效果
FL_PLASTIC_DOWN_FRAME	塑料外观边框和外框，从上到下的渐变效果
FL_GTK_UP_BOX	GTK 样式边框，从下到上的渐变效果
FL_GTK_DOWN_BOX	GTK 样式边框，从上到下的渐变效果
FL_GTK_UP_FRAME	GTK 样式边框和外框，从下到上的渐变效果
FL_GTK_DOWN_FRAME	GTK 样式边框和外框，从上到下的渐变效果
FL_GLEAM_UP_BOX	外观边框，闪闪发光的效果，从下到上的渐变效果
FL_GLEAM_DOWN_BOX	外观边框，闪闪发光的效果，从上到下的渐变效果
FL_GLEAM_UP_FRAME	外观边框和外框，闪闪发光的效果，从下到上的渐变效果
FL_GLEAM_DOWN_FRAME	外观边框和外框，闪闪发光的效果，从上到下的渐变效果

2.预留字体常量

常量	字体
FL_HELVETICA	Helvetica 字体
FL_HELVETICA_BOLD	Helvetica 粗体
FL_HELVETICA_ITALIC	Helvetica 斜体
FL_HELVETICA_BOLD_ITALIC	Helvetica 粗斜体
FL_TIMES	Times 字体
FL_TIMES_BOLD	Times 粗体
FL_TIMES_ITALIC	Times 斜体
FL_TIMES_BOLD_ITALIC	Times 粗斜体
FL_COURIER	Courier 字体
FL_COURIER_BOLD	Courier 粗体
FL_COURIER_ITALIC	Courier 斜体
FL_COURIER_BOLD_ITALIC	Courier 粗斜体
FL_SYMBOL	Symbol 字体
FL_FREE_FONT	自由字体，在 Windows 上对应Arial字体；在macOS上对应Lucida Grande 字体；在Linux上对应Sans Serif 字体

3标签对齐方式常量

常量	对齐方式
水平
FL_ALIGN_LEFT	左对齐
FL_ALIGN_CENTER	居中对齐
FL_ALIGN_RIGHT	右对齐
垂直
FL_ALIGN_TOP	顶部对齐
FL_ALIGN_INSIDE	居中对齐
FL_ALIGN_BOTTOM	底部对齐

*注：对齐方式可以组合使用如FL_ALIGN_LEFT | FL_ALIGN_TOP表示左上对齐

4.回调函数触发标志

贯穿真理之锚⚓️

Flage	作用
FL_WHEN_NEVER	从不触发回调
FL_WHEN_CHANGED	当组件的值改变时触发回调。
FL_WHEN_RELEASE	当用户释放鼠标按钮时触发回调。通常用于按钮等组件。
FL_WHEN_ENTER_KEY	当用户按下回车键时触发回调。
FL_WHEN_NOT_CHANGED	当值没有改变时触发回调。这个标志并不常用，通常与 FL_WHEN_CHANGED 一起使用。
FL_WHEN_RELEASE_ALWAYS	即使在值没有改变的情况下，也在释放鼠标按钮时触发回调。这个标志是 FL_WHEN_RELEASE 的一个扩展。
FL_WHEN_ENTER_KEY_ALWAYS	即使在值没有改变的情况下，也在按下回车键时触发回调。这个标志是 FL_WHEN_ENTER_KEY 的一个扩展。

5.handle事件

贯穿真理之锚⚓️

常量	对应值	说明
FL_NO_EVENT	0	无事件
FL_PUSH	1	鼠标按下事件
FL_RELEASE	2	鼠标释放事件
FL_ENTER	3	鼠标进入组件事件
FL_LEAVE	4	鼠标离开组件事件
FL_DRAG	5	鼠标拖动事件
FL_FOCUS	6	组件获得键盘焦点事件
FL_UNFOCUS	7	组件失去键盘焦点事件
FL_KEYDOWN	8	键盘按下事件
FL_KEYUP	9	键盘释放事件
FL_CLOSE	10	窗口关闭事件
FL_MOVE`**	11	鼠标移动事件
FL_SHORTCUT	12	快捷键事件
FL_DEACTIVATE`**	13	组件停用事件
FL_ACTIVATE	14	组件激活事件
FL_HIDE	15	组件隐藏事件
FL_SHOW	16	组件显示事件
FL_PASTE	17	粘贴事件
FL_SELECTIONCLEAR	18	选择清除事件
FL_MOUSEWHEEL	19	鼠标滚轮事件
FL_DND_ENTER	20	拖放进入事件
FL_DND_DRAG`**	21	拖放拖动事件
FL_DND_LEAVE	22	拖放离开事件
FL_DND_RELEASE`**	23	拖放释放事件
FL_SCREEN_CONFIGURATION_CHANGED	24	屏幕配置改变事件
FL_FULLSCREEN	25	全屏事件

6.常用键的键码常量

贯穿真理之锚⚓️

常量	对应键
FL_F(1)~FL_F(12)	功能键F1到F12
FL_Left	左箭头键
FL_Up	上箭头键
FL_Right	右箭头键
FL_Down	下箭头键
FL_Shift_L	左 Shift 键
FL_Shift_R	右 Shift 键
FL_Control_L	左 Ctrl 键
FL_Control_R	右 Ctrl 键
FL_Caps_Lock	Caps Lock 键
FL_Alt_L	左 Alt 键
FL_Alt_R	右 Alt 键
FL_Meta_L	左 Meta 键（有时用于 Command 键）
FL_Meta_R	右 Meta 键
FL_Delete	Delete 键
FL_BackSpace	Backspace 键
FL_Tab	Tab 键
FL_Return	Enter 键
FL_Escape	Escape 键
FL_Home	Home 键
FL_End	End 键
FL_Page_Up	Page Up 键
FL_Page_Down	Page Down 键

编译及配置zlib库和libpng库

zlib和libpng下载

两个库的配置

• zlib

下载网站https://www.zlib.net/

向下翻，找到如图位置下载

• libpng

下载网站http://www.libpng.org/pub/png/libpng.html

往下翻，找到如图所示位置下载源码

编译

注：本次编译在Debug x86(win32)下进行

首先，我们建立文件夹zlib_libpng_debug-msvc32用来存放编译后的文件

该文件夹内应该包含如下文件夹

zlib

解压zlib压缩包后得到如下文件

我们进入D:\C++import\VCimport\zlib\zlib-1.3.1\contrib\vstudio\vc17

找到目录下的vs解决方案zlibvc.sln

同时，打开同级目录下的zlibvc.def文件，将该文件第四行前加上 ; 将改行忽略掉

此时，保存退出后，来到zlibvc.sln，

进入后右键单击zlibvc->属性

进入界面后，点击链接器->高级->映像具有安全异常处理程序改为否

后回到解决方案主界面，点击生成->生成解决方案

生成完毕后，我们的文件夹下应该会有一个x86文件夹

我们进入文件夹，里面有两个文件夹值得我们关注：ZlibStatDebug、ZlibDllDebug

我们将ZlibStatDebug文件夹中的zlibstat.lib文件放入我们开头建好的lib文件夹中，

将ZlibDllDebug文件夹中的zlibwapi.lib、zlibwapi.dll放入我们创建的share文件夹中

此时回到我的zlib文件夹的根目录下，将zlib.h、zconf.h这两个文件放入我们创建的include文件夹中。

libpng

我们将下载的libpng压缩包解压，新建一个文件夹，里面存放libpng文件夹和zlib源码文件夹（libpng依赖于zlib，故必须要将zlib源码放在libpng文件夹的同目录下）

之后，我们进入libpng文件夹，在该文件夹内访问\projects\vstudio文件夹，在vstudio文件夹内，打开vs解决方案vstudio.sln

将zlib 、 pnglibconf 及 libpng 这三个项目的属性中如图所示的属性改为否

更改后即可开始解决方案的生成

生成完毕后，进入目录的Debug文件夹

将里面的libpng16.dll、libpng16.lib文件复制到我们创建的lib文件夹中。

再在libpng根目录下将png.h、pngconf.h、pnglibconf.h三个文件复制到我们创建的inlude文件夹中。

最终目录结构

• include
  • png.h
  • pngconf.h
  • pnglibconf.h
  • zconf.h
  • zlib.h
• lib
  • libpng16.dll
  • libpng16.lib
  • zlibstat.lib
• share
  • zlibwapi.dll
  • zlibwapi.lib

将库与项目链接

打开我们的项目->右键单击我们项目的解决方案->属性

配置属性->C/C+±>常规->附加包含目录

将我们的include文件夹包含进去

配置属性->C/C+±>预处理器->预处理器定义

将ZLIB_WINAPI加上

配置属性->链接器->常规->附加库目录

将我们的lib文件夹加进去

配置属性->链接器->输入->附加依赖项

将下面两个加上

zlibstat.lib
libpng16.lib

ps：如果想要使用box显示图片，最好将下面几个也加上

fltkimages.lib
fltkpng.lib
fltkzlib.lib