Ejemplo de deslizadores

Qt proporciona tres tipos de widgets de tipo deslizador: QSlider, QScrollBar y QDial. Todos ellos heredan la mayor parte de su funcionalidad de QAbstractSlider, y en teoría pueden sustituirse unos a otros en una aplicación ya que las diferencias sólo afectan a su aspecto. Este ejemplo muestra qué aspecto tienen, cómo funcionan y cómo se puede manipular su comportamiento y apariencia a través de sus propiedades.

El ejemplo también demuestra cómo las señales y las ranuras se pueden utilizar para sincronizar el comportamiento de dos o más widgets, y cómo anular resizeEvent() para implementar un diseño responsivo.

Captura de pantalla del ejemplo Sliders

El ejemplo Sliders consta de dos clases:

• SlidersGroup es un widget personalizado. Combina un QSlider, un QScrollBar y un QDial.
• Window es el widget principal que combina un QGroupBox y un SlidersGroup. QGroupBox contiene varios widgets que controlan el comportamiento de los widgets tipo deslizador.

Primero revisaremos la clase Window, luego echaremos un vistazo a la clase SlidersGroup.

Definición de la clase Window

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

La clase Window hereda de QWidget. Muestra los widgets deslizantes y permite al usuario establecer sus valores mínimo, máximo y actual, así como personalizar su apariencia, vinculación de teclas y orientación. Utilizamos una función privada createControls() para crear los widgets que proporcionan estos mecanismos de control y para conectarlos a los widgets deslizantes.

Implementación de la clase Window

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

    createControls(tr("Controls"));

En el constructor creamos primero el widget SlidersGroup que muestra los widgets deslizantes. Con createControls() creamos los widgets de control, y los conectamos a los deslizadores.

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

Ponemos los grupos de widgets de control y los deslizadores en una disposición horizontal antes de inicializar los valores mínimo, máximo y actual. La inicialización del valor actual se propagará a los widgets deslizadores a través de la conexión que hicimos entre valueSpinBox y los widgets SlidersGroup. Los valores mínimo y máximo se propagan a través de las conexiones que creamos con 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"));

En la función privada createControls(), dejamos que un QGroupBox (controlsGroup) muestre los widgets de control. Un cuadro de grupo puede proporcionar un marco, un título y un atajo de teclado, y muestra varios otros widgets dentro de sí mismo. El grupo de widgets de control está compuesto por dos casillas de verificación, y tres casillas giratorias con etiquetas.

Después de crear las etiquetas, creamos las dos casillas de verificación. Las casillas de verificación se utilizan normalmente para representar características de una aplicación que pueden activarse o desactivarse. Cuando invertedAppearance está habilitado, los valores del deslizador se invierten. La siguiente tabla muestra la apariencia de los diferentes widgets deslizantes:

Es habitual invertir la apariencia de un deslizador vertical QSlider. Un deslizador vertical que controla el volumen, por ejemplo, normalmente irá de abajo a arriba (la apariencia no invertida), mientras que un deslizador vertical que controla la posición de un objeto en pantalla podría ir de arriba a abajo, porque las coordenadas de pantalla van de arriba a abajo.

Cuando la opción invertedKeyBindings está activada (correspondiente a la propiedad QAbstractSlider::invertedControls ), los eventos de rueda y tecla del deslizador se invierten. Las combinaciones de teclas normales significan que al desplazar la rueda del ratón "hacia arriba" o utilizar teclas como avanzar página se incrementará el valor actual del deslizador hacia su máximo. Invertidos, los mismos eventos de rueda y tecla moverán el valor hacia el mínimo del deslizador. Esto puede ser útil si la apariencia de un deslizador está invertida: Algunos usuarios pueden esperar que las teclas sigan funcionando de la misma manera sobre el valor, mientras que otros pueden esperar que PageUp signifique "arriba" en la pantalla.

Ten en cuenta que para las barras de desplazamiento horizontal y vertical, las combinaciones de teclas están invertidas por defecto: PageDown aumenta el valor actual, y PageUp lo disminuye.

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

A continuación, creamos los cuadros de desplazamiento. QSpinBox permite al usuario elegir un valor haciendo clic en los botones arriba y abajo o pulsando las teclas Up y Down del teclado para modificar el valor que se muestra en ese momento. El usuario también puede introducir el valor manualmente. Los cuadros giratorios controlan los valores mínimo, máximo y actual de los widgets QSlider, QScrollBar y 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);

}

A continuación, conectamos el slidersGroup y el valueSpinBox entre sí, para que los widgets deslizantes y el widget de control se comporten de forma sincronizada cuando cambie el valor actual de uno de ellos. La señal valueChanged() se emite con el nuevo valor como argumento. La ranura setValue() establece el valor actual del widget al nuevo valor, y emite valueChanged() si el nuevo valor es diferente del anterior.

Sincronizamos el comportamiento de los widgets de control y los widgets deslizantes a través de sus señales y ranuras. Conectamos cada widget de control al grupo horizontal y vertical de widgets deslizantes. También conectamos orientationCombo a QStackedWidget, para que se muestre la "página" correcta. Por último, colocamos los widgets de control en un QGridLayout dentro del cuadro de grupo controlsGroup.

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

Por último, anulamos resizeEvent() de QWidget. Evitamos dividir por cero, y por otra parte calculamos la relación de aspecto del widget. Si la ventana tiene un formato vertical, entonces configuramos el diseño para organizar los grupos de widgets de control y deslizadores verticalmente, y damos a los deslizadores una orientación horizontal. Si la ventana tiene un formato horizontal, entonces cambiamos el diseño para mostrar los deslizadores y los widgets de control uno al lado del otro, y damos a los deslizadores una orientación vertical.

Definición de la Clase SlidersGroup

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

La clase SlidersGroup hereda de QGroupBox. Proporciona un marco y un título, y contiene un QSlider, un QScrollBar y un QDial.

Proporcionamos una señal valueChanged() y una ranura pública setValue() con funcionalidad equivalente a las de QAbstractSlider y QSpinBox. Además, implementamos otras ranuras públicas para establecer el valor mínimo y máximo, e invertir la apariencia de los widgets deslizantes, así como los enlaces de las teclas, y establecer la orientación.

Implementación de la clase 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);

Primero creamos los widgets deslizantes con las propiedades apropiadas. En particular, establecemos la política de enfoque para cada widget. Qt::FocusPolicy es un tipo enum que define las distintas políticas que puede tener un widget con respecto a la adquisición del enfoque del teclado. La política Qt::StrongFocus significa que el widget acepta el foco tanto por tabulación como por clic.

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

A continuación conectamos los widgets entre sí, para que permanezcan sincronizados cuando cambie el valor actual de uno de ellos.

Conectamos la señal dial's valueChanged() a la señal SlidersGroup's valueChanged(), para notificar a los otros widgets de la aplicación (es decir, los widgets de control) el cambio de valor.

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

Por último, creamos la disposición de los widgets deslizantes dentro de la caja de grupo. Comenzamos con una disposición horizontal de los deslizadores.

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

La ranura setValue() establece el valor de QSlider. No necesitamos llamar explícitamente a setValue() en los widgets QScrollBar y QDial, ya que QSlider emitirá la señal valueChanged() cuando cambie su valor, desencadenando un efecto dominó.

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

Las ranuras setMinimum() y setMaximum() son utilizadas por la clase Window para establecer el rango de los widgets QSlider, QScrollBar y 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);
}

Las ranuras invertAppearance() y invertKeyBindings() controlan las propiedades de los widgets hijos invertedAppearance y invertedControls.

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

La ranura setOrientation() controla la dirección del diseño y la orientación de los deslizadores. En un grupo horizontal, los deslizadores tienen una orientación horizontal y se colocan unos encima de otros. En un grupo vertical, los deslizadores tienen una orientación vertical, y se colocan uno al lado del otro.

Proyecto de ejemplo @ code.qt.io