docs(UI): 更新UI界面拼接设计指南

添加双向转换功能说明:
- 正向转换:JSON配置 → UI预制体
- 反向转换:UI预制体 → JSON配置

新增支持的组件类型:
- InputField、ScrollRect、GridLayoutGroup、VerticalLayoutGroup、HorizontalLayoutGroup

新增命令支持:
- ExportPrefabToJson:从预制体反向导出JSON

更新使用示例:
- 外部命令触发方式
- Unity编辑器菜单入口
- 代码调用示例
This commit is contained in:
Shiliang
2026-05-27 15:52:23 +08:00
parent 6e0f518580
commit 411c34d664

View File

@@ -167,13 +167,18 @@ Window
### 8.1 概述
本项目支持通过JSON配置文件自动生成Unity UI预制体实现UI界面的快速构建和迭代。
本项目支持JSON配置与Unity预制体的双向转换
- **正向转换**JSON配置 → UI预制体
- **反向转换**UI预制体 → JSON配置
实现UI界面的快速构建、迭代和版本控制。
### 8.2 核心组件
| 组件 | 职责 | 文件路径 |
|-----|------|---------|
| **UIPrefabGenerator** | 解析JSON并生成UI预制体 | `Assets/Editor/Command/UIPrefabGenerator.cs` |
| **UIPrefabToJson** | 从预制体反向导出JSON | `Assets/Editor/Command/UIPrefabToJson.cs` |
| **RemoteCommand** | 提供外部调用接口 | `Assets/Editor/Command/RemoteCommand.cs` |
| **ExternalCommandListener** | 监听外部命令触发文件 | `Assets/Editor/Command/ExternalCommandListener.cs` |
@@ -214,11 +219,16 @@ Window
| 类型 | 对应Unity组件 | 关键属性 |
|-----|-------------|---------|
| **Image** | Image | sprite, color, type (Simple/Sliced/Tiled/Filled) |
| **Text** | TextMeshProUGUI | text, font, fontSize, color |
| **Button** | Button | onClick, targetGraphic, transition |
| **Slider** | Slider | minValue, maxValue, value, fillRect |
| **Toggle** | Toggle | isOn, targetGraphic |
| **Image** | Image | sprite, color, type, preserveAspect |
| **TextMeshProUGUI** | TextMeshProUGUI | text, font, fontSize, color, alignment |
| **Button** | Button | interactable, transition, navigationMode |
| **Slider** | Slider | minValue, maxValue, value, wholeNumbers, direction |
| **Toggle** | Toggle | isOn, toggleTransition, transition |
| **InputField** | InputField | text, placeholder, characterLimit, contentType |
| **ScrollRect** | ScrollRect | horizontal, vertical, movementType |
| **GridLayoutGroup** | GridLayoutGroup | cellSize, spacing, constraint, padding |
| **VerticalLayoutGroup** | VerticalLayoutGroup | spacing, childAlignment, padding |
| **HorizontalLayoutGroup** | HorizontalLayoutGroup | spacing, childAlignment, padding |
### 8.5 外部命令触发机制
@@ -241,6 +251,7 @@ GenerateUIPrefab:Assets/Editor/UI/BagWindow.json
| 命令 | 参数 | 说明 |
|-----|------|------|
| **GenerateUIPrefab** | `jsonPath` [, `prefabPath`] | 根据JSON生成UI预制体 |
| **ExportPrefabToJson** | `prefabPath` [, `jsonPath`] | 从预制体反向导出JSON |
| **ReadJson** | [参数列表] | 读取JSON配置测试用 |
#### 8.5.3 完整执行流程
@@ -282,32 +293,50 @@ GenerateUIPrefab:Assets/Editor/UI/BagWindow.json
| 菜单路径 | 功能 |
|---------|------|
| `Tools > UI > Export Prefab to JSON` | 选择预制体导出JSON |
| `Tools > UI > Generate BagWindow Prefab` | 生成BagWindow预制体 |
| `Tools > External > Test ReadJson` | 测试ReadJson命令 |
| `Tools > External > Test GenerateUIPrefab` | 测试GenerateUIPrefab命令 |
| `Tools > External > Test GenerateUIPrefab` | 测试正向生成 |
| `Tools > External > Test ExportPrefabToJson` | 测试反向导出 |
### 8.7 使用示例
#### 方式一:外部命令触发
```bash
# 创建触发文件
# 正向从JSON生成预制体
echo "GenerateUIPrefab:Assets/Editor/UI/BagWindow.json" > "F:\JMNet\CrystalBattle_Client\Trigger_Command.txt"
# 反向从预制体导出JSON
echo "ExportPrefabToJson:Assets/Game/GameHFResource/CN/UIWindows/BagWindow/BagWindow.prefab" > "F:\JMNet\CrystalBattle_Client\Trigger_Command.txt"
```
#### 方式二Unity编辑器菜单
**正向生成**
1. 打开Unity编辑器
2. 点击菜单 `Tools > External > Test GenerateUIPrefab`
3. 查看Console窗口日志确认执行结果
**反向导出**
1. 打开Unity编辑器
2. 点击菜单 `Tools > UI > Export Prefab to JSON`
3. 选择要导出的预制体文件
#### 方式三:代码调用
```csharp
// 直接调用生成方法
// 正向从JSON生成预制体
UIPrefabGenerator.GeneratePrefabFromJson(
"Assets/Editor/UI/BagWindow.json",
"Assets/Game/GameHFResource/CN/UIWindows/BagWindow/BagWindow.prefab"
);
// 反向从预制体导出JSON
UIPrefabToJson.ExportPrefabToJson(
"Assets/Game/GameHFResource/CN/UIWindows/BagWindow/BagWindow.prefab",
"Assets/Editor/UI/BagWindow.json"
);
```
### 8.8 注意事项