如何在 ImGui 中创建不重叠的两列按钮布局?

问题描述 投票:0回答:1

我正在尝试使用 ImGui 创建 UI 布局,其中按钮以两列格式排列。每行应包含两个按钮,第三个按钮应在前一个按钮下方开始一个新行。但是,我遇到了一个问题,按钮似乎相互重叠或跳跃。

    ImVec2 menuPos = { -10, 15 };
    ImVec2 menuSize = { 475.f, 775.f };

bool Option(std::string option) {
    static int buttonCounter = 0; // Counter to track button placement

    if (buttonCounter % 2 == 1) {
        ImGui::SameLine(); // Place every second button on the same line
    } else {
        ImGui::SetCursorPosX(70); // Align the first button to the right of the line
    }

    ImGui::PushStyleColor(ImGuiCol_Button, pink);
    bool result = ImGui::Button(option.c_str(), { 190, 30 });//OffsetsXY for now
    ImGui::PopStyleColor();

    buttonCounter++;

    return result;
}

void View() {
    ImGui::SetNextWindowPos(menuPos);
    ImGui::SetNextWindowSize(menuSize);

    ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(ImColor(0, 0, 0, 175)));
    ImGui::PushStyleColor(ImGuiCol_Border, GetCurrentFadeColor());
    ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 2.f);

    if (ImGui::Begin("Background", 0, ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoResize)) {
       
        DrawVerticalLineFromTop(GetCurrentFadeColor(), 50, 2.f, menuSize.y);
        Option("Option1");
        Option("Option2");
        Option("Option3");
        Option("Option4");
        Option("Option5");
        Option("Option6");
        Option("Option7");
    }

    ImGui::PopStyleVar();
    ImGui::PopStyleColor(2);
    ImGui::End();
}
Expected Layout:
Option   Option
Option   Option
Option   Option
Option   ...

按钮没有按预期排列,而是互相跳跃,并且布局的行为不符合预期。添加第三个或更多按钮后,该按钮似乎与所有其他按钮重叠。

最终目标:是使用Option方法而不能够在视图方法中使用Sameline

c++ button imgui
1个回答
0
投票

将buttonCounter移出方法似乎解决了这个问题。

© www.soinside.com 2019 - 2024. All rights reserved.