滚动与网格

---

滚动视图和网格使构建库存、列表、菜单和卡片布局变得容易。本指南展示了两者的正确模式，包括布局、ID 和滚动条。

遵循 UI 基础：从屏幕矩形开始，使用 cut 进行布局，并始终对推入/弹出配对使用 defer 用于 push/pop 配对。

滚动视图

对于可能超出可用空间的内容，请使用滚动视图。滚动条必须位于滚动视图内容区域之外。

draw_scrollable_list :: proc(items: []string) {
    rect := UI.get_safe_screen_rect()->inset(50);

    // 首先为滚动条保留空间
    scroll_bar_area := rect->cut_right(8)->inset(2);

    settings: Scroll_View_Settings;
    settings.vertical = true;
    settings.horizontal = false;
    settings.clip_padding = {10, 10, 10, 10};

    sv := UI.push_scroll_view(rect, "my_scroll_view", settings); {
        defer UI.pop_scroll_view();

        content := sv.content_rect;
        ts := UI.default_text_settings();
        ts.size = 24;

        for i: 0..items.count-1 {
            item_rect := content->cut_top(40);
            UI.text(item_rect, ts, items[i]);
        }
    }

    scroll_bar_rect := sv->compute_scroll_bar_rect(scroll_bar_area);

    UI.quad(scroll_bar_area, core_globals.white_sprite, {0.025, 0.025, 0.025, 1});
    UI.quad(scroll_bar_rect, core_globals.white_sprite, {0.1, 0.1, 0.1, 1});
}

重要： 如果滚动条位于滚动视图内容内部，它会破坏边界和滚动行为。始终先将滚动条区域切出来。

网格布局

使用 Grid_Layout 用于大小相等的元素，如库存格位或图标网格。网格从左上角开始，向右推进，然后换到下一行。

draw_inventory_grid :: proc(items: []Item) {
    rect := UI.get_safe_screen_rect()->inset(40);

    bs := UI.default_button_settings();
    ts := UI.default_text_settings();

    // 基于元素数量的 4 列 x 6 行，8px 内边距
    grid := UI.make_grid_layout(rect, 4, 6, .ELEMENT_COUNT, 8);

    for i: 0..items.count-1 {
        UI.push_id("slot_%", {i});
        defer UI.pop_id();

        slot_rect := grid->next();
        if UI.button(slot_rect, bs, ts, items[i].name).clicked {
            select_item(i);
        }
    }
}

如果你更喜欢固定大小的格子，使用 .ELEMENT_SIZE 而不是 .ELEMENT_COUNT:

grid := UI.make_grid_layout(rect, 100, 100, .ELEMENT_SIZE, 8);

next() 方法会更新网格状态： grid.index; // 0, 1, 2, ...

slot_rect := grid->next();
grid.cur_x; // 列
grid.cur_y; // 行
可滚动网格

在滚动视图内部使用时会自动扩展滚动视图。此模式非常适合大型库存：

Grid_Layout draw_scrollable_grid :: proc(items: []Item) {

sv := UI.push_scroll_view(rect, "inventory_scroll", settings); {
    rect := UI.get_safe_screen_rect()->inset(50);
    scroll_bar_area := rect->cut_right(8)->inset(2);

    settings: Scroll_View_Settings;
    settings.vertical = true;
    settings.horizontal = false;
    settings.clip_padding = {10, 10, 10, 10};

    grid := UI.make_grid_layout(sv.content_rect, 4, 6, .ELEMENT_COUNT, 8);
        defer UI.pop_scroll_view();

        最佳实践
        bs := UI.default_button_settings();
        ts := UI.default_text_settings();

        for i: 0..items.count-1 {
            UI.push_id("slot_%", {i});
            defer UI.pop_id();

            slot_rect := grid->next();
            if UI.button(slot_rect, bs, ts, items[i].name).clicked {
                select_item(i);
            }
        }
    }

    scroll_bar_rect := sv->compute_scroll_bar_rect(scroll_bar_area);
    UI.quad(scroll_bar_area, core_globals.white_sprite, {0.025, 0.025, 0.025, 1});
    UI.quad(scroll_bar_rect, core_globals.white_sprite, {0.1, 0.1, 0.1, 1});
}

UI.push_id()

• 使用 用于列表或网格内部的重复元素。 在创建滚动视图之前先切出滚动条区域。

• 从

• UI.get_safe_screen_rect() 开始并推导所有布局。 将仅在悬停时的交互保持到最小（以移动优先）。

• 保持仅在悬停时的交互最小（以移动优先）。