如何在FLTK中实现带关闭按钮的可交互标签页

需求说明 #

作为FLTK的C++开发新手，我使用Fl_Tabs创建了标签页，但默认标签无交互能力，需要实现：

• 给每个标签的标题栏添加关闭按钮，点击可关闭对应标签页
• 通过菜单栏选项动态添加新的标签页

原始代码：

#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
#include <FL/Enumerations.H>
 
int main(int argc, char **argv) {
  Fl_Window window(Fl::w()/2,Fl::h()/2, "test");

  Fl_Box windowBox(0,32,window.w(),window.h()-32);
  window.resizable(&windowBox);
  Fl_Tabs mainTabs(0,32,window.w(),window.h()-32);
  Fl_Group tab1(0,64,window.w(),window.h()-32, "Tab 1");
  tab1.end();
  Fl_Group tab2(0,64,window.w(),window.h()-32, "Tab 1");
  tab2.end();
  Fl_Group tab3(0,64,window.w(),window.h()-32, "Tab 1");
  tab3.end();
  mainTabs.end();

  window.end();
  window.show(argc, argv);
  return Fl::run();
}

解决方案 #

1. 自定义带关闭按钮的标签页组件 #

FLTK默认Fl_Tabs的标签不支持内嵌控件，我们需要自定义一个继承自Fl_Group的标签页类，在标签区域添加关闭按钮，并处理点击事件。

2. 实现菜单栏新增标签功能 #

添加Fl_Menu_Bar组件，绑定菜单回调函数，动态创建新的自定义标签页并添加到Fl_Tabs中。

完整实现代码 #

#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Tabs.H>
#include <FL/Fl_Group.H>
#include <FL/Fl_Button.H>
#include <FL/Fl_Menu_Bar.H>
#include <FL/Fl_Box.H>
#include <string>

// 自定义带关闭按钮的标签页类
class ClosableTab : public Fl_Group {
private:
    Fl_Button* close_btn;
    Fl_Tabs* parent_tabs;

    // 关闭按钮回调函数
    static void close_tab_cb(Fl_Widget* w, void* data) {
        ClosableTab* tab = static_cast<ClosableTab*>(data);
        Fl_Tabs* tabs = tab->parent_tabs;
        
        // 移除当前标签页
        tabs->remove(tab);
        // 刷新标签控件
        tabs->redraw();
        // 释放标签页内存
        delete tab;
    }

public:
    ClosableTab(int x, int y, int w, int h, const char* label) 
        : Fl_Group(x, y, w, h, label), parent_tabs(nullptr) {
        // 创建关闭按钮，放在标签右侧
        close_btn = new Fl_Button(0, 0, 16, 16, "x");
        close_btn->box(FL_FLAT_BOX);
        close_btn->color(FL_RED);
        close_btn->labelcolor(FL_WHITE);
        close_btn->callback(close_tab_cb, this);
        end();
    }

    // 设置父级Fl_Tabs控件
    void set_parent_tabs(Fl_Tabs* tabs) {
        parent_tabs = tabs;
    }

    // 重绘标签时调整按钮位置
    void draw() override {
        Fl_Group::draw();
        // 计算按钮位置：标签文本右侧，垂直居中
        int label_w = fl_width(label());
        int btn_x = x() + label_w + 5;
        int btn_y = y() + (h() - close_btn->h())/2;
        close_btn->position(btn_x, btn_y);
        close_btn->redraw();
    }
};

// 菜单栏新增标签回调函数
static void add_new_tab_cb(Fl_Widget* w, void* data) {
    Fl_Tabs* tabs = static_cast<Fl_Tabs*>(data);
    static int tab_count = 4; // 从第4个标签开始计数

    // 创建新的带关闭按钮的标签页
    std::string label = "Tab " + std::to_string(tab_count);
    ClosableTab* new_tab = new ClosableTab(0, 64, tabs->w(), tabs->h()-32, label.c_str());
    new_tab->set_parent_tabs(tabs);

    // 给新标签页添加一个占位组件（可选）
    Fl_Box* box = new Fl_Box(10, 10, new_tab->w()-20, new_tab->h()-20, label.c_str());
    new_tab->add(box);
    new_tab->end();

    // 添加到标签控件中
    tabs->add(new_tab);
    tabs->redraw();
    tab_count++;
}

int main(int argc, char **argv) {
    Fl_Window window(Fl::w()/2, Fl::h()/2, "FLTK Closable Tabs");

    // 添加菜单栏
    Fl_Menu_Bar menu_bar(0, 0, window.w(), 32);
    menu_bar.add("File/New Tab", FL_CTRL+'n', add_new_tab_cb, &mainTabs);

    Fl_Box windowBox(0, 32, window.w(), window.h()-32);
    window.resizable(&windowBox);

    Fl_Tabs mainTabs(0, 32, window.w(), window.h()-32);

    // 创建初始的带关闭按钮的标签页
    for (int i = 1; i <= 3; i++) {
        std::string label = "Tab " + std::to_string(i);
        ClosableTab* tab = new ClosableTab(0, 64, mainTabs.w(), mainTabs.h()-32, label.c_str());
        tab->set_parent_tabs(&mainTabs);
        
        Fl_Box* box = new Fl_Box(10, 10, tab->w()-20, tab->h()-20, label.c_str());
        tab->add(box);
        tab->end();
        
        mainTabs.add(tab);
    }

    mainTabs.end();
    window.end();

    window.show(argc, argv);
    return Fl::run();
}

关键说明 #

• 自定义ClosableTab：通过继承Fl_Group，在标签区域嵌入一个小型关闭按钮，重写draw()方法调整按钮位置，确保按钮始终显示在标签文本右侧。
• 关闭逻辑：点击关闭按钮时，从父级Fl_Tabs中移除当前标签页，刷新控件并释放内存。
• 动态新增标签：菜单栏绑定回调函数，创建新的ClosableTab实例并添加到Fl_Tabs中，自动更新标签计数。

内容的提问来源于stack exchange，提问作者Cryos