MC BE 聊天栏 Tab 补全按钮 —— JSON UI 入门教学
从零开始，手把手教你用资源包为基岩版聊天界面添加一个实用的 Tab 补全按钮
前言
众所周知，Minecraft BE 的 UI 分为 JSON UI 和 Ore UI，而 JSON UI 通过 JSON 驱动，可以通过资源包修改。
这次我们通过一个资源包制作过程浅教一下最最基础的 JSON UI 部分，你仅需要拥有 JSON 文件的格式了解和最基础的编程知识。技术不好，有误请指出。
需求分析
首先发现 Minecraft PE 没有实体键盘，好像没法儿像电脑那样按到 Tab 键实现命令补全，于是就可以考虑在聊天界面添加一个 Tab 按钮实现命令补全。
第一步：定位官方 UI 文件
首先我们先观察观察聊天界面。
发现适合加在聊天设置按钮右边，于是我们需要找到官方的聊天界面的 JSON UI 文件，这里可以去 Github 上的 Mojang 官方仓库下载官方附加包，链接：https://github.com/Mojang/bedrock-samples/releases
来到下载的官方资源包，进入 ui/ 目录，发现 chat_screen.json 明显就是我们要找的修改目标。
我们打开这个文件，通过搜索关键词找到关键部分，我这里搜索了 send_button，通过看下上下文（红框部分），没错，这个 chat_bottom_panel 八成就是我们想要的修改部分。
第二步：理解 JSON UI 基础语法
关于 JSON UI，你只需要有最基础的了解：
- 命名空间（namespace）：通常写在 UI 文件开头，格式为
"namespace": "具体名字"，全局唯一，不需要和文件名相同。 - @ 符号：一个类似继承的东西，但准确来说是元素复用或元素引用，说白了就是直接抄过来。写法是
"这个元素的名字@另一个元素的命名空间.另一个元素的名字"。例如 "one_button": { ... } 是一个按钮元素，那么 "one_button@namespace.other_button": {} 就相当于完全把 other_button 元素拿过来了，因为它并没有覆盖任何属性。 - $ 符号：就是变量而已，写在元素定义内部或全局变量文件（
_global_variables.json，创建于资源包的 ui/ 目录下）。写法是 { ..., "$变量名": 值, ... }。
第三步：研究官方按钮结构
现在回看官方的内容，我们并不直接复制官方的文件内容再在此基础上进行修改，那样的话未来此文件有改动还得再手动改一遍。这点和生物等 JSON 文件定义不同，它并不是完全覆盖，而是进行合并操作（controls[] 不行，下面会讲使用 modifications）。
所以我们的 Tab 按钮样式和旁边的聊天设置按钮一样就行了，于是找到它。
发现这个按钮继承了本文件的 small_button 按钮，再去通过搜索找到具体定义，发现它又复用了 common_buttons.light_content_button，那哪个文件的命名空间叫 common_buttons 呢？这里我已经找到了，就是这个 ui_template_buttons.json。
但我们这里不需要再进去找下去了，我们直接看下边复用它的 keyboard_button 即可：
"keyboard_button@chat.small_button": {
"$button_content": "chat.keyboard_image_panel",
"$pressed_button_name": "button.keyboard_toggle",
"$focus_id": "keyboard_button_focus_id"
}
发现了前面的这三个关键变量：
$button_content 说明这个按钮的内容指向了图片面板，而我们这里不需要，指向一个文本（label）即可。- 按钮按下后触发的逻辑通过
{ "to_button_id": "...", "mapping_type": "pressed" } 实现，而 to_button_id 负责告诉游戏执行什么逻辑，很明显，$pressed_button_name 就该填写这个。 $focus_id 是有关焦点的，这里随便填个字符串就行了。
第四步：编写按钮标签
既然有了思路，就打开创建好的资源包 ui/chat_screen.json 文件，由于我们是要合并，文件名字不能改。
"tab_button_label": {
"type": "label",
"text": "Tab"
}
先把显示 Tab 文本的标签写出来，这几个字段还不够，还要写 color，我们就来到刚才发现的 common_buttons.light_content_button 的定义位置。
往下翻一点，看到了 "$default_text_color|default": "$light_button_default_text_color"，很明显 $light_button_default_text_color 就是我们想要的颜色，来到全局变量文件，发现里面确实有这个字段，我们直接引用即可：
"tab_button_label": {
"type": "label",
"text": "Tab",
"color": "$light_button_default_text_color"
}
我们还需要填写两个字段，"anchor_from" 和 "anchor_to"：
- 前者代表以哪里为该控件的中心，我们写成中间就好了：
"anchor_from": "center" - 后者代表对齐父控件的哪里，这里父控件就是我们的 Tab 按钮，同样写成中心：
"anchor_to": "center"
达到文字显示在按钮正中央的效果。
第五步：编写 Tab 按钮并绑定事件
现在来写 tab_button，直接复用前面所说的 small_button，即 "tab_button@chat.small_button": {...}，再让内容指向 tab_button_label，即 "$button_content": "chat.tab_button_label"。
而按下时的 id 我们到官方的 chat_screen.json 里找，搜索关键词发现 button.chat_autocomplete 就是我们想要的 id，并且注释也写明了额外的映射。
直接照抄过来：
"tab_button@chat.small_button": {
"$button_content": "chat.tab_button_label",
"$pressed_button_name": "button.chat_autocomplete",
"$focus_id": "tab_button_focus_id"
}
最后的 $focus_id 随便填一个字符串就行了。
第六步：使用 modifications 将按钮插入界面
现在来了解一下 modifications，它可以让我们通过非侵入式的方式修改父级的数组，防止版本更新崩掉。
来到我们需要修改的关键部分（上文提过）chat_bottom_panel，写下 "chat_bottom_panel": {"modifications": [...]} ，代表你要修改这个字段里的某个数组。如果你要修改的不是顶层，你需要使用 / 来进入深层，举个例子：
"hud_title_text": {
"controls": [
{
"title_frame": {
"controls": [
{
"title": {
"type": "label",
"text": "文本"
}
}
]
}
}
]
}
如果想改 title，就得写成 "hud_title_text/title_frame/title": {"modifications": [ ... ]}，我们不用管中间的数组，直奔对象即可。
modifications[] 的每一个对象就代表你要进行的一次修改操作，这里只介绍对象里包含这几个字段：
| 字段 | 说明 |
|---|
"array_name" | 代表你要修改的数组名字 |
"operation" | 代表执行哪种操作，有以下几种可选："insert_back"（插入到尾部）、"insert_front"（插入到头部）、"insert_before"（指定控件前）、"insert_after"（指定控件后） |
"value"[] | 代表具体要插入的内容 |
"control_name" | 需要配合 "operation" 为 "insert_before" 或 "insert_after" 时使用，帮助定位 |
回看官方代码，发现数组名字 "controls"，辅助定位控件使用 "text_box"，"operation" 就为 "insert_before"，当然你也可以选择 "insert_after" 和 "chat_settings_button"。写好之后就是下面这样：
"chat_bottom_panel": {
"modifications": [
{
"array_name": "controls",
"operation": "insert_before",
"control_name": "text_box",
"value": [
{
"tab_btn@chat.tab_button": {}
}
]
}
]
}
其中，tab_btn@chat.tab_button 因为这个文件的命名空间就是 "chat"，所以按照上文所讲的 @ 符号，直接写成这样即可。
第七步：整合全部代码
最后把所有的结合起来就大功告成了：
{
"tab_button_label": {
"type": "label",
"text": "Tab",
"color": "$light_button_default_text_color",
"anchor_from": "center",
"anchor_to": "center"
},
"tab_button@chat.small_button": {
"$button_content": "chat.tab_button_label",
"$pressed_button_name": "button.chat_autocomplete",
"$focus_id": "tab_button_focus_id"
},
"chat_bottom_panel": {
"modifications": [
{
"array_name": "controls",
"operation": "insert_before",
"control_name": "text_box",
"value": [
{
"tab_btn@chat.tab_button": {}
}
]
}
]
}
}
最终效果展示
让我们把弄好的资源包（别忘了正确填写清单文件）导入游戏看下效果。
很好，按钮已经成功添加，点击也能实现补全了，再次点击也能成功切换下一个补全。
提示： 本文涉及的官方 UI 文件可前往 Mojang 官方仓库 获取。记得根据你的游戏版本选择对应的 samples 版本哦！
这些只是 JSON UI 的皮毛，帮助你入门。
有任何问题和反馈可加我QQ：3806699176
文章内容欢迎指正
发表于 2026-7-28 17:57:55
提升卡
观察者
