简易虚拟培训系统-UI控件的应用5

目录

Toggle控件简介

示例-使用Toggle组实现主轴速度选择


本篇介绍UI控件Toggle,尝试一个小示例-使用单选框实现速度的选择控制。

Toggle控件简介

  1. Toggle的结构如下:最重要的Toggle组件挂在Toggle节点上,下面的Image组件用于显示单选框的背景和勾选的图片,Label上挂载的Text组件用于修改Toggle的显示文本

  1. Toggle组件的重要参数:最重要的就是"IsOn"参数,它是一个bool值,判断当前Toggle是否被勾选。
  1. Toggle组:当Toggle选项较多时,可以在所有Toggle节点之上建立一个ToggleGroup父节点,挂载ToggleGroup组件,当需要实现单选时,还可以勾选上AllowSwitchOff选项

还需要在每一个Toggle组件的Group变量中,载入父节点ToggleGroup

示例-使用Toggle组实现主轴速度选择

  1. 制作UI界面:在上一篇主轴控制的面板后加上速度选择的3个Toggle
  1. 修改上一篇主轴控制的代码mainAxisCtrl.cs
cs 复制代码
public class mainAxisCtrl : MonoBehaviour
{//主轴运动控制
    public float axisSpeed = 20;   //主轴的旋转速度
    public Slider onOffCtrlSlider; //开关Slider
    public GameObject mainAxis;    //载入主轴的节点
    public Toggle[] toggles;   //数组载入toggle组

    void Update()
    {
        if (onOffCtrlSlider.value == 1)
        {
            var speedIndex = 1;
            for (int i = 0; i < toggles.Length; i++)
            {//遍历toggles数组,检查哪一个被选中
                if (toggles[i].isOn)
                    speedIndex = i + 1; //得到当前速度的编号
            }
            mainAxis.transform.Rotate(speedIndex*axisSpeed*Time.deltaTime,0, 0);
        }
    }
}
  1. 将脚本挂在空节点Empty上,将新建的3个Toggle控件拖入Toggles数组中
  1. 运行结果
相关推荐
laowangpython5 小时前
Photoshop 2025 下载安装全攻略
其他·ui·photoshop
风华圆舞8 小时前
Flutter + 鸿蒙 Intents Kit:页面直达能力的完整接入方案
flutter·ui·华为·harmonyos
鲲穹AI超级员工8 小时前
多款实用配色工具汇总,适配设计、UI 创作等多元场景
ui·色彩设计
UXbot10 小时前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
叶帆10 小时前
【YFIOs】用C#开发硬件之设备上云
开发语言·unity·c#
烂白菜11 小时前
智码美形:华为云码道 × UI-UX-Pro-Max 高品质界面智能生成实践
ui·华为云·ux
久数君12 小时前
AI三维建模工具“造形家”:地理场景三维化的高效解决方案
unity·glb·ai算法·ai三维建模工具·地图框选·造形家·城市建筑模型
像风一样的男人@12 小时前
python --实现代理服务器
git·ui
风华圆舞13 小时前
鸿蒙 Flutter 页面怎么感知防窥状态并调整 UI 可见性
flutter·ui·harmonyos
UXbot1 天前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app