教程 skyblock-ui 如何自定义

[ChuXiao]

[MD] # grid_form 每行物品数量调整指南 ## 0. 原理 `items_grid_panel` 是 `type: "grid"`，设置了： - `grid_fill_direction: "horizontal"` → 一行排满再换行 - `grid_rescaling_type: "horizontal"` → 根据容器宽 / 物品宽**自动换行** 也就是说**每行数量不是硬编码**，公式是： ``` 每行列数 = floor(物品区可用宽度 ÷ 单个物品宽度) ``` 当前各项数值（`skyblock-ui/ui/grid_form.json` / `shop.json`）： | 参数 | 值 | 位置 | |---|---|---| | 整体宽度 | `320` px | `root.size` (行 6) | | 物品区宽度 | `70%` ≈ `224` px | `items_dialog.size` (行 123) | | 滚动条内宽 | `100% - 4px` ≈ `220` px | `items_scroll.$scrolling_pane_size` (行 257) | | 单个物品 | `64 × 64` px | `items_grid_button` (行 281, 295, 300) | | 当前每行 | `floor(220 / 64) = 3` | 自动 | --- ## 1. 改格子大小（推荐 · 最简单） **只动 `items_grid_button`**，需要同步改 **三个 64**： ```jsonc "items_grid_button": { "type": "panel", "size": [ 48, 48 ], // ← ① 默认尺寸 "bindings": [ ... { "binding_type": "view", "source_property_name": "(48 * (not(('A' + #form_button_text - '§i§t§e§m') = 'A' + #form_button_text)))", "target_property_name": "#size_binding_x_absolute" // ← ② x 动态尺寸 }, { "binding_type": "view", "source_property_name": "(48 * (not(('A' + #form_button_text - '§i§t§e§m') = 'A' + #form_button_text)))", "target_property_name": "#size_binding_y_absolute" // ← ③ y 动态尺寸 } ] } ``` ⚠️ **三处必须保持一致**。`size` 是默认值，下面两个表达式是按 marker 显示时的实际尺寸；不一致会出现"占位但显示不对"。 常用速查（物品区 220 px 时）： | 物品大小 | 每行列数 | |---|---| | `64` | 3（当前） | | `54` | 4 | | `44` | 5 | | `36` | 6 | | `30` | 7 | | `27` | 8 | > 物品太小时记得把内部 `items_grid_image_panel.max_size` 也缩一下（默认 `[24, 24]`），不然图标会顶满。 --- ## 2. 改物品区宽度 想让左边 nav 窄一点 / 右边网格更宽： ```jsonc // grid_form.json "tabs_dialog@...": { "size": [ "20%", "100% - 36px" ] } // 原 30% "items_dialog@...": { "size": [ "80%", "100% - 36px" ] } // 原 70% ``` 或者直接放大整体窗口： ```jsonc "root": { "size": [ 400, 240 ] } // 原 [320, 200] ``` 两边之和必须 = 100%，否则右边会被挤出可见区。 --- ## 3. 固定列数（grid_dimensions） 不想依赖"算出来"的列数，想**写死 N 列**，把 `items_grid_panel` 换成： ```jsonc "items_grid_panel": { "type": "grid", "size": [ "100%", "100%c" ], "anchor_from": "top_left", "anchor_to": "top_left", "grid_item_template": "grid_form.items_grid_button", "grid_dimensions": [ 4, 100 ], // ← 4 列 × 最多 100 行 "collection_name": "form_buttons", "bindings": [ { "binding_name": "#form_button_length", "binding_name_override": "#maximum_grid_items" } ] } ``` 要点： - **删掉** `grid_rescaling_type` 和 `grid_fill_direction`，跟 `grid_dimensions` 冲突。 - 第二个数字（行数）给一个够大的上限即可，多余的行不会渲染。 - 物品宽度仍要满足 `列数 × 物品宽 ≤ 容器宽`，否则会溢出 / 被裁。 --- ## 4. 调整步骤建议 1. 想要 N 列 → 先算 `物品宽 = floor(220 / N)`。 2. 把 `items_grid_button` 三处 `64` 改成新尺寸。 3. 进游戏测试（不用退到桌面，刷一下资源包就行；仅改尺寸，没动 `_ui_defs.json` 或 manifest）。 4. 如果图标太大不协调，把 `items_grid_image_panel.max_size` 一起调（一般保持物品尺寸的 40~50%）。 --- ## 5. 调试 - 物品堆在左上角不换行 → `grid_rescaling_type` 被删了，但没设 `grid_dimensions`。 - 物品被裁切 / 看不全 → 列数 × 物品宽 > 容器宽，缩小物品或加宽容器。 - 改完没生效 → 完全退出游戏到桌面再进，UI 文件改动有缓存。 [/MD]