uGUI练习(九) Toggle Button
本文为作者原创,转载请注明出处:https://www.cnblogs.com/zhaoqingqing/p/3974777.html
练习目标#
练习单选框,多选框
Toggle Group:Toggle容器
Toggle:单一的选项
练习步骤#
1、创建一个Panel,命名TogglePanel,添加Toggle Group组件,可以看到ToggleGroup面板十分的简洁,那看来Toggle触发的事件要在child下完成了.
TogglePanel属性面板#
2、在TogglePanel下创建两个Toggle,命名ToggleRed,ToggleBlue,默认创建的Toggle,是这样的
属性面板如下( 属性标注出了可以拦截的事件):
3、在步骤1说过,ToggleGroup并没有提供可设置的属性,所以触发事件要在Toggle下完成了,通过观察Toggle,发现了下面这个事件
Toggle事件示例#
4、所以需要我们自己写脚本,来处理Toggle事件啦,创建ToggleScene.cs 绑定在TogglePanel上,
using UnityEngine; using System.Collections; using UnityEngine.UI; public class ToggleScene : MonoBehaviour { public Toggle toggle1; void Start() { toggle1.onValueChanged.AddListener(OnValueChanged); } void OnValueChanged(bool check) { Debug.Log(check); } }
单选框效果#
把Toggle1赋给脚本中的toggle1,Ctrl+P 运行
选择不同的Toggle,可以看到控制台Log
Toggle切换Panel效果#
下面使用Toggle来切换Panel,效果如下所示
步骤#
1、继续上面的步骤,添加两个Panel,命名Red Panel ,Blue Panel,把这两个Panel叠在一起(位置和大小相同,颜色不同),隐藏其中一个
修改示例代码#
2、修改ToggleScene.cs
using UnityEngine; using UnityEngine.UI; public class ToggleScene : MonoBehaviour { [SerializeField] private GameObject bluePanel, redPanel; [SerializeField] private Toggle toggleRed, toggleBlue; void Start() { toggleRed.onValueChanged.AddListener(OnValChangedRed); toggleBlue.onValueChanged.AddListener(OnValChangedBlue); } void OnValChangedRed(bool check) { bluePanel.SetActive(!check); redPanel.SetActive(check); } void OnValChangedBlue(bool check) { bluePanel.SetActive(check); redPanel.SetActive(!check); } }
3、把ToggleScene绑定在 Toggle Panel上,并赋好值,按Ctrl+P 运行,即可切换Panel
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 易语言 —— 开山篇
· Trae初体验
2013-09-16 NGUI:HUD Text(头顶伤害漂浮文字)