【Unity UI 进阶】仿 Element UI 打造企业级 Unity UI 组件库10环境与工具说明项说明代码生成本系列组件库代码由CursorAI 编程助手辅助生成与迭代再结合工程内联调、重构落地Unity 版本2022.3.50f1c1Unity 2022.3 LTSUI 框架UGUIUnityEngine.UI TextMeshPro示例工程EleUnityUI仿 Element UI 企业级组件库建议使用Unity 2022.3 LTS同系列版本打开工程。上篇09讲完EleAccordion本篇是EleDialog对话框模态遮罩、表单字段、确认/取消以及和Table 行编辑弹窗的复用关系。Dialog 对话框模态 / 非模态、标题拖拽、右下角缩放、边缘收起后台里删一行、改一行、批量改字段几乎都绕不开「弹窗」。Element 的 Dialog 心智是遮罩可选Modal 挡住底层Modeless 可继续点表格确认 / 取消危险操作要二次确认表单窗按字段配置生成 Input / Select / Number…可拖可缩标题栏移动、右下角改尺寸需要时可收到边缘EleDialog按同一模型实现Alert / Confirm / Form 共用一副壳Table 行编辑不另写弹窗只调ShowForm。本篇覆盖模态遮罩EleDialogMode.Modal/Modeless表单字段与校验确认 / 取消回调标题拖拽 / 右下角缩放 / 边缘收起还原与 Table 行编辑的复用关系Prefab Generate 约定涉及文件能力主要文件运行时壳与交互Runtime/Dialog/EleDialog.cs标题拖 / 缩放把手EleDialogTitleDrag.cs/EleDialogResizeHandle.cs示例配置Runtime/Dialog/EleDialogModels.cs、EleDialogConfigAsset.cs示例宿主Runtime/Dialog/EleDialogSampleDemoHost.cs示例生成Editor/Dialog/EleDialogSampleGenerator.cs表单配置类型Runtime/Tables/EleTableModels.csEleDialogConfig/EleFormFieldConfigTable 打开弹窗Runtime/Tables/EleTable.Dialogs.cs颜色走设计变量遮罩半透明黑、面板PanelBg、标题栏HeaderBg、主按钮 Primary。工程约定不改第三方插件新增 C# 写中文注释Generate 烘焙EleDialogHost壳Overlay Panel ResizeHandle运行时缺引用打日志不在 Demo 路径「缺啥建啥」。一、整体结构1. Prefab 层级示例EleDialogSample ├── DemoPanel ← 左侧演示按钮 日志 │ ├── BtnAlert / BtnConfirm │ ├── BtnFormModal / BtnFormModeless │ └── Log └── EleDialogHost ← EleDialog铺满sortingOrder 置顶 ├── Overlay ← 模态遮罩非模态时隐藏 └── Panel ├── TitleBar ← Title Collapse(—/□) Close(×) ├── Body │ ├── Message ← Alert/Confirm 文案表单校验提示 │ └── Form ← 动态字段行 ├── Footer ← Cancel / Ok └── ResizeHandle ← 右下角缩放ignoreLayout2. 数据流ShowAlert / ShowConfirm / ShowForm → EnsureShell重绑已烘焙壳 → ApplyChrome标题、按钮、模态、尺寸、可拖/缩/收 → 用户交互 → 拖 TitleBar → anchoredPosition → 拖 ResizeHandle → sizeDelta夹最小尺寸 → 点 — → 藏 Body/Footer贴最近边缘成条点 □ 还原 → Ok → CollectForm 校验 → onSubmit / onOk → Cancel / × → onCancel → Close业务最小接入独立使用vardlgEleDialog.Ensure(parent);dlg.ApplyChromeOptions(draggable:true,resizable:true,collapsible:true);dlg.ShowConfirm(确认,确定删除,onOk:()Delete(),onCancel:null);Table 侧更常见table.OpenConfiguredDialog(editRow,newListEleTableRowData{row.Data});// 或行操作 actionKindEdit → 默认 key openDialogKey ?? editRow二、配置模型1.EleDialogConfig与 Table 共用字段含义key工具栏 / 行操作openDialogKey引用title标题栏文案modeModal/Modelesswidth/minHeight初始尺寸confirmText/cancelText/showCancel底栏按钮bindSelectedRow打开时用选中行第一条填字段draggable/resizable/collapsible拖、缩、收起fieldsEleFormFieldConfig列表2. 字段类型EleFormFieldType类型UIInput单行 TMP_InputFieldNumber数字内容类型TextArea多行Select按钮轮换选项值存隐藏 InputCheckboxToggle提交1/0必填失败时在Message区用危险色提示不关窗。3. 示例EleDialogSampleConfig独立 Demo 用默认 chrome 开关 demoForm结构与 TableeditRow对齐便于对照博文 04。三、模态与非模态模式Overlay底层可否操作Modal半透明黑、raycastTargettrue否先关窗Modeless隐藏 / 透明、不挡射线是可继续点表格或 Demo 按钮ShowAlert/ShowConfirm用bool modal参数ShowForm读config.mode。示例按钮表单模态→EleDialogMode.Modal表单非模态→EleDialogMode.Modeless四、拖拽、缩放、边缘收起1. 拖标题EleDialogTitleDrag挂在TitleBar左键拖动把eventData.delta换算成 Canvas 本地增量写入_panel.anchoredPosition并夹在 Host 矩形内。收起成条后仍可拖松手按最近边再贴齐。2. 右下角缩放EleDialogResizeHandle锚在 Panel 右下LayoutElement.ignoreLayouttrue避免被竖排布局挤走。拖动时增大sizeDelta并按中心枢轴补偿anchoredPosition夹minWidth/minHeight。3. 边缘收起操作行为点标题栏—记住位置与尺寸隐藏 Body / Footer / ResizeHandle缩成条贴最近边点□还原尺寸与位置重新显示内容区贴边枚举EleDialogDockEdge Left / Right / Top / Bottom。五、与 Table 行编辑的复用关系这是本篇重点不要为表格再写一套弹窗。行操作 Edit / 工具栏 openDialogKey → EleTable.OpenConfiguredDialog(key, contextRows) → config.FindDialog(key) → EleDialogConfig → EleDialog.Ensure(table.transform) // Host 名 EleDialogHost → ShowForm(cfg, seedRow, onSubmit, onCancel) → OnDialogSubmitted(EleDialogSubmitRequest)能力Dialog 独立示例Table 行编辑壳 UIGenerate 烘焙EleDialogHostEnsure复用同组件配置EleDialogSampleConfig.demoFormEleTableConfig.dialogs种子数据Demo 构造EleTableRowDatabindSelectedRow→ 选中行提交Demo 打日志OnDialogSubmitted→ 业务改行 / 调接口确认框ShowConfirm行删除confirmBeforeExecute等同壳因此改遮罩、拖拽、缩放、收起表格编辑窗一并受益。字段模型仍放在EleTableModels历史原因运行时组件在Runtime/Dialog/。六、Prefab 生成与菜单1. 菜单EleUnityUI → Samples → Dialog → Generate EleDialog Sample EleUnityUI → Samples → Dialog → Spawn EleDialog Preview In Scene EleUnityUI → Samples → Dialog → Reset EleDialog Config To Preset GameObject → EleUnityUI → Dialog → SampleSpawn不会在缺 Prefab 时自动 Generate。2. Generate 烘焙什么左侧DemoPanel与四个入口按钮EleDialogHostOverlay、Panel、TitleBar含 Collapse/Close、Body、Form、Footer、ResizeHandleEleDialogSampleDemoHost序列化引用3. 运行时约定// ✅ 壳已烘焙EnsureShell 只 Rebinddialog.EnsureShell();dialog.ShowForm(cfg,seed,onSubmit,onCancel);// ❌ Demo 里发现没有 Panel 就临时拼一棵树缺dialog引用Debug.LogError([EleDialog] 缺少 dialog 引用请重新 Generate Prefab)。七、API 一览API / 事件说明Ensure(parent)获取/创建EleDialogHostApplyChromeOptions(...)拖 / 缩 / 收起与最小尺寸ShowAlert/ShowConfirm警告 / 确认ShowForm(config, seed, onSubmit, onCancel)表单窗Close(invokeCancel)关闭ToggleCollapse收起 ↔ 还原CollectForm收集字段值IsOpen/IsCollapsed/IsModal状态TableOpenConfiguredDialog/OnDialogSubmitted行编辑入口八、落地检查清单Generate 后有EleDialogSample.prefab含EleDialogHost/Panel/ResizeHandleSpawn 后点 Alert / Confirm / 两种表单均能打开模态时遮罩挡住 Demo非模态时可再点其它按钮拖标题可移动拖右下角可改大小不低于最小尺寸点 — 收到边缘成条点 □ 还原表单必填为空时提示且不关闭提交后日志有字段值Table 行「编辑」仍打开同一套EleDialog见博文 04九、小结EleDialog 一副壳覆盖 Alert / Confirm / FormModal / Modeless只切换 Overlay不换组件拖标题、右下角缩放、边缘收起是窗体 chrome与表单字段正交Table 行编辑openDialogKey→ 同一ShowForm业务听OnDialogSubmitted系列回顾与下篇篇内容04Table 下工具栏、弹窗入口、OnDialogSubmitted05TabsPanel_{tabCode}09Accordion手风琴与 Tabs 边界10Dialog模态、表单、拖缩收起、与 Table 复用本文11反馈类补齐EleMessage 页面提示 Tooltip 用法UGUI 无 Message/Alert/Tooltip —— 新建轻量EleMessageTooltip 基于已有EleUiTooltip写清配置与用法不另造一层壳。若你也在纠结「表格编辑要不要单独做 Page」字段少、要挡操作 →Modal Dialog要对照表格边改边看 →Modeless整页复杂向导 → 另开路由/面板别硬塞 Dialog。