利用Toggle制作背包选项卡、背包系统的简单实现、toggleGroup组件使用

た入场券 2022-12-21 14:57 151阅读 0赞

在项目开发的时候，有时需要单选按钮 / 多个按钮，但仅保证一个开启

此时，如果用 Button 实现的话，随着按钮数量的增加，逻辑的复杂性将不断增大

Unity 给我们提供了一个非常方便的组件 Toggle Group

使多个 Toggle 依赖它可以极其便利的实现一些需求

例如，**单选 / 换页 /tab标签页/ 切换背包商城页面**，等功能….

在游戏/软件开发的时候，我们优势需要保证一个按钮的按下，其他按钮弹起

或是 保证某个页面的开启，其他页面关闭

如上图2所示层次结构，我们只需创建一个空物体，并添加一个 Toggle Group 组件(此时的空物体就相当于一个组)

将所有开关设为其子物体(不设置亦可实现功能，是为了规范！)

并将**每个开关组件中的 Group 属性**，设为空物体组 Toggle Group

**Toggle Group 组件所管控与其关联的所有子开关**

**当我们按下其中一个开关，其余的都会关闭**

**注意：**

**当我们点击 开关1 / Toggle1 的时候，其属性 isOn 为 true**

**当我们点击 开关2 / Toggle2 的时候，其属性 isOn 为 true ，但是开关1的 isOn 就是 false 了**

**当我们点击开关2的时候，不光是调用了开关2的回调函数，也调用了开关1的**

**所以在声明其按钮下的方法时要绑定动态函数**

**并在函数中加入判定 isOn 的条件为 true 如何， false 如何才严谨**

2、制作过程  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ2OTQ5_size_16_color_FFFFFF_t_70]

2.1、新建image，添加**toggleGroup**组件。  
2.2新建第一个Image，起名为tab1，添加toggle组件，Image设置为未选中的UI边框，并且添加上**toggle**组件，将上面**带有toggleGroup组件的物体拖到Group里面**。  
2.3，在tab1下面新建一个Image，拖到**tab1上Toggle里面的Graphic里面**  
2.4同样的方法，同2,3步，起名为tab2,tab3，**将2,3里面的toggle里面的ison取消勾选**；  
2.5新建panel1，里面添加一个button，同理，新建panel2,panel3；**将panel2，panel3隐藏**。  
2.6，在tab1上面设置**Onvaluechange**事件，同理，2,3上面也设置好。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ2OTQ5_size_16_color_FFFFFF_t_70 1]

2.7，结果，运行时候，可以来回切换3个选项卡

[https://blog.csdn.net/qq\_39646949/article/details/98631212][https_blog.csdn.net_qq_39646949_article_details_98631212]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ2OTQ5_size_16_color_FFFFFF_t_70]: /images/20221120/e90d6d8a532543f8bba2cfb77620c78e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ2OTQ5_size_16_color_FFFFFF_t_70 1]: /images/20221120/a24111bb95a4486d8fa35724b44923a5.png
[https_blog.csdn.net_qq_39646949_article_details_98631212]: https://blog.csdn.net/qq_39646949/article/details/98631212