LOFTER-网易轻博

开关颜色切换可以通过完成以下两部分来实现：

一、UI界面绘制

二、Toggle设置

一、UI界面绘制

1.背景：

系统Panel元素做背景：

右键Hierarchy空白处——>Create——>UI——>Panel

2.红、绿、黄三个切换开关及效果颜色图片绘制：

系统Toggle元素做切换开关，Image做效果颜色图片：

红色：

1）右键Panel——>Create——>UI——>Toggle

2）更改Toggle元素的子元素Label的Text组件的Text为：红色

3）更改Toggle元素的RectTransform组件的Width为350，Height为100

4）更改Toggle元素的子元素Label的Text组件的FontSize为：80

5）更改Toggle元素的子元素Background的RectTransform组件的Width为100，Height为100

6）更改Toggle元素的子元素Background的Image组件的SourceImage为InoutFieldBackground，Color为红色

7）更改Toggle元素的子元素Background的子元素Checkmark的RectTransform组件的Width为100，Height为100

8）用移动工具将Toggle元素挪到合适位置

9）右键Panel——>Create——>UI——>Image

10）更改Image元素的RectTransform组件的Width为300，Height为300

11）更改Image元素的Image组件的Color为红

12）将Image元素用移动工具挪到合适位置

绿色：

1）选中实现红色切换开关的Toggle,Image。Ctrl+D复制

2）将复制的Toggle用移动工具向下挪到合适位置

3）更改Toggle元素的子元素Background的Image组件的Color为绿色

4）更改Toggle元素的子元素Label的Text组件的Text为：绿色

5）更改Image元素的Image组件的Color为绿

6）点Image元素Inspector面板下的对勾来隐藏绿色图片

黄色：

1）选中实现绿色切换开关的Toggle,Image。Ctrl+D复制

2）将复制的Toggle用移动工具向下挪到合适位置

3）更改Toggle元素的子元素Background的Image组件的Color为黄色

4）更改Toggle元素的子元素Label的Text组件的Text为：黄色

5）更改Image元素的Image组件的Color为黄

6）点Image元素Inspector面板下的对勾来隐藏黄色图片

二、Toggle设置

1）选中红绿黄Toggle的共同父元素Panel—>AddComponent—>ToggleGroup

2）分别设置红绿黄Toggle的Toggle组件的Group为Panel

3）分别点红绿黄Toggle的Toggle组件的On Value Changed(Boolean)的+，来增加事件

4）分别拖入红绿黄Toggle对应的Image到空位置None

5）设置触发事件为GameObject.SetActive