三、ProgressBar 组件
ProgressBar（进度条）经常被用于在游戏中显示某个操作的进度，比如：游戏更新下载进度。
ProgressBar 属性
| 属性 | 功能说明 |
| Bar Sprite | 进度条渲染所需要的 Sprite 组件，可以通过拖拽一个带有 Sprite 组件的节点到该属性上来建立关联。 |
| Mode | 支持 HORIZONTAL（水平）、VERTICAL（垂直）和 FILLED（填充）三种模式，可以通过配合 reverse 属性来改变起始方向。 |
| Total Length | 当进度条为 100% 时 Bar Sprite 的总长度/总宽度。在 FILLED 模式下 Total Length 表示取 Bar Sprite 总显示范围的百分比，取值范围从 0 ~ 1。 |
| Progress | 浮点，取值范围是 0~1，不允许输入之外的数值。 |
| Reverse | 布尔值，默认的填充方向是从左至右/从下到上，开启后变成从右到左/从上到下。 |
在节点上添加 ProgressBar 组件，然后给该组件关联一个 Bar Sprite 就可以在场景中控制 Bar Sprite 来显示进度了。
Bar Sprite 可以是自身节点，子节点，或者任何一个带有 Sprite 组件的节点。
Bar Sprite 可以自由选择 Simple、Sliced 和 Filled 渲染模式。
进度条的模式选择 FILLED 的情况下，Bar Sprite 的 Type 也需要设置为 FILLED，否则会报警告。
四、Toggle 组件
Toggle 是一个 CheckBox， Toggle 继承自 Button，当它和 ToggleContainer 一起使用的时候，可以变成 RadioButton。
Toggle 属性
| 属性 | 功能说明 |
| isChecked | 布尔类型，如果这个设置为 true，则 check mark 组件会处于 enabled 状态，否则处于 disabled 状态。 |
| checkMark | Sprite 类型，Toggle 处于选中状态时显示的图片 |
| Check Events | 列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。详情见下方的 Toggle 事件 部分 |
Toggle 的事件回调有二个参数，第一个参数是 Toggle 本身，第二个参数是 customEventData。
添加事件回调的方法(一)：
import { _decorator, Component, Event, Node, ToggleComponent, EventHandler } from 'cc'; const { ccclass, property } = _decorator; @ccclass("test") export class example extends Component { onLoad(){ const checkEventHandler = new EventHandler(); checkEventHandler.target = this.node; //这个 node 节点是你的事件处理代码组件所属的节点 checkEventHandler.component = 'test'; //这个是脚本类名 checkEventHandler.handler = 'callback'; checkEventHandler.customEventData = 'data'; const toggle = this.node.getComponent(ToggleComponent); toggle.checkEvents.push(checkEventHandler); } callback(event: Event, customEventData: string){ //这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点 // 这里的 customEventData 参数就等于之前设置的 'data' } }
方法(二): 通过 toggle.node.on('toggle', ...) 的方式来添加。
注意这种方式注册的事件，无法传递 customEventData
import { _decorator, Component, ToggleComponent } from 'cc'; const { ccclass, property } = _decorator; @ccclass("test") export class test extends Component { @property(ToggleComponent) toggle: ToggleComponent | null = null; onLoad(){ this.toggle.node.on('toggle', this.callback, this); } callback(toggle: ToggleComponent){ // 回调的参数是 toggle 组件， } }
五、ToggleContainer 组件
ToggleContainer 不是一个可见的 UI 组件，它可以用来修改一组 Toggle 组件的行为。
当一组 Toggle 属于同一个 ToggleContainer 的时候，任何时候只能有一个 Toggle 处于选中状态。
1、ToggleContainer 属性
| 属性 | 功能说明 |
| AllowSwitchOff | 如果这个设置为 true，那么 toggle 按钮在被点击的时候可以反复地被选中和未选中。 |
| CheckEvents | 选中事件。列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。 |
2、ToggleContainer 事件回调
import { _decorator, Component, Event, Node, ToggleContainer, EventHandler } from 'cc'; const { ccclass, property } = _decorator; @ccclass("test") export class test extends Component { onLoad(){ const containerEventHandler = new EventHandler(); containerEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点 containerEventHandler.component = 'test';// 这个是脚本类名 containerEventHandler.handler = 'callback'; containerEventHandler.customEventData = 'data'; const container = this.node.getComponent(ToggleContainer); container.checkEvents.push(containerEventHandler); } callback(event: Event, customEventData: string) { // 这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点 // 这里的 customEventData 参数就等于之前设置的 'data' } }
3、ToggleContainer的使用案例：
（1）、在属性检查器中，为Toggle 的父节点添加 ToggleContainer 组件
（2）、在层级管理器中添加多个同级的Toggle 组件
=
此时，所有包含 Toggle 组件的节点都会自动被添加到ToggleContainer 容器中。
（3）、运行效果
六、Slider 组件
Slider 是一个滑动器组件，通常用于调节 UI 的数值（例如音量调节），它主要的部件是一个滑块按钮，该部件用于用户交互，通过该部件可进行调节 Slider 的数值大小。
Slider 属性
| 属性 | 功能说明 |
| handle | 滑块按钮部件，可以通过该按钮进行滑动调节 Slider 数值大小 |
| direction | 滑动器的方向，分为横向和竖向 |
| progress | 当前进度值，该数值的区间是 0-1 之间 |
| slideEvents | 滑动器组件事件回调函数 |
代码添加回调方法一：
构造一个EventHandler 对象，然后设置对应的 target、component、handler 和 customEventData 参数。
mport { _decorator, Component, Event, Node, Slider, EventHandler } from 'cc'; const { ccclass, property } = _decorator; @ccclass("SliderCtrl") export class SliderCtrl extends Component { onLoad () { const sliderEventHandler = new EventHandler(); // 这个 node 节点是事件处理脚本组件所属的节点 sliderEventHandler.target = this.node; // 这个是脚本类名 sliderEventHandler.component = 'SliderCtrl'; sliderEventHandler.handler = 'callback'; sliderEventHandler.customEventData = 'data'; const slider = this.node.getComponent(Slider); slider!.slideEvents.push(sliderEventHandler); } callback(slider: Slider, customEventData: string) { //这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点 // 这里的 customEventData 参数就等于之前设置的 'data' } }
代码添加回调方法二：
通过 slider.node.on('slide', ...) 的方式来添加，这种方式注册的事件，无法传递 customEventData。
import { _decorator, Component, Slider } from 'cc'; const { ccclass, property } = _decorator; @ccclass("SliderCtrl") export class SliderCtrl extends Component { @property(Slider) slider: Slider | null = null; onLoad () { this.slider!.node.on('slide', this.callback, this); } callback(slider: Slider) { } }
七、WebView 组件
WebView 是一种显示网页的组件，该组件让你可以在游戏里面集成一个小的浏览器，目前只支持 Web、iOS 和 Android 平台。
WebView 属性
| 属性 | 功能说明 |
| Url | 指定一个 URL 地址，这个地址以 http 或者 https 开头，请填写一个有效的 URL 地址。 |
| WebView Events | WebView 的回调事件，当 webview 在加载网页过程中，加载网页结束后或者加载网页出错时会调用此函数。 |
WebViewEvents 事件
| 属性 | 功能说明 |
| Target | 带有脚本组件的节点。 |
| Component | 脚本组件名称。 |
| Handler | 指定一个回调函数，当网页加载过程中、加载完成后或者加载出错时会被调用，该函数会传一个事件类型参数进来。 |
| CustomEventData | 用户指定任意的字符串作为事件回调的最后一个参数传入。 |
