Изучаем Dear ImGUI в Defold. Часть 2. Радиокнопки

Эта тема является продолжение Изучаем Dear ImGUI в Defold. Часть 1. Создание окна и таблицы с полями .


В этом пособие я использовал версию:
https://github.com/britzl/extension-imgui/archive/refs/tags/2.6.1.zip


В этом уроке мы познакомимся с радиокнопками в Dear ImGUI для Defold.

Радиокнопки (или переключатели) — это элемент интерфейса, который позволяет пользователю выбрать один вариант из заранее определенного набора опций, объединенных в группу.

Вставьте этот код в main.script:

-- Пример данных: таблица с заголовками и строками

local headers = { "ID", "Name", "Radio" }
local rows = {
    { id = 1, name = "Alpha" },
    { id = 2, name = "Bravo" },
    { id = 3, name = "Charlie" },
}

-- Текущее выбранное значение (id строки)
local selected_id = 1

function init(self)
    msg.post(".", "acquire_input_focus")
    imgui.set_ini_filename() -- отключает сохранение настроек окна на диск
end

function update(self, dt)
    imgui.begin_window("Radio Table", nil, imgui.WINDOWFLAGS_ALWAYS_AUTO_RESIZE)
    if imgui.begin_table("radio_table_1", #headers) then
        -- Заголовки
        for _, h in ipairs(headers) do
            imgui.table_setup_column(h)
        end
        imgui.table_headers_row()
        -- Строки
        for _, it in ipairs(rows) do
            imgui.table_next_row()
            -- ID
            imgui.table_next_column()
            imgui.text(tostring(it.id))
            -- Name
            imgui.table_next_column()
            imgui.text(it.name)
            -- Radio
            imgui.table_next_column()
            local is_selected = (selected_id == it.id)
            if imgui.radio_button("##rb_" .. it.id, is_selected) then
                selected_id = it.id
            end
        end
        imgui.end_table()
    end
    imgui.end_window()
end

Сохраните (ctrl + S), соберите и запустите проект (ctrl + B):


Справочник


imgui.radio_button


Элемент интерфейса «радио‑кнопка» для выбора одного варианта из группы. Он рисует кнопку, показывает её активное/неактивное состояние и возвращает признак клика в текущем кадре.

changed = imgui.radio_button(label, selected_bool)
  • label — текст метки или пустая строка с суффиксом ##id для уникального ID виджета.
  • selected_bool — логическое значение, выделена ли кнопка сейчас.
  • Возвращаемое changed — истина в кадр клика, когда пользователь нажал по этой кнопке.

Что делает

  • Рендерит круглую кнопку с точкой внутри при активном состоянии.
  • При клике сообщает об этом возвращаемым значением, а переключение выбранного варианта выполняется вручную в коде, присваивая свою переменную состояния.
  • Используется группами: ровно один активный вариант в группе в любой момент.

Самостоятельная работа


Создай таблицы таких видов:

Всем спасибо за внимание!