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
相关产品推荐
相关产品推荐

