JUCE学习笔记03-Slider、Listener、Label类

JUCE学习笔记03——Slider、Listener、Label类

知识点：

1、Slider类更多使用
2、Label类基础
3、Listener基础

目标：

Slider类绘制带标签的滑块，并通过Listener响应不同Slider的数值变化

内容：

一、创建GUI内容

创建Slider对象（旋钮），添加至组件

private:
	Slider panDial;

MainComponent::MainComponent()
{
    setSize (600, 400);//窗口大小
	addAndMakeVisible(panDial);
}

设置panDial的滑块样式为旋钮、值为0-127（默认64）、文本框位置及后缀文本

panDial.setSliderStyle(Slider::SliderStyle::Rotary);  //设置Slider样式为旋钮
panDial.setRange(-63, 64, 1);//设置值范围（以声像为例，设置0-127）
panDial.setValue(0, NotificationType::dontSendNotification);//设置默认声像为中心
panDial.setTextBoxStyle(Slider::TextBoxBelow,true,50,20);	//设置旋钮文本框位置
panDial.setTextValueSuffix("C");  //文本框后缀文本

设置旋钮Slider的位置

void MainComponent::resized()
{
	panDial.setBounds(20,20,260,150);   //旋钮位置
}

运行效果：

创建另一个Slider对象（滑块），添加至组件、设置值范围

 Slider panSlider;//滑块
    Slider panDial; //旋钮

addAndMakeVisible(panSlider);	//添加Slider对象，默认为滑块
panSlider.setRange(-63, 64, 1);	//设置滑块值范围
panSlider.setValue(0, NotificationType::dontSendNotification);//设置默认值
panSlider.setTextBoxStyle(Slider::NoTextBox,true,0,0);//不显示文本框

创建Label对象，设置标签文本并添加至滑块

Label panLabel;

panLabel.setText("Pan", NotificationType::dontSendNotification);//标签文本
panLabel.attachToComponent(&panSlider, true);//附加到滑块

设置滑块位置

void MainComponent::resized()
{
	panDial.setBounds(20,20,260,150);//旋钮位置
	panSlider.setBounds(80, 180, 140, 30);//滑块位置
}

运行效果：

二、使用Listener类（抽象）实现不同Slider的关联

添加父类 Slider::Listener

 class MainComponent   : public Component,
    	                    public Slider::Listener  

实现Listener类中的sliderValueChanged()方法

//.h文件
void sliderValueChanged(Slider* slider) override;

    //.cpp文件
void MainComponent::sliderValueChanged(Slider * slider)

{
	//关联不同Slider之间的值
	if (slider == &panDial)
	{
		panSlider.setValue(panDial.getValue());		
	}
	else if (slider == &panSlider)
	{
		panDial.setValue(panSlider.getValue());
	}
	
	//声像值改变时变更后缀
	if (panDial.getValue() == 0)
		panDial.setTextValueSuffix(" C");
	else if (panDial.getValue() < 0)
		panDial.setTextValueSuffix(" L");
	else if (panDial.getValue() > 0)
		panDial.setTextValueSuffix(" R");
}

添加listener到组件用于监听滑块与旋钮值的变化

panDial.addListener(this);
panSlider.addListener(this);

完整代码：

//MainComponent.h
#pragma once

#include "../JuceLibraryCode/JuceHeader.h"
*/
class MainComponent   : public Component,
	                    public Slider::Listener
{
public:
    //==============================================================================
    MainComponent();
    ~MainComponent();

    //==============================================================================
    void paint (Graphics&) override;
    void resized() override;
	void sliderValueChanged(Slider* slider) override;

private:

	Slider panSlider;
	Slider panDial;
	Label panLabel;


    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};

    //MainComponent.cpp
    #include "MainComponent.h"
    
    //==============================================================================
    MainComponent::MainComponent()
    {
        setSize (600, 400);
    	
    	addAndMakeVisible(panDial);		
    	panDial.setSliderStyle(Slider::SliderStyle::Rotary);  //设置Slider样式为旋钮
    	panDial.setRange(-63, 64, 1);	//设置值范围（以声像为例，设置0-127）
    	panDial.setValue(0, NotificationType::dontSendNotification);	//设置默认声像为中心
    	panDial.setTextBoxStyle(Slider::TextBoxBelow,true,50,20);		//设置旋钮文本框位置
    	panDial.setTextValueSuffix(" C");
    
    	addAndMakeVisible(panSlider);	//添加Slider对象，默认为滑块
    	panSlider.setRange(-63, 64, 1);	//设置滑块值范围
    	panSlider.setValue(0, NotificationType::dontSendNotification);
    	panSlider.setTextBoxStyle(Slider::NoTextBox,true,0,0);
    	panLabel.setText("Pan", NotificationType::dontSendNotification);
    	panLabel.attachToComponent(&panSlider, true);
    
    	panDial.addListener(this);
    	panSlider.addListener(this);
    }
    
    MainComponent::~MainComponent()
    {
    }
    
    //==============================================================================
    void MainComponent::paint (Graphics& g)
    {
    	
    }
    
    void MainComponent::resized()
    {
    	panDial.setBounds(20,20,260,150);	//旋钮位置
    	panSlider.setBounds(80, 180, 140, 30);//滑块位置
    }
    
    void MainComponent::sliderValueChanged(Slider * slider)
    {
    	//关联不同Slider之间的值
    	if (slider == &panDial)
    	{
    		panSlider.setValue(panDial.getValue());		
    	}
    	else if (slider == &panSlider)
    	{
    		panDial.setValue(panSlider.getValue());
    	}
    	
    	//声像值改变时变更后缀
    	if (panDial.getValue() == 0)
    		panDial.setTextValueSuffix(" C");
    	else if (panDial.getValue() < 0)
    		panDial.setTextValueSuffix(" L");
    	else if (panDial.getValue() > 0)
    		panDial.setTextValueSuffix(" R");
    }