You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ImGui中如何实现按钮垂直排列 将Del按钮移至Clean按钮下方

问题描述

我现有如下ImGui菜单:
界面截图
我希望将"Del"按钮移动到上图中红色标记的区域,当前该部分菜单的代码片段如下:

class Waypoint {
public:
    int x, y, z;
    std::string action;
    std::string display;
    Waypoint(std::string action, int x, int y, int z) {
        this->action = action;
        this->x = x;
        this->y = y;
        this->z = z;
        this->display = action + " " + std::to_string(x) + " " + std::to_string(y) + " " + std::to_string(z);
    }
};

static int listbox_item_current = 0;
Waypoint wp1("ROPE", 100, 100, 7);
Waypoint wp2("WALK", 100, 100, 6);
Waypoint wp3("WALK", 110, 131, 6);
std::vector<Waypoint> listbox_items{ wp1, wp2, wp3 };

if (ImGui::CollapsingHeader("Cavebot")) {
    ImGui::ListBox(
    "##listbox::Cavebot",
    &listbox_item_current,
    waypoint_getter,
    listbox_items.data(),
    listbox_items.size()
);

ImGui::SameLine();

if (ImGui::Button("Clean"))
    listbox_items.clear();

ImGui::SameLine();

if (ImGui::Button("Del"))
    listbox_items.erase(listbox_items.begin() + listbox_item_current);

请问如何操作才能将"Del"按钮移动到"Clean"按钮的下方,实现两个按钮垂直排布?

补充测试

我尝试移除两个按钮之间的ImGui::SameLine();语句,最终效果参考截图:
测试效果截图


解决方法

直接删掉两个按钮之间的ImGui::SameLine()达不到效果,是因为ListBox控件本身占了多行高度,移除SameLine后,Del按钮会自动排布到ListBox下方的最左侧,不会对齐到Clean按钮的正下方。
正确实现逻辑很简单:绘制完Clean按钮后,手动把下一个控件的起始X坐标对齐到Clean按钮所在列,Y轴自然换行就会落到Clean按钮正下方,修改后的代码如下:

if (ImGui::CollapsingHeader("Cavebot")) {
    ImGui::ListBox(
        "##listbox::Cavebot",
        &listbox_item_current,
        waypoint_getter,
        listbox_items.data(),
        listbox_items.size()
    );

    ImGui::SameLine();
    // 记录右侧按钮列的起始X坐标
    const float btn_col_x = ImGui::GetCursorPosX();
    if (ImGui::Button("Clean"))
        listbox_items.clear();

    // 光标回到右侧按钮列,自然换行后就落在Clean按钮正下方
    ImGui::SetCursorPosX(btn_col_x);
    if (ImGui::Button("Del")) {
        // 增加边界判断,避免列表为空时删除操作触发越界崩溃
        if (listbox_item_current >= 0 && listbox_item_current < listbox_items.size()) {
            listbox_items.erase(listbox_items.begin() + listbox_item_current);
            // 删除后修正选中索引,防止索引超出新列表长度
            listbox_item_current = ImMax(0, (int)listbox_items.size() - 1);
        }
    }
}

后续如果要在这一列加更多功能按钮,只要在每个按钮前加一行ImGui::SetCursorPosX(btn_col_x);,所有按钮就会自动垂直排布在ListBox右侧。


内容的提问来源于stack exchange,提问作者kuhi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.28 04:21:14