任务19：IDE组件的学习.三

2023-12-12 11:10:16

文章目录

一、任务目标
二、任务分解

一、任务目标

截至目前为止，我们已经学习了LayaAir IDE中的大部分UI组件了，简单的用合集介绍，稍微复杂或者使用较多的都用单独的篇幅介绍了，本次任务就来学习剩下的IDE组件。

二、任务分解

2.1 Radio和RadioGroup

Radio按钮作为多选一按钮，单独出现时用途不是很广泛，只有成组的出现才能起到特定的作用，比如我们常见的游戏清晰度的调整，就是一个多选一按钮组实现的，他的作用就是你点击该组中的一个按钮时，选中它的同时会清除其他按钮的状态，即同时只能有一个按钮被选中。

Radio和CheckBox不同，Radio单独出现的时候，只要选中就不能改变状态，而CheckBox按钮每次点击都能改变其选中状态

RadioGroup常用属性介绍：

skin皮肤，和单个Radio皮肤相同，支持皮肤三态选择，根据相关规则可以自制替换
labels标签，有几个label就会使得RadioGroup组中有几个Radio，例如上图中labels属性值为：省电,流畅,均衡,高清,极致(这里标点是英文状态下)
spaceRadio之间的间隔
directionRadio排列方向，有水平和垂直两种
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选项卡也是一个非常常用的组件，用于实现控制多个不同面板的显示，例如游戏中常见的背包系统等。而且大多数属性和RadioGroup类似，因为继承自同一个类，很多东西都相同，所以可以类比学习。

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);
    }
}