很多小伙伴对于Data-Shape制作简单的UI都是似懂非懂,群里很多小伙伴也总是询问相关的问题,那么,今天我就简单举几个例子,专门介绍下Data-Shape创建简单UI的教程。
首先,本次教程,使用的是Data-Shape 2021.2.91版本的节点包,和低版本稍微有些出入,小伙伴们可以自行更新,也可以到公众号里回复“节点包”获取。
新版的节点包UI分组进行了重新排列,如下图:
由分组就可以看出,MultipleInputForm ++节点是创建UI的关键所在。
我们先来做个简单的UI,给大家演示一下:
如图,我们这里做了一个下拉列表的UI,可以选择族类别,我们来看看这个UI是怎么做的:
放大一下:
如上图,我把每个输入端,前面都做了注释,大家可以对照着看下,有的有默认值,我这里只是为了便于说明,都给连上了。
这里面有几个关键输入,是必须有的,分别是:
(1)Inputs,这里是我们UI要做的东西,也是主要的数据输入,而且这里还不能随便连,必须是Data-Shape预设好的节点,就是UI分组下的,子分组的内容,例如我们上面做的是下拉菜单,就需要一个DropDown Date节点,意思是下拉列表数据输入;
(2)Toggle,这个输入是告诉程序是否运行,默认是false,需要运行的时候,需要给他一个true值;
其他的默认空,程序也是可以运行的哦~但是就会变成下面这幅模样:
接下来,就是如何使用UI得到的数据,MultipleInputForm ++后面有个User Inputs,就是最终用户输入的数据,如果是单数据,我们直接使用即可,如果是多个输入端,我们就要用Code Block节点,来拆分一下输入的数据,分别使用:
好了,到这里,一个基本的流程就完事了,之所以需要按照Date-Shape里的节点作为输入才行,是因为MultipleInputForm ++的代码里,对Inputs这里的输入的数据,进行了判断,哪个节点,对应输出什么结果,都是固定的,有兴趣的小伙伴,可以编辑下节点看看代码,可以直接对某些输入端进行汉化处理。
提示:
这里提示一下,当需要在一个UI里有多个输入的时候,需要将多个输入端,合并为一个列表,并用Flatten节点,将输入列表拍平,不然无法创建UI。
简单举个例子,同时给三个输入端,分别是列表,布尔值和点选模型:
运行后弹出如下UI界面,点击选择模型后,会弹出提示,选择墙后按Esc退出:
效果就是这样了基本上。
接下来简单给大家理一理,都有哪些UI节点:
(1)图表类,包括饼图、折线图、点图等:
效果如图:
(2)UI.Color.ByArgbUI,这个本身就是做好的UI界面,直接选择颜色即可:
(3)Input,这里就是我们常用的UI输入端,如下图:
基本都是字面意思,感觉没啥可讲的了
(4)Selection,都是一些选择节点,需要点击按钮或者直接UI选择:
按照上面案例里,简单连一个就行。