【CocosCreator】自定义Slider

目标：

        今天在开发过程中接到了一个新需求，是做一个用于调整音量的Slider，要求Slider的填充物；背景以及拖拽物都可以自定义修改。

        如图：

需要解决的问题：

        在系统提供的slider组件中，无法设置填充物，只能设置Handle（拖拽物）

方法：

        一开始想到的是比较硬性的方法：每次拖拽后，使用当前slider的数值，对填充物的图片进行横向的等比例缩放。后来发现了更简单的方法就是可以使用ProgressBar与Slider进行配合实现：

1. 在Slider的背景节点添加Slider与ProgressBar组件

        首先确认是背景节点：

        

        因为ProgressBar是一个可以修改填充物的组件，所以我们可以把UI显示与交互分成两个组件来实现，Slider用于接收用户手动拖拽的事件，Progress负责显示。

        

2. 分别设置填充物及拖拽物

        填充物→

        拖拽物→

3. 开启Slide Events 

        将Slide Events的数值改成1，并选中相关的节点与脚本。

4. 在脚本中编辑事件函数

        在每次Slider被拖拽时，把Slider的值赋值给进度条。

@ccclass('setting_view')
export class setting_view extends GameComponent {
    BGM_progressBar: Node = null;// 创建一个空节点用于找到ProgressBar
    start() {
       this.BGM_progressBar = this.node.getChildByName("BGM").getChildByName("BGM_slider").getChildByName("ProgressBar");
// 拿到ProgressBar
    }

    // 背景音乐滑动条发生改变时调用的函数
    // 在每次Slider发生改变时，拿到值，赋值给ProgressBar
    BGM_slider_handler(event: Slider) {
        // 这里加0.03是为了ui显示
        this.BGM_progressBar.getComponent(ProgressBar).progress = event.progress + 0.03;
    }
}

5. 在Slider的属性检查器中绑定事件函数

        点击设置即可