【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。
企业数字化 ERP 产品动态
相关推荐
减少AI视频抽卡的7种3D预演技术，从人物走位到镜头调度一次讲透 大家好，我是抖知书！
AI视频生成最让人崩溃的场景，不是模型能力不够，而是提示词写了一大段，生成结果和脑子里想的完全不是一回事。
人物从左边出来，模型让他从右边进来；镜头想拍侧面特写… · 2026/9/27 23:32:54
华为杯研究生数学建模20年优秀论文与赛题深度解析：从备赛到复现的完整指南 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 23:32:48
WebAssembly 与 ESP32：为什么一个 .wasm 文件不等于完整应用 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 23:32:48
RLVR训练隐忧：验证器诱导策略支持重塑造，削弱后续学习能力 北大一项研究公开的结论，值得每个在做 RLVR 训练的人停下来读一遍：用验证器驱动的强化学习训练大模型，评测分数会涨，但模型后续继续训练的能力会被削弱。研究把这种现象称为“验证器诱导的策略支持重塑造”（Policy Sup… · 2026/9/28 1:18:49
浙江建设职业技术学院继续教育学院网站搭建5个避坑注意事项 浙江建设职业技术学院继续教育学院网站搭建5个避坑注意事项 网站做好了没人访问，这比做不出网站更让人崩溃。很多做高校继续教育官网或配套工具站的朋友，代码写得再漂亮，上线后打开率惨不忍睹。问题往往不出在功能，而出在那些容易被忽略的 注意事项… · 2026/9/28 1:18:49
GPS模块协议解析：NMEA 0183与UBX的对比、配置及工程实践 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/28 1:18:43
STM32F103C8T6入门：最小系统板、启动方式与调试避坑指南 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/28 1:18:43
408真题解析：DMA方式与磁盘磁道扇区计算全攻略 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/28 1:18:43
基于Java的加油站信息管理系统设计与实现 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/28 1:18:43
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
制作网页比较方便的软件怎么选?一文搞懂避坑指南 制作网页比较方便的软件怎么选?一文搞懂避坑指南 很多老板一上来就问：做个网站多少钱？但我反问他：你的域名买了吗？服务器租了吗？他一脸懵。这就是典型的“域名服务器搞不懂”。别急，今天咱们不聊虚的，直接 一文搞懂 那些让你头秃的技术名词。… · 2026/9/28 0:00:06
婚恋网站实战案例：避开3个高价坑，省钱50%还能跑赢流量 婚恋网站实战案例：避开3个高价坑，省钱50%还能跑赢流量 找婚恋网站建站公司，最怕的就是被坑高价。很多同行跟我吐槽，报价单上写得模棱两可，功能栏里全是“高级定制”、“专属UI”，结果落地全是套壳。今天不聊虚的，直接甩几个我经手的 实战案例… · 2026/9/28 0:00:19
济南做网站多少钱：3个案例拆解，防黑源码下载全攻略 济南做网站多少钱：3个案例拆解，防黑源码下载全攻略 上周济南一个做建材的老板找我，脸都绿了。他的官网首页弹出了赌博广告，后台被植入了挖矿脚本。他慌得问我：“网站被黑挂马不知道怎么办？能不能直接找之前的外包公司要源码下载，看看哪里被动了手脚？… · 2026/9/28 0:00:25
