Table of contents
UIElements Expansions是Unity Editor的扩展资产。
UIElements Expansions: Form
「UIElements Expansions: Form」系列强烈支持「UIElements」,开始与Unity 2019.1。
所谓UIElements
UIElements是从Unity 2019.1开始引入的替换当前Unity编辑器的GUI系统(IMGUI)的功能。
您可以创建Unity的GUI,就像使用HTML和CSS创建网页一样,组合Unity的HTML「UXML」和Unity的样式表「USS」。
当然,您可以像以前一样在编辑器脚本中为编辑器编写处理,并且有像jQuery这样的方法,因此您可以创建像HTML5这样的动态GUI。
在未来,计划不仅取代编辑器,还取代运行时GUI(当前uGUI),并且有望留给未来的Unity GUI。
只是潜力很高,但由于它刚刚推出,它还没有足够的功能来充分利用它。
「UIElements Expansions」是一种强烈支持其缺失部分的资产。
此「UIElements Expansions: Form」主要支持以下功能。
- UIElements Expansions通用功能
- 全局样式表
- 检查器自动转换功能
- 添加标签/功能
- 附加类
- 窗体功能
- 附加字段
- 文件上传表单
UIElements Expansions通用功能
请参阅以下页面。
窗体功能

「UIElements Expansions: Form」提供了一种功能,允许用户输入文本字段等,如HTML表单,按子分按钮发送数据,登录,用户注册,输入其他数据。
读取和保存数据仅提供界面,以便您可以自由选择目标,例如Firebase和ScribatleObject。
您也可以从脚本运行它,如果您创建静态方法,则无需直接编写EditorWindow脚本或检查器脚本,因为您可以从UXML读取和保存数据。
附加字段
在「UIElements Expansions: Form」中,我们创建了几个附加字段,以便更轻松地输入表单。
- SliderField
- 可直接输入数值的滑块字段
- SliderIntField
- SliderField的Int版本
- TextPopupField
- 可以从UXML中指定元素的弹出字段
文件上传表单
「UIElements Expansions: Form」提供了一个表单,允许您选择和上传文件。
它只提供接口而不执行实际上传。
从计算机中选择文件并将其导入Unity项目。之后,由于传递了文件路径,因此可以使用它执行上传等。
要上传的文件是预览,它是一个用户友好的GUI。
利用方法
导入

请从Unity Asset Store购买。
购买后可从「我的资产」导入。
窗体功能
窗体对齐
添加表单很容易。只需用「engine:Form」标签括起文本字段等元素即可。
您还可以使用「engine:SubmitButton」标签放置表单的子分钟按钮。
<engine:Form>
Any form fields
<engine:SubmitButton label="Submit" />
</engine:Form>
处理窗体数据
表单在显示时提供「从数据库等读取」界面,在提交时提供「写入数据库等」界面。
您可以分别使用UXML标签和自己的静态方法轻松实现它们。
从数据库等读取
读取时的实现首先创建一个静态方法,该方法返回「Dictionary<string, object>
」,如下所示。
// FormAction.cs
public static class FormAction {
public static Dictionary<string, object> LoadToForm( ) {
Something to do
return dictionary;
}
}
使用此Dictionary将数据还原到表单字段。
在显示窗体时执行此方法以读取数据。为此,请在「engine:Form」标签中指定「assembly (optional)」 「type」 「method」属性。
要执行上述方法,请执行以下描述。
<engine:Form type="FormAction" method="LoadToForm">
Any form fields
<engine:SubmitButton label="Submit" />
</engine:Form>
将读入的数据与各字段相关联
将扫描的数据设置为每个字段的默认值。
哪个字段对应于数据的哪个键由每个UXML标记的「name」属性确定。
<engine:TextField label="Name" text="Name input" name="Name" />
<editor:EnumField type="UnityEngine.SystemLanguage,UnityEngine" value="English" name="Language" label="Language" />
在上述示例中,文本字段应用数据的「Name」键中包含的数据,而Enum字段应用「Language」键中包含的数据。
如果密钥没有数据,则输入字段中指定的初始值。
写入数据库等
对于写入数据库等,请创建一个静态方法,就像读取一样。
这次我们将创建一个方法来指定参数「Dictionary<string, object>
」。
// FormAction.cs
public static class FormAction {
public static void SaveFromForm( Dictionary<string, object> formData ) {
Something to do
}
}
此外,在UXML标签上,为「SubmitButton」标签指定「assembly (optional)」 「type」 「method」属性。
<engine:SubmitButton label="Submit" type="FormAction" method="SaveFromForm" />
总结
总之,它将是以下代码。
<engine:Form type="FormAction" method="LoadToForm">
...
<engine:TextField label="Name" text="Name input" name="Name" />
<editor:EnumField type="UnityEngine.SystemLanguage,UnityEngine" value="English" name="Language" label="Language" />
...
<engine:SubmitButton label="Submit" type="FormAction" method="SaveFromForm" />
</engine:Form>
附加字段
SliderField
「SliderField」是一个文本字段,允许您直接将数字输入到Unity中内置的「Slider」。
该规范与「Slider」相同,并描述如下。
<engine:SliderField label="Point" low-value="0" high-value="100" name="Point" />
SliderIntField
「SliderIntField」是「SliderField」的int版本。
规格与「SliderInt」相同。
<engine:SliderIntField label="Age" low-value="0" high-value="120" name="Age" />
TextPopupField
「TextPopupField」是弹出并显示选项的类型字段,类似于「EnumPopupField」等。
「EnumPopupField」需要预先定义enum类型,但「TextPopupField」可以在UXML标签上定义选项。
<editor:TextPopupField label="Sex" data="None,Male,Female" selected="Male" name="Sex" />
「data」属性以逗号分隔定义选项。默认值由「selected」属性指定。
文件上传表单
您可以使用标签「editor:Uploader」编写文件上传表单,就像使用其他字段一样。
<editor:Uploader label="Image" accept="*.jpeg;*.jpg;*.png;" name="Image" />
也可以仅选择具有「accept」标签指定的扩展名的文件。
将此字段与表单功能结合使用时,可以获取提交时所选文件的路径数据。请使用那个路径将文件上载到服务器等。
总结
「UIElements Expansions: Form」强烈支持「UIElements」,开始与Unity 2019.1。特别是,您可以轻松编写需要编写编辑器脚本的检查器的设计。
此外,通过使用表单功能,您可以轻松地为用户实现输入界面。
该设计引入了平面设计,并且它被安排成与Unity 2019.3相匹配的形状,这将立即变得很酷,因此您可以舒适地使用它。
如果您有兴趣,请务必考虑一下,因为它在资产商店出售!