Unity --- 选项与下拉框的使用

选项组件 --- 其实就是Toggle

面板(Panel)下面的Toggle就是切换 

 上面这个就是我们创建的切换游戏物体

 Toggle(切换)下面有两个子物体,一个是背景,一个是标签

切换也对应的被分成了两部分,一部分是那个钩状图片的就是背景,另一部分文本就是标签了

标签是一个文本游戏物体,它控制的是切换中的文本内容

 Toggle(切换)组件中需要关注的是下面这个选项:

如果选择了这个是开启的,则切换的图案处的勾也会被勾上,否则就不会被勾上 

我们可以添加多个切换

此时就变成了选项了,玩家可以点击背景来控制打勾与否做出选择

但是我们该怎么实现玩家点击一次可以打勾,再点击一次又取消打勾呢 --- 怎么让玩家控制是开启的这个参数呢?

同时我们又如何规定玩家一次只能选一个呢?

我们需要在任意一个Toggle(切换/选项)a中添加一个组件 --- Toggle Group(选项组)

 然后点击这个Toggle Group组件并将其拖到Toggle 的组件最后的那一个Group选项框中

 然后我们点击另一个toggle  B,并把添加了Toggle group组件的toggle  A在层级处的游戏物体文件直接拖到这个toggle  B的Group选项框中

 完成上面这些操作之后,Touggle (选项)A和Touggle(选项)B就处于同一个选项组中了,此时我们点击开始游戏后

会发现当我们在点击选项A的背景部分时,这部分会被打上勾,且当我们点击选项B的背景部分时,会出现选项A处的勾消失,选项B处的勾出现

这就是选项组的作用(在选项组中一次只能出现一个被勾的选项)


下拉列表 --- DropDown

也有新版和旧版之分,此处我们用旧版

创建一个下拉列表之后,我们点击游戏运行,然后我们点击下拉列表就会出现多个选项框,这些选项框中的选项都是可选的

下面这个选项列表的关键组件 --- Dropdown组件

 

 

在上面这一部分我们可以添加,删减以及修改选项列表中的选项 

并且这个组件中也有一个事件模块

这里面的事件(函数)会在我们选项框中的选项发生改变的时候调用 

第一个框是选项框,点击下拉符号出现的多个框是可选项,当我们选择一个可选项后,选项框中的内容就会被我们选择的可选项替代,此时就发生了值改变,会调用事件模块中的事件


除了我们手动去添加可选项以外,我们还可以通过代码的方式来添加可选项

1.创建一个组件,并将其挂载到drapDown游戏物体上

2.声明一个drapDown组件对象来承接我们获取到的游戏物体上的drapDown组件

这里是引用

记得引用命名空间(上旧下新)

 3.创建一个列表变量,列表的类型是可选项类型,用这个类别变量来承接通过组件对象获取到的可选项列表

这里是值拷贝

4.通过列表变量调用列表方法修改选项

由于是值拷贝,所以要将我们自己修改后的拷贝列表赋值给组件的列表,实现列表更新后才能对组件中的选项进行修改

  在这里我们会发现每一个选项处都可以添加一个图像,且在标题(也就是选项框处)也能够添加图像

但是会有一个问题出现:如果我们直接在选项处给选线添加图像的话,这个图像是无法展示的,这是为什么呢?

这就要涉及到每一个可选项的创建方式了

其实每一个可选项都是根据一个模板创建的,我们点开我们创建的dropdown游戏物体

它有三个子物体,一个是作为选线文字的Label,一个是箭头图标arrow,另一个就是我们可选项的创建模板,点开创建模板

 

主要分为两大部分:一部分是viewport可视部分,一部分是scrollbar下滑条

我们点击可视部分,带年纪content,再点击item,最后展开的部分就是我们的可选项的看的见的模板,我们会发现!这个模板中是没有图像游戏物体的时候,也就是说我们的可选项根据这个模板创建的时候连展示图像的图像游戏物体都没有

既然这样的话即使我们传sprite过去也毫无用处,因为连展示sprite的机会也没有

此时我们可以自己添加一个图像游戏对象,首先将父物体选择可用,然后添加一个图像游戏物体,然后再关闭可用

(在场景中要摆好这个游戏图像的位置)

然后再把我们创建的这个游戏图像拖到item image(可选项图像处),如果想在标题处也设置图像的话则将游戏图像也拖到caption image处(并摆好游戏图像在标题(可选框)处的位置)

 完成上面所有的步骤之后我们再向选项中的每个可选项传一个spirit

 此时这个spirit就会被传给根据模板创建的image展示

当可选项来到标题(选项框)的时候也同理,可选项的spirit也会通过标题框处的image展示

猜你喜欢

转载自blog.csdn.net/qq_51947882/article/details/126563490