uGUI练习(九) Toggle Button

本文为作者原创,转载请注明出处:https://www.cnblogs.com/zhaoqingqing/p/3974777.html



练习目标#

练习单选框,多选框

Toggle Group:Toggle容器

Toggle:单一的选项

练习步骤#

1、创建一个Panel,命名TogglePanel,添加Toggle Group组件,可以看到ToggleGroup面板十分的简洁,那看来Toggle触发的事件要在child下完成了.

image

TogglePanel属性面板#

2、在TogglePanel下创建两个Toggle,命名ToggleRed,ToggleBlue,默认创建的Toggle,是这样的

image

属性面板如下( 属性标注出了可以拦截的事件):

image

3、在步骤1说过,ToggleGroup并没有提供可设置的属性,所以触发事件要在Toggle下完成了,通过观察Toggle,发现了下面这个事件

image

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 运行

image

选择不同的Toggle,可以看到控制台Log

image

Toggle切换Panel效果#

下面使用Toggle来切换Panel,效果如下所示

Toggle Button

步骤#

1、继续上面的步骤,添加两个Panel,命名Red Panel ,Blue Panel,把这两个Panel叠在一起(位置和大小相同,颜色不同),隐藏其中一个

image

修改示例代码#

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

image

作者:赵青青   一名在【网易游戏】做游戏开发的程序员,擅长Unity3D,游戏开发,.NET等领域。
本文版权归作者和博客园共有,欢迎转载,转载之后请务必在文章明显位置标出原文链接和作者,谢谢。
如果本文对您有帮助,请点击【推荐】您的赞赏将鼓励我继续创作!想跟我一起进步么?那就【关注】我吧。
posted @   赵青青  阅读(21417)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
阅读排行:
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 易语言 —— 开山篇
· Trae初体验
历史上的今天:
2013-09-16 NGUI:HUD Text(头顶伤害漂浮文字)
点击右上角即可分享
微信分享提示
CONTENTS