任务15：IDE组件的学习.二_laya hsilder-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_56811106/article/details/120261117

文章目录

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

一、任务目标

接着之前的一中学习其余的组件。

IDE组件的学习：https://blog.youkuaiyun.com/m0_56811106/article/details/120210308

二、任务分解

2.1 ComboBox组件

该组件是一个下拉菜单的UI组件，在IDE中提供了非常丰富的属性供我们使用，基本可以满足所以关于下拉菜单的效果要求。
在这里插入图片描述

组件的属性分为按钮标签和下拉菜单标签，从前缀上来说，一般带有label的属于按钮标签，带有item的属于下拉菜单标签
labels下拉菜单中标签的值，中间用逗号隔开
labelFont标签字体
labelSize和itemSize前者是上图中按钮字体的大小，后者是下拉菜单字体大小
labelColors有关按钮上标签不同状态下的颜色设置，默认，鼠标移入，鼠标点击或释放三个状态
itemColors有关下拉菜单鼠标移动时状态的颜色选择
visibleNum下拉菜单最大可显示的标签数目，超过标签不显示，这时候需要加一个scrollBar来支持菜单的滚动，comboBox组件自身就带一个scrollBar组件，我们只需要指定scrollBar组件的皮肤即可使用
我们采用一个小示例进行演示：获取下拉菜单的索引值和内容

export default class comboBox_getIndex extends Laya.ComboBox {

   constructor() {
       super();
       /** 利用Handler来操作 */
       this.selectHandler = Laya.Handler.create(this,this.selectFunction,null,false);
   }

   private selectFunction(index: number): void {
        /**selectHandler当下拉菜单选项发生变化时触发的事件处理类，默认返回参数index，我们用index接受一下 */
        console.log(index);
        /**获取当前index和label值 */
        console.log(this.selectedIndex);
        console.log(this.selectedLabel);
   }

}

将其拖到runtime属性上，然后运行查看结果：
在这里插入图片描述
结果正确，返回的index也符合预期。

2.2 HBox和VBox

HBox和VBox是水平和垂直布局容器类，为了统一布局某个方向上的多个组件，我们可以将其放入HBox或VBox容器下，通过IDE中的属性来控制子组件之间的间距，对齐方式等。

需要注意的是，水平容器只能调整垂直方向的布局，水平方向的只能通过代码控制，垂直容器则相反

如图所示，左边两个Button放在HBox中，所以在水平位置不能拖动，只能通过space属性来控制，但是在垂直方向我们可以自由拖动修改布局；右边则相反，因为放在VBox中
space控制子组件之间的间距
align子组件之间的布局方式，LayaAir提供了四种，nono，top，middle，bottom，如果想像上图那样自己随意调整，只能将其设置为nono，另外三种分别为居顶部对齐，居中对齐，居底部对齐

2.3 HSlider和VSlider

Slider是LayaAir提供的滑条组件，我们可以用它显示当前进度，默认皮肤效果如图所示，滑动时在滑块上方会显示当前滑动的刻度值，由于该刻度值不能修改字体，和字体大小，所有一般不会使用这个。具体参数介绍如下：
在这里插入图片描述

max和min控制滑块最大可滑动位置和最小可滑动位置
showLabel布尔值，控制是否显示标签，即如图上红色框内容
tick滑动的刻度值，即滑动进度值的精确程度
allowClickBack点击进度条快速跳转到目标处，设为false则只能通过点击滑块调整进度
案例：获取当前滑块的进度

export default class hSilder_comp extends Laya.Script {

    /** @prop {name:text,tips:"text",type:Node,default=null} */
    text: Laya.Text;
    /** @prop {name:hSilder,tips:"HSilder",type:Node,default=null} */
    hSilder: Laya.HSlider;

    constructor() { 
        super(); 
        Laya.stage.bgColor = "#ffff00";
    }

    onAwake() {
        this.hSilder.changeHandler = Laya.Handler.create(this,(value: string)=>{
            this.text.text = value;
        },null,false);
    }

}