Beispiel für Schieberegler

Qt bietet drei Arten von Schieberegler-ähnlichen Widgets: QSlider, QScrollBar und QDial. Sie alle erben den Großteil ihrer Funktionalität von QAbstractSlider und können sich theoretisch in einer Anwendung gegenseitig ersetzen, da sich die Unterschiede lediglich auf ihr Erscheinungsbild beziehen. Dieses Beispiel zeigt, wie sie aussehen, wie sie funktionieren und wie sich ihr Verhalten und ihr Erscheinungsbild über ihre Eigenschaften steuern lassen.

Das Beispiel veranschaulicht zudem, wie Signale und Slots genutzt werden können, um das Verhalten von zwei oder mehr Widgets zu synchronisieren, und wie die Methode ` resizeEvent()` überschrieben werden kann, um ein responsives Layout zu implementieren.

Screenshot des Beispiels „Sliders“

Das „Sliders“-Beispiel besteht aus zwei Klassen:

• SlidersGroup ist ein benutzerdefiniertes Widget. Es kombiniert ein ` QSlider`, ein ` QScrollBar ` und ein ` QDial`.
• Window ist das Haupt-Widget, das ein „ QGroupBox “ und ein „SlidersGroup“ kombiniert. Das „ QGroupBox “ enthält mehrere Widgets, die das Verhalten der sliderähnlichen Widgets steuern.

Zunächst werden wir die Klasse „ Window “ betrachten, anschließend werfen wir einen Blick auf die Klasse „ SlidersGroup “.

Definition der Window-Klasse

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

Die Klasse „ Window “ erbt von „ QWidget “. Sie zeigt die Schieberegler-Widgets an und ermöglicht es dem Benutzer, deren Minimal-, Maximal- und aktuelle Werte festzulegen sowie deren Erscheinungsbild, Tastenbelegung und Ausrichtung anzupassen. Wir verwenden eine private Funktion „ createControls() “, um die Widgets zu erstellen, die diese Steuerungsmechanismen bereitstellen, und um sie mit den Schieberegler-Widgets zu verbinden.

Implementierung der Fensterklasse

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

    createControls(tr("Controls"));

Im Konstruktor erstellen wir zunächst das Widget „ SlidersGroup “, das die Schieberegler-Widgets anzeigt. Mit „ createControls() “ erstellen wir die Steuerungs-Widgets und verbinden diese mit den Schiebereglern.

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

Wir ordnen die Gruppen der Steuerungs-Widgets und die Schieberegler in einem horizontalen Layout an, bevor wir die Minimal-, Maximal- und aktuellen Werte initialisieren. Die Initialisierung des aktuellen Werts wird über die Verbindung, die wir zwischen den Widgets „ valueSpinBox “ und „ SlidersGroup “ hergestellt haben, an die Schieberegler-Widgets weitergegeben. Die Minimal- und Maximalwerte werden über die Verbindungen weitergegeben, die wir mit „ createControls() “ erstellt haben.

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

In der privaten Funktion „ createControls() “ lassen wir ein „ QGroupBox “ (controlsGroup) die Steuerelemente anzeigen. Ein „GroupBox“-Element kann einen Rahmen, einen Titel und eine Tastenkombination bereitstellen und verschiedene andere Widgets in sich anzeigen. Die Gruppe der Steuerelemente besteht aus zwei Kontrollkästchen und drei Drehfeldern mit Beschriftungen.

Nach dem Erstellen der Beschriftungen erstellen wir die beiden Kontrollkästchen. Kontrollkästchen werden typischerweise verwendet, um Funktionen in einer Anwendung darzustellen, die aktiviert oder deaktiviert werden können. Wenn „ invertedAppearance “ aktiviert ist, werden die Schiebereglerwerte umgekehrt. Die folgende Tabelle zeigt das Erscheinungsbild der verschiedenen schiebereglerähnlichen Widgets:

Es ist üblich, die Darstellung eines vertikalen Schiebereglers ( QSlider) umzukehren. Ein vertikaler Schieberegler, der beispielsweise die Lautstärke steuert, verläuft typischerweise von unten nach oben (die nicht umgekehrte Darstellung), während ein vertikaler Schieberegler, der die Position eines Objekts auf dem Bildschirm steuert, möglicherweise von oben nach unten verläuft, da Bildschirmkoordinaten von oben nach unten verlaufen.

Wenn die Option „ invertedKeyBindings “ aktiviert ist (entsprechend der Eigenschaft „ QAbstractSlider::invertedControls “), werden die Mausrad- und Tastenereignisse des Schiebereglers umgekehrt. Bei den normalen Tastenbelegungen bedeutet dies, dass das Scrollen des Mausrads „nach oben“ oder die Verwendung von Tasten wie „Bild auf“ den aktuellen Wert des Schiebereglers in Richtung seines Maximums erhöht. Invertiert bewirken dieselben Mausrad- und Tastenereignisse, dass sich der Wert in Richtung des Minimalwerts des Schiebereglers bewegt. Dies kann nützlich sein, wenn die Darstellung eines Schiebereglers invertiert ist: Manche Benutzer erwarten möglicherweise, dass die Tasten auf den Wert weiterhin auf die gleiche Weise wirken, während andere erwarten, dass „ PageUp “ auf dem Bildschirm „nach oben“ bedeutet.

Beachten Sie, dass bei horizontalen und vertikalen Bildlaufleisten die Tastenbelegungen standardmäßig umgekehrt sind: „ PageDown “ erhöht den aktuellen Wert, und „ PageUp “ verringert ihn.

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

Anschließend erstellen wir die Spin-Boxen. Mit „ QSpinBox “ kann der Benutzer einen Wert auswählen, indem er auf die Auf- und Ab-Schaltflächen klickt oder die Tasten „ Up “ und „ Down “ auf der Tastatur drückt, um den aktuell angezeigten Wert zu ändern. Der Benutzer kann den Wert auch manuell eingeben. Die Spin-Boxen steuern die Minimal-, Maximal- und aktuellen Werte für die Widgets „ QSlider “, „ QScrollBar “ und „ 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);

}

Anschließend verbinden wir die Widgets „ slidersGroup “ und „ valueSpinBox “ miteinander, sodass sich die Schieberegler-Widgets und das Steuerungs-Widget synchron verhalten, wenn sich der aktuelle Wert eines von ihnen ändert. Das Signal „ valueChanged() “ wird mit dem neuen Wert als Argument ausgesendet. Der Slot „ setValue() “ setzt den aktuellen Wert des Widgets auf den neuen Wert und sendet „ valueChanged() “ aus, wenn sich der neue Wert vom alten unterscheidet.

Wir synchronisieren das Verhalten der Steuerelemente und der Schieberegler über deren Signale und Slots. Wir verbinden jedes Steuerelement sowohl mit der horizontalen als auch mit der vertikalen Gruppe von Schiebereglern. Außerdem verbinden wir „ orientationCombo “ mit „ QStackedWidget “, damit die richtige „Seite“ angezeigt wird. Schließlich ordnen wir die Steuerelemente in einem „ QGridLayout “ innerhalb des Gruppenfelds „ controlsGroup “ an.

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

Zuletzt überschreiben wir die Methode `resizeEvent()` aus ` QWidget`. Wir schützen vor Division durch Null und berechnen ansonsten das Seitenverhältnis des Widgets. Wenn das Fenster im Hochformat vorliegt, legen wir das Layout so fest, dass die Gruppen aus Steuerelementen und Schiebereglern vertikal angeordnet werden, und geben den Schiebereglern eine horizontale Ausrichtung. Hat das Fenster ein Querformat, ändern wir das Layout so, dass die Schieberegler und Steuerelemente nebeneinander angezeigt werden, und geben den Schiebereglern eine vertikale Ausrichtung.

Klassendefinition von „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;
};

Die Klasse „ SlidersGroup “ erbt von „ QGroupBox “. Sie stellt einen Rahmen und einen Titel bereit und enthält ein „ QSlider “, ein „ QScrollBar “ sowie ein „ QDial “.

Wir stellen ein Signal „ valueChanged() “ und einen öffentlichen Slot „ setValue() “ bereit, deren Funktionalität derjenigen in „ QAbstractSlider “ und „ QSpinBox “ entspricht. Darüber hinaus implementieren wir mehrere weitere öffentliche Slots, um den Minimal- und Maximalwert festzulegen, das Erscheinungsbild der Schieberegler-Widgets sowie die Tastenbelegungen umzukehren und die Ausrichtung festzulegen.

Implementierung der Klasse „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);

Zunächst erstellen wir die Schieberegler-ähnlichen Widgets mit den entsprechenden Eigenschaften. Insbesondere legen wir für jedes Widget die Fokusrichtlinie fest. „ Qt::FocusPolicy “ ist ein Enum-Typ, der die verschiedenen Richtlinien definiert, die ein Widget hinsichtlich des Erlangens des Tastaturfokus haben kann. Die Richtlinie „ Qt::StrongFocus “ bedeutet, dass das Widget den Fokus sowohl durch Tabben als auch durch Klicken annimmt.

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

Anschließend verbinden wir die Widgets miteinander, damit sie synchron bleiben, wenn sich der aktuelle Wert eines von ihnen ändert.

Wir verbinden das Signal „ valueChanged() “ von „ dial “ mit dem Signal „ valueChanged() “ von „ SlidersGroup “, um die anderen Widgets in der Anwendung (d. h. die Steuerelemente) über den geänderten Wert zu informieren.

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

Schließlich erstellen wir das Layout für die Schieberegler-Widgets innerhalb der Gruppenbox. Wir beginnen mit einer horizontalen Anordnung der Schieberegler.

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

Der Slot „ setValue() “ legt den Wert von „ QSlider “ fest. Wir müssen „ setValue()“ bei den Widgets „ QScrollBar “ und „ QDial “ nicht explizit aufrufen, da „ QSlider “ bei einer Wertänderung das Signal „ valueChanged()“ aussendet und so einen Dominoeffekt auslöst.

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

Die Slots „ setMinimum() “ und „ setMaximum() “ werden von der Klasse „ Window “ verwendet, um den Wertebereich der Widgets „ QSlider “, „ QScrollBar “ und „ QDial “ festzulegen.

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

Die Slots „ invertAppearance() “ und „ invertKeyBindings() “ steuern die Eigenschaften „ invertedAppearance “ und „ invertedControls “ der untergeordneten Widgets.

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

Der Slot `setOrientation()` steuert die Ausrichtung des Layouts und die Ausrichtung der Schieberegler. In einer horizontalen Gruppe sind die Schieberegler horizontal ausgerichtet und werden übereinander angeordnet. In einer vertikalen Gruppe sind die Schieberegler vertikal ausgerichtet und werden nebeneinander angeordnet.

Beispielprojekt @ code.qt.io