Toggle(复选框)组件

Toggle 是一个 CheckBox,当它和 ToggleGroup 一起使用的时候,可以变成 RadioButton。

创建 Toggle 组件

层级管理器右击->创建节点->创建 UI 节点->Toggle 即可创建 Toggle 组件。

节点说明

Toggle 组件的节点树一般为:

注:checkmark 在层级结构上要在 Background 上面,或者是 Background 的子节点。

 

属性介绍

创建成功后,属性面板可以看到 Toggle 组件特有的属性,下面对这些属性一一介绍:

属性 功能说明
Target Node 类型,当 Toggle 发生 Transition 的时候,会相应地修改 Target 节点的 SpriteFrame,颜色或者 Scale。
interactable 布尔类型,设为 false 时,则 Toggle 组件进入禁用状态。
Transition 枚举类型,包括 NONE, COLOR,SPRITE 和 SCALE。每种类型对应不同的 Transition 设置。详情见下方的 Toggle Transition 部分。
isChecked 布尔类型,如果这个设置为 true,则 check mark 组件会处于 enabled 状态,否则处于 disabled 状态。
checkMark cc.Sprite 类型,Toggle 处于选中状态时显示的图片。
toggleGroup cc.ToggleGroup 类型, Toggle 所属的 ToggleGroup,这个属性是可选的。如果这个属性为 null,则 Toggle 是一个 CheckBox,否则,Toggle 是一个 RadioButton。
Check Events 列表类型,默认为空,用户添加的每一个事件由节点引用,组件名称和一个响应函数组成。详情见下方的 Toggle 事件 部分。

Toggle Transition 部分

Toggle 的 Transition 用来指定当用户点击 Toggle 时的状态表现。目前主要有 NONE,COLOR,SPRITE 和 SCALE。

 

Color Transition

属性 功能说明
Normal Toggle 在 Normal 状态下的颜色。
Pressed Toggle 在 Pressed 状态下的颜色。
Hover Toggle 在 Hover 状态下的颜色。
Disabled Toggle 在 Disabled 状态下的颜色。
Duration Toggle 状态切换需要的时间间隔。

Sprite Transition

属性 功能说明
Normal Toggle 在 Normal 状态下的 SpriteFrame。
Pressed Toggle 在 Pressed 状态下的 SpriteFrame。
Hover Toggle 在 Hover 状态下的 SpriteFrame。
Disabled Toggle 在 Disabled 状态下的 SpriteFrame。

Scale Transition

属性 功能
Duration Toggle 状态切换需要的时间间隔。
ZoomScale 当用户点击按钮后,按钮会缩放到一个值,这个值等于 Toggle 原始 scale * zoomScale, zoomScale 可以为负数

Toggle 点击事件

Toggle 可以额外添加 Check 事件,用于响应玩家的点击操作。有以下两种方法。

通过属性检查器添加回调

序号 属性 功能说明
1 Target 带有脚本组件的节点。
2 Component 脚本组件名称。
3 Handler 指定一个回调函数,当用户点击 Toggle 时会触发此函数。
4 CustomEventData 用户指定任意的字符串作为事件回调的最后一个参数传入。

1.编写回调函数脚本:

 // toggle.js

cc.Class({
extends: cc.Component,

properties: {
},

// LIFE-CYCLE CALLBACKS:

// onLoad () {},

start() {

},

// update (dt) {},

// toggle 回调函数
cb_toggle(toggle, customEventData) {
if(toggle.isChecked){
console.log("Hello," + customEventData + "!");
}
}
});

2.编写好后将 toggle.js 挂在到 Toggle 节点下:

3.设置 Check Events 为 1,并将 Toggle 节点拖到带有 cc.node 的编辑框,后面分别选择对应的脚本和方法,CustomEventData 处输入要打印的字符串:

4.预览游戏,勾选 Toggle 发现控制台正常打印出刚才输入的字符串,取消勾选 Toggle 发现控制台没有打印任何内容,说明成功调用回调函数:

通过脚本添加回调

通过脚本添加回调有以下两种方式:

方法一:

这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,都是通过 Toggle 组件实现。首先需要构造一个 cc.Component.EventHandler 对象,然后设置好对应的 target、component、handler 和 customEventData 参数。

1.编写脚本如下:

 // toggle.js

cc.Class({
extends: cc.Component,

properties: {
},

// LIFE-CYCLE CALLBACKS:

onLoad() {
var checkEventHandler = new cc.Component.EventHandler();
checkEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
checkEventHandler.component = "toggle"
checkEventHandler.handler = "cb_toggle";
checkEventHandler.customEventData = "小明";

var toggle = this.node.getComponent(cc.Toggle);
toggle.checkEvents.push(checkEventHandler);
},

start() {

},

// update (dt) {},

// toggle 回调函数
cb_toggle(toggle, customEventData) {
// toggle 为 toggle 本身
if (toggle.isChecked) {
console.log("Hello," + customEventData + "!");
}
}
});

2.编写好后将 toggle.js 挂在到 Toggle 节点下,预览游戏,勾选 Toggle 发现控制台正常打印出刚才输入的字符串,取消勾选 Toggle 发现控制台没有打印任何内容,说明成功调用回调函数:

方法二:

通过 toggle.node.on('toggle', ...) 的方式来添加,这是一种非常简便的方式,但是该方式有一定的局限性,在事件回调里面无法获得当前点击按钮的屏幕坐标点,也无法传递 customEventData

1.编写脚本如下:

// toggle.js

cc.Class({
extends: cc.Component,

properties: {
},

// LIFE-CYCLE CALLBACKS:

onLoad() {
this.node.on('toggle', this.cb_toggle, this);
},

start() {

},

// update (dt) {},

// toggle 回调函数
cb_toggle(toggle) {
// toggle 为 toggle 本身
if (toggle.isChecked) {
console.log("Hello,小明!");
}
}
});

2.编写好后将 toggle.js 挂在到 Toggle 节点下,预览游戏,勾选 Toggle 发现控制台正常打印出刚才输入的字符串,取消勾选 Toggle 发现控制台没有打印任何内容,说明成功调用回调函数:

拓展:

除了默认的资源,还可以替换 Background 和 Checkmate 图片资源实现开关效果:


我是「Super于」,立志做一个每天都有正反馈的人!

UI 组件 | Toggle的更多相关文章

  1. AngularJs的UI组件ui-Bootstrap分享(二)——Collapse

    Collapse折叠控件使用uib-collapse指令 <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xml ...

  2. 工作流,WEB框架,UI组件网络收集整理

    工作流,WEB框架,UI组件网络收集整理 在博客园上逛了好多年,随手收录了一些工作流,WEB开发框架,UI组件,现在整理一下与大家分享. 由于个人能力与精力有限,望各位园友在评论中补充,我将全部整理到 ...

  3. DCloud-MUI:文档 UI组件

    ylbtech-DCloud-MUI:文档 UI组件 1.返回顶部 1.accordion(折叠面板) 折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下: <ul class=&qu ...

  4. 交互设计:隐藏或显示大段文本的UI组件有哪些?

    应用场景: 在手机上要给列表中的每一项添加一个大段的介绍,应该用什么UI组件 A: 这里可以用,模态对话框,弹出提示,工具提示这类组件.模态对话框的好处,就是用关闭的按钮,用户操作方便:而弹出提示和工 ...

  5. Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)

    Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...

  6. iOS之UI组件整理

    作者:神兽gcc 授权本站转载. 最近把iOS里的UI组件重新整理了一遍,简单来看一下常用的组件以及它们的实现.其实现在这些组件都可以通过Storyboard很快的生成,只是要向这些组件能够变得生动起 ...

  7. Atitit.web ui  组件化 vs  mvc

    Atitit.web ui  组件化 vs  mvc   组件化  与 mvc并不矛盾..单双方适用的地方有所不同.. React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定 ...

  8. 这是一个比较全的Android UI 组件

     Android组件及UI框架大全 原文地址:http://blog.csdn.net/smallnest/article/details/38658593 Android 是目前最流行的移动操作系统 ...

  9. AngularJs的UI组件ui-Bootstrap分享(一)

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

随机推荐

  1. Kafka FAQ

    报错如下: Unable to read additional data from client sessionid 0x15d2c867a770006 使用的kafka自带的zookeeper,测试 ...

  2. Linux文件权限设置教程

    Linux的文件基本权限有9个,分别是owenr.group.others三种身份各自有自己的r.w和x,比如"rwxrwxrwx",就表示owener具有r.w.x权限,同样gr ...

  3. 算法学习笔记,几个简单的Demo

    算法初学的一些心得 前言:现在工作也快一年多了,有时间下班回家会学学算法,陆陆续续也接触了一些 貌似我知道的就冒泡排序其他的都不是很了解 最近买了一本书,边学边记录吧! 一些常用的方法 暴力破解 下面 ...

  4. 洛谷P1033 自由落体 题解

    题目链接:https://www.luogu.org/problemnew/show/P1033 呵呵,真的学好物理比较重要,前些年卡在这题上的我今天终于会做了,可恶的自由落体(也许是我太弱了吧 ) ...

  5. 题解 P5016 【龙虎斗】

    首先祝各位大佬noip有个好成绩吧 当时比赛有个大数据,蒟蒻我暴力居然过了,好激动 这题一定要注意开long long (那个大数据就是我开long long才过的) 还有刚开始应设置答案为m(见解析 ...

  6. Storm之API简介

    Storm之API简介 Component组件 1)基本接口 (1)IComponent接口 (2)ISpout接口 (3)IRichSpout接口 (4)IStateSpout接口 (5)IRich ...

  7. 查询表格——建立动态表格,使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来

    建立动态表格,使用ajax将前台查询条件传给后台,并将查询结果以表格的形式展示出来. 页面的展示效果如下图所示: 第一步:查询条件的部分: 代码如下: <div class="text ...

  8. Python字符串格式化-学这些就够用了

    一.思考❓❔ 1.什么是字符串格式化? 将变量(对象)的值填充到字符串中 在字符串中解析Python表达式 对字符串进行格式化显示 左对齐.右对齐.居中对齐 保留数字有效位数 2.你学过的字符串格式化 ...

  9. Java emoji持久化mysql

    好久没有更新博客了,今天和大家分享一个关于emoji表情持久化问题,相信做web开发的都遇到过这样的问题,因为我们知道mysql的utf-8字符集保存不了保存不了表情字符,这是为什么呢?因为普通的字符 ...

  10. [ PyQt入门教程 ] Qt Designer工具的布局管理

    这节课很重要..界面整洁美观与否就看布局了..这里讲布局方法,至于设计的天赋与最终界面的美感那就看造化了.. 本文主要讲述Qt Designer工具实现界面控件布局管理,就是排列组合控件.包括水平布局 ...