슬라이더 예제

슬라이더 예제는 Qt에서 사용할 수 있는 다양한 유형의 슬라이더를 사용하는 방법을 보여줍니다: QSlider, QScrollBar 및 QDial 을 참조하십시오.

Qt는 슬라이더와 유사한 세 가지 유형의 위젯을 제공합니다: QSlider, QScrollBar 과 QDial. 이들은 모두 QAbstractSlider 에서 대부분의 기능을 상속받으며, 이론적으로는 모양과 느낌의 차이만 있기 때문에 응용 프로그램에서 서로를 대체할 수 있습니다. 이 예제에서는 위젯의 모양, 작동 방식, 속성을 통해 동작과 모양을 조작하는 방법을 보여줍니다.

또한 이 예에서는 신호와 슬롯을 사용하여 두 개 이상의 위젯의 동작을 동기화하는 방법과 resizeEvent()를 재정의하여 반응형 레이아웃을 구현하는 방법도 보여줍니다.

슬라이더 예제 스크린샷

슬라이더 예제는 두 개의 클래스로 구성됩니다:

SlidersGroup 는 사용자 정의 위젯입니다. QSlider , QScrollBar 및 QDial 를 결합합니다.
Window 는 QGroupBox 와 SlidersGroup을 결합한 메인 위젯입니다. QGroupBox 에는 슬라이더와 같은 위젯의 동작을 제어하는 여러 위젯이 포함되어 있습니다.

먼저 Window 클래스를 살펴본 다음 SlidersGroup 클래스를 살펴보겠습니다.

창 클래스 정의

class Window : public QWidget
{
    Q_OBJECT

public:
    Window(QWidget *parent = nullptr);

private:
    void createControls(const QString &title);
    void resizeEvent(QResizeEvent *e);

    SlidersGroup *slidersGroup;

    QGroupBox *controlsGroup;
    QLabel *minimumLabel;
    QLabel *maximumLabel;
    QLabel *valueLabel;
    QCheckBox *invertedAppearance;
    QCheckBox *invertedKeyBindings;
    QSpinBox *minimumSpinBox;
    QSpinBox *maximumSpinBox;
    QSpinBox *valueSpinBox;
    QBoxLayout *layout;
};

Window 클래스는 QWidget 에서 상속합니다. 이 클래스는 슬라이더 위젯을 표시하고 사용자가 최소, 최대 및 현재 값을 설정하고 모양, 키 바인딩 및 방향을 사용자 정의할 수 있도록 합니다. 이러한 제어 메커니즘을 제공하는 위젯을 생성하고 슬라이더 위젯에 연결하기 위해 비공개 createControls() 함수를 사용합니다.

창 클래스 구현

Window::Window(QWidget *parent)
    : QWidget(parent)
{
    slidersGroup = new SlidersGroup(tr("Sliders"));

    createControls(tr("Controls"));

생성자에서 먼저 슬라이더 위젯을 표시하는 SlidersGroup 위젯을 생성합니다. createControls() 으로 제어 위젯을 생성하고 슬라이더에 연결합니다.

    layout = new QBoxLayout(QBoxLayout::LeftToRight);
    layout->addWidget(controlsGroup);
    layout->addWidget(slidersGroup);
    setLayout(layout);

    minimumSpinBox->setValue(0);
    maximumSpinBox->setValue(20);
    valueSpinBox->setValue(5);

    setWindowTitle(tr("Sliders"));
}

최소, 최대 및 현재 값을 초기화하기 전에 제어 위젯 그룹과 슬라이더를 가로 레이아웃에 배치합니다. 현재 값의 초기화는 valueSpinBox 위젯과 SlidersGroup 위젯 사이에 만든 연결을 통해 슬라이더 위젯으로 전파됩니다. 최소값과 최대값은 createControls() 으로 만든 연결을 통해 전파됩니다.

void Window::createControls(const QString &title)
{
    controlsGroup = new QGroupBox(title);

    minimumLabel = new QLabel(tr("Minimum value:"));
    maximumLabel = new QLabel(tr("Maximum value:"));
    valueLabel = new QLabel(tr("Current value:"));

    invertedAppearance = new QCheckBox(tr("Inverted appearance"));
    invertedKeyBindings = new QCheckBox(tr("Inverted key bindings"));

비공개 createControls() 함수에서는 QGroupBox (controlsGroup)가 제어 위젯을 표시하도록 합니다. 그룹 상자는 프레임, 제목, 키보드 단축키를 제공할 수 있으며, 그 안에 다양한 다른 위젯을 표시할 수 있습니다. 컨트롤 위젯 그룹은 두 개의 체크박스와 레이블이 있는 세 개의 스핀 박스로 구성됩니다.

레이블을 만든 후 두 개의 체크박스를 만듭니다. 체크박스는 일반적으로 애플리케이션에서 활성화 또는 비활성화할 수 있는 기능을 나타내는 데 사용됩니다. invertedAppearance 을 활성화하면 슬라이더 값이 반전됩니다. 아래 표는 다양한 슬라이더형 위젯의 모양을 보여줍니다:

	QSlider		QScrollBar		QDial
	정상	반전	정상	반전	정상	반전
Qt::Horizontal	왼쪽에서 오른쪽	오른쪽에서 왼쪽	왼쪽에서 오른쪽	오른쪽에서 왼쪽	시계 방향	시계 반대 방향
Qt::Vertical	아래에서 위로	위에서 아래로	위에서 아래로	아래에서 위로	시계 방향	시계 반대 방향

일반적으로 수직 QSlider 의 모양을 반전시키는 것이 일반적입니다. 예를 들어 볼륨을 제어하는 수직 슬라이더는 일반적으로 아래에서 위로 이동하지만(반전되지 않은 모양), 화면 좌표가 위에서 아래로 이동하기 때문에 화면에서 개체의 위치를 제어하는 수직 슬라이더는 위에서 아래로 이동할 수 있습니다.

invertedKeyBindings 옵션이 활성화되면( QAbstractSlider::invertedControls 속성에 해당) 슬라이더의 휠과 키 이벤트가 반전됩니다. 일반 키 바인딩에서는 마우스 휠을 "위로" 스크롤하거나 페이지 위로와 같은 키를 사용하면 슬라이더의 현재 값이 최대값으로 증가합니다. 반전된 경우 동일한 휠 및 키 이벤트는 슬라이더의 값을 최소값으로 이동시킵니다. 이 기능은 슬라이더의 모양이 반전된 경우에 유용할 수 있습니다: 어떤 사용자는 키가 여전히 값에 대해 동일한 방식으로 작동할 것으로 기대하는 반면, 다른 사용자는 PageUp 이 화면에서 "위"를 의미할 것으로 기대할 수 있습니다.

가로 및 세로 스크롤 막대의 경우 기본적으로 키 바인딩이 반전되어 PageDown 은 현재 값을 증가시키고 PageUp 은 감소시킵니다.

    minimumSpinBox = new QSpinBox;
    minimumSpinBox->setRange(-100, 100);
    minimumSpinBox->setSingleStep(1);

    maximumSpinBox = new QSpinBox;
    maximumSpinBox->setRange(-100, 100);
    maximumSpinBox->setSingleStep(1);

    valueSpinBox = new QSpinBox;
    valueSpinBox->setRange(-100, 100);
    valueSpinBox->setSingleStep(1);

QSpinBox 에서는 사용자가 위쪽 및 아래쪽 버튼을 클릭하거나 키보드의 Up 및 Down 키를 눌러 현재 표시된 값을 수정하여 값을 선택할 수 있습니다. 사용자가 직접 값을 입력할 수도 있습니다. 스핀 박스는 QSlider, QScrollBar, QDial 위젯의 최소, 최대 및 현재 값을 제어합니다.

    connect(slidersGroup, &SlidersGroup::valueChanged,
            valueSpinBox, &QSpinBox::setValue);
    connect(valueSpinBox, &QSpinBox::valueChanged,
            slidersGroup, &SlidersGroup::setValue);
    connect(minimumSpinBox, &QSpinBox::valueChanged,
            slidersGroup, &SlidersGroup::setMinimum);
    connect(maximumSpinBox, &QSpinBox::valueChanged,
            slidersGroup, &SlidersGroup::setMaximum);
    connect(invertedAppearance, &QCheckBox::toggled,
            slidersGroup, &SlidersGroup::invertAppearance);
    connect(invertedKeyBindings, &QCheckBox::toggled,
            slidersGroup, &SlidersGroup::invertKeyBindings);

    QGridLayout *controlsLayout = new QGridLayout;
    controlsLayout->addWidget(minimumLabel, 0, 0);
    controlsLayout->addWidget(maximumLabel, 1, 0);
    controlsLayout->addWidget(valueLabel, 2, 0);
    controlsLayout->addWidget(minimumSpinBox, 0, 1);
    controlsLayout->addWidget(maximumSpinBox, 1, 1);
    controlsLayout->addWidget(valueSpinBox, 2, 1);
    controlsLayout->addWidget(invertedAppearance, 0, 2);
    controlsLayout->addWidget(invertedKeyBindings, 1, 2);
    controlsGroup->setLayout(controlsLayout);

}

그런 다음 slidersGroup 과 valueSpinBox 을 서로 연결하여 슬라이더 위젯과 제어 위젯 중 하나의 현재 값이 변경되면 슬라이더 위젯과 제어 위젯이 동기화되어 작동하도록 합니다. valueChanged() 신호는 새 값을 인수로 하여 전송됩니다. setValue() 슬롯은 위젯의 현재 값을 새 값으로 설정하고 새 값이 이전 값과 다른 경우 valueChanged() 을 전송합니다.

제어 위젯과 슬라이더 위젯의 동작은 신호와 슬롯을 통해 동기화됩니다. 각 컨트롤 위젯을 슬라이더 위젯의 가로 및 세로 그룹에 모두 연결합니다. 또한 orientationCombo 을 QStackedWidget 에 연결하여 올바른 "페이지"가 표시되도록 합니다. 마지막으로 controlsGroup 그룹 상자 내의 QGridLayout 에 컨트롤 위젯을 배치합니다.

void Window::resizeEvent(QResizeEvent *)
{
    if (width() == 0 || height() == 0)
        return;

    const double aspectRatio = double(width()) / double(height());

    if (aspectRatio < 1.0) {
        layout->setDirection(QBoxLayout::TopToBottom);
        slidersGroup->setOrientation(Qt::Horizontal);
    } else if (aspectRatio > 1.0) {
        layout->setDirection(QBoxLayout::LeftToRight);
        slidersGroup->setOrientation(Qt::Vertical);
    }
}

마지막으로 QWidget 에서 resizeEvent()를 재정의합니다. 0으로 나누지 않도록 하고, 그렇지 않으면 위젯의 가로 세로 비율을 계산합니다. 창이 세로 형식인 경우 컨트롤 위젯과 슬라이더 그룹을 세로로 구성하도록 레이아웃을 설정하고 슬라이더의 방향을 가로로 지정합니다. 창이 가로 형식인 경우 슬라이더와 제어 위젯을 나란히 표시하도록 레이아웃을 변경하고 슬라이더의 방향을 세로로 지정합니다.

슬라이더 그룹 클래스 정의

class SlidersGroup : public QGroupBox
{
    Q_OBJECT

public:
    SlidersGroup(const QString &title, QWidget *parent = nullptr);

signals:
    void valueChanged(int value);

public slots:
    void setValue(int value);
    void setMinimum(int value);
    void setMaximum(int value);
    void invertAppearance(bool invert);
    void invertKeyBindings(bool invert);
    void setOrientation(Qt::Orientation orientation);

private:
    QSlider *slider;
    QScrollBar *scrollBar;
    QDial *dial;
    QBoxLayout *slidersLayout;
};

SlidersGroup 클래스는 QGroupBox 에서 상속합니다. 프레임과 제목을 제공하고 QSlider, QScrollBar 및 QDial 를 포함합니다.

valueChanged() 신호와 QAbstractSlider 및 QSpinBox 에 있는 것과 동일한 기능을 가진 공용 setValue() 슬롯을 제공합니다. 또한 최소 및 최대 값을 설정하고 슬라이더 위젯의 모양과 키 바인딩을 반전하고 방향을 설정하는 몇 가지 다른 공용 슬롯을 구현합니다.

SlidersGroup 클래스 구현

SlidersGroup::SlidersGroup(const QString &title, QWidget *parent)
    : QGroupBox(title, parent)
{
    slider = new QSlider;
    slider->setFocusPolicy(Qt::StrongFocus);
    slider->setTickPosition(QSlider::TicksBothSides);
    slider->setTickInterval(10);
    slider->setSingleStep(1);

    scrollBar = new QScrollBar;
    scrollBar->setFocusPolicy(Qt::StrongFocus);

    dial = new QDial;
    dial->setFocusPolicy(Qt::StrongFocus);

먼저 적절한 속성을 가진 슬라이더와 같은 위젯을 만듭니다. 특히 각 위젯에 대한 포커스 정책을 설정합니다. Qt::FocusPolicy 는 키보드 포커스 획득과 관련하여 위젯이 가질 수 있는 다양한 정책을 정의하는 열거형입니다. Qt::StrongFocus 정책은 위젯이 탭과 클릭 모두에서 포커스를 허용한다는 의미입니다.

    connect(slider, &QSlider::valueChanged, scrollBar, &QScrollBar::setValue);
    connect(scrollBar, &QScrollBar::valueChanged, dial, &QDial::setValue);
    connect(dial, &QDial::valueChanged, slider, &QSlider::setValue);
    connect(dial, &QDial::valueChanged, this, &SlidersGroup::valueChanged);

그런 다음 위젯을 서로 연결하여 위젯 중 하나의 현재 값이 변경될 때 동기화 상태를 유지하도록 합니다.

dial 의 valueChanged() 신호를 SlidersGroup 의 valueChanged() 신호에 연결하여 애플리케이션의 다른 위젯(즉, 제어 위젯)에 변경된 값을 알립니다.

    slidersLayout = new QBoxLayout(QBoxLayout::LeftToRight);
    slidersLayout->addWidget(slider);
    slidersLayout->addWidget(scrollBar);
    slidersLayout->addWidget(dial);
    setLayout(slidersLayout);
}

마지막으로 그룹 상자 내에 슬라이더 위젯의 레이아웃을 만듭니다. 슬라이더를 가로로 배열하는 것부터 시작합니다.

void SlidersGroup::setValue(int value)
{
    slider->setValue(value);
}

setValue() 슬롯은 QSlider 의 값을 설정합니다. 값이 변경되면 QSlider 가 valueChanged() 신호를 보내 도미노 효과를 유발하므로 QScrollBar 및 QDial 위젯에서 setValue() 를 명시적으로 호출할 필요는 없습니다.

void SlidersGroup::setMinimum(int value)
{
    slider->setMinimum(value);
    scrollBar->setMinimum(value);
    dial->setMinimum(value);
}

void SlidersGroup::setMaximum(int value)
{
    slider->setMaximum(value);
    scrollBar->setMaximum(value);
    dial->setMaximum(value);
}

setMinimum() 및 setMaximum() 슬롯은 Window 클래스에서 QSlider, QScrollBar, QDial 위젯의 범위를 설정하는 데 사용됩니다.

void SlidersGroup::invertAppearance(bool invert)
{
    slider->setInvertedAppearance(invert);
    scrollBar->setInvertedAppearance(invert);
    dial->setInvertedAppearance(invert);
}

void SlidersGroup::invertKeyBindings(bool invert)
{
    slider->setInvertedControls(invert);
    scrollBar->setInvertedControls(invert);
    dial->setInvertedControls(invert);
}

invertAppearance() 및 invertKeyBindings() 슬롯은 자식 위젯의 invertedAppearance 및 invertedControls 속성을 제어합니다.

void SlidersGroup::setOrientation(Qt::Orientation orientation)
{
    slidersLayout->setDirection(orientation == Qt::Horizontal
                                ? QBoxLayout::TopToBottom
                                : QBoxLayout::LeftToRight);
    scrollBar->setOrientation(orientation);
    slider->setOrientation(orientation);
}

setOrientation() 슬롯은 레이아웃의 방향과 슬라이더의 방향을 제어합니다. 가로 그룹에서 슬라이더는 가로 방향을 가지며 서로 위에 배치됩니다. 세로 그룹에서는 슬라이더가 세로 방향을 가지며 서로 나란히 배치됩니다.

예제 프로젝트 @ code.qt.io

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.