文章目录
一、任务目标
截至目前为止,我们已经学习了LayaAir IDE中的大部分UI组件了,简单的用合集介绍,稍微复杂或者使用较多的都用单独的篇幅介绍了,本次任务就来学习剩下的IDE组件。
二、任务分解
2.1 Radio和RadioGroup
Radio和CheckBox不同,Radio单独出现的时候,只要选中就不能改变状态,而CheckBox按钮每次点击都能改变其选中状态
RadioGroup常用属性介绍:
skin
皮肤,和单个Radio皮肤相同,支持皮肤三态选择,根据相关规则可以自制替换labels
标签,有几个label就会使得RadioGroup组中有几个Radio,例如上图中labels属性值为:省电,流畅,均衡,高清,极致
(这里标点是英文状态下)space
Radio之间的间隔direction
Radio排列方向,有水平和垂直两种selectedindex
默认选择的按钮索引,例如上图中默认选中均衡
,所以该属性为2,索引从0开始,如果为-1
则开始运行时默认谁都不选中labelPadding
上下左右间距,该组件没有让label居中的功能,所以我们通过调整该属性达到居中的效果,如上图所示
代码获取当前选中Radio的索引值
export default class RadioGroup extends Laya.Script {
/** @prop {name:radioGroup,tips:"radioGroup",type:Node,default=null} */
radioGroup: Laya.RadioGroup;
constructor() { super(); }
onAwake() {
this.radioGroup.selectHandler = Laya.Handler.create(this,(index: number)=>{
console.log(index)
},null,false);
}
}
效果如下:
- 可以看到控制台打印索引值
- 单个Radio一旦按下后就再也回不到非选中状态了
2.2 Tab选项卡
Tab常用属性介绍:
skin
,labels
,space
,direction
,selectedindex
,labelPadding
属性和RadioGroup类似,详细可以参考上述或者api文档- 这里实现效果的时候搭配了Panel面板组件,该组件较为简单,可以和其他组件那样学习,特别的该组件可以配置scrollBar,这样就可以直接实现滚动
代码实现不同页面的切换
export default class Tab extends Laya.Script {
/** @prop {name:tab,tips:"tab",type:Node,default=null} */
tab: Laya.Tab;
/** @prop {name:panelOne,tips:"panel1",type:Node,default=null} */
panelOne: Laya.Panel;
/** @prop {name:panelTwo,tips:"panel2",type:Node,default=null} */
panelTwo: Laya.Panel;
/** @prop {name:panelThree,tips:"panel3",type:Node,default=null} */
panelThree: Laya.Panel;
constructor() { super(); }
onAwake() {
/**设置隐藏滚动条 */
this.panelOne.vScrollBar.hide = true;
/**根据Tab切换不同的面板 */
this.tab.selectHandler = Laya.Handler.create(this,(index: number)=>{
this.panelOne.visible = false;
this.panelTwo.visible = false;
this.panelThree.visible = false;
if(index == 0){
this.panelOne.visible = true;
}else if(index == 1){
this.panelTwo.visible = true;
}else{
this.panelThree.visible = true;
}
},null,false);
}
}
效果如下:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。