UI 组件 | Toggle
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的更多相关文章
- AngularJs的UI组件ui-Bootstrap分享(二)——Collapse
Collapse折叠控件使用uib-collapse指令 <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xml ...
- 工作流,WEB框架,UI组件网络收集整理
工作流,WEB框架,UI组件网络收集整理 在博客园上逛了好多年,随手收录了一些工作流,WEB开发框架,UI组件,现在整理一下与大家分享. 由于个人能力与精力有限,望各位园友在评论中补充,我将全部整理到 ...
- DCloud-MUI:文档 UI组件
ylbtech-DCloud-MUI:文档 UI组件 1.返回顶部 1.accordion(折叠面板) 折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下: <ul class=&qu ...
- 交互设计:隐藏或显示大段文本的UI组件有哪些?
应用场景: 在手机上要给列表中的每一项添加一个大段的介绍,应该用什么UI组件 A: 这里可以用,模态对话框,弹出提示,工具提示这类组件.模态对话框的好处,就是用关闭的按钮,用户操作方便:而弹出提示和工 ...
- Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)
Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...
- iOS之UI组件整理
作者:神兽gcc 授权本站转载. 最近把iOS里的UI组件重新整理了一遍,简单来看一下常用的组件以及它们的实现.其实现在这些组件都可以通过Storyboard很快的生成,只是要向这些组件能够变得生动起 ...
- Atitit.web ui 组件化 vs mvc
Atitit.web ui 组件化 vs mvc 组件化 与 mvc并不矛盾..单双方适用的地方有所不同.. React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定 ...
- 这是一个比较全的Android UI 组件
Android组件及UI框架大全 原文地址:http://blog.csdn.net/smallnest/article/details/38658593 Android 是目前最流行的移动操作系统 ...
- AngularJs的UI组件ui-Bootstrap分享(一)
最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...
随机推荐
- Kafka FAQ
报错如下: Unable to read additional data from client sessionid 0x15d2c867a770006 使用的kafka自带的zookeeper,测试 ...
- Linux文件权限设置教程
Linux的文件基本权限有9个,分别是owenr.group.others三种身份各自有自己的r.w和x,比如"rwxrwxrwx",就表示owener具有r.w.x权限,同样gr ...
- 算法学习笔记,几个简单的Demo
算法初学的一些心得 前言:现在工作也快一年多了,有时间下班回家会学学算法,陆陆续续也接触了一些 貌似我知道的就冒泡排序其他的都不是很了解 最近买了一本书,边学边记录吧! 一些常用的方法 暴力破解 下面 ...
- 洛谷P1033 自由落体 题解
题目链接:https://www.luogu.org/problemnew/show/P1033 呵呵,真的学好物理比较重要,前些年卡在这题上的我今天终于会做了,可恶的自由落体(也许是我太弱了吧 ) ...
- 题解 P5016 【龙虎斗】
首先祝各位大佬noip有个好成绩吧 当时比赛有个大数据,蒟蒻我暴力居然过了,好激动 这题一定要注意开long long (那个大数据就是我开long long才过的) 还有刚开始应设置答案为m(见解析 ...
- Storm之API简介
Storm之API简介 Component组件 1)基本接口 (1)IComponent接口 (2)ISpout接口 (3)IRichSpout接口 (4)IStateSpout接口 (5)IRich ...
- 查询表格——建立动态表格,使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来
建立动态表格,使用ajax将前台查询条件传给后台,并将查询结果以表格的形式展示出来. 页面的展示效果如下图所示: 第一步:查询条件的部分: 代码如下: <div class="text ...
- Python字符串格式化-学这些就够用了
一.思考❓❔ 1.什么是字符串格式化? 将变量(对象)的值填充到字符串中 在字符串中解析Python表达式 对字符串进行格式化显示 左对齐.右对齐.居中对齐 保留数字有效位数 2.你学过的字符串格式化 ...
- Java emoji持久化mysql
好久没有更新博客了,今天和大家分享一个关于emoji表情持久化问题,相信做web开发的都遇到过这样的问题,因为我们知道mysql的utf-8字符集保存不了保存不了表情字符,这是为什么呢?因为普通的字符 ...
- [ PyQt入门教程 ] Qt Designer工具的布局管理
这节课很重要..界面整洁美观与否就看布局了..这里讲布局方法,至于设计的天赋与最终界面的美感那就看造化了.. 本文主要讲述Qt Designer工具实现界面控件布局管理,就是排列组合控件.包括水平布局 ...