Back to Qt.io
Contact Us Blog Download Qt
Sur cette page

Exemple de zones de sélection

L'exemple « Spin Boxes » montre comment utiliser les nombreux types de zones de saisie disponibles dans Qt, depuis un simple widget ` QSpinBox ` jusqu'à des éditeurs plus complexes comme le widget ` QDateTimeEdit `.

Galerie présentant différents types de boîtes à spin

L'exemple se compose d'une seule classe ` Window ` qui sert à afficher les différents widgets basés sur des spin boxes disponibles avec Qt.

Définition de la classe Window

La classe ` Window ` hérite de ` QWidget ` et contient deux slots utilisés pour fournir des fonctionnalités interactives :

class Window : public QWidget
{
    Q_OBJECT

public:
    Window(QWidget *parent = nullptr);

public slots:
    void changePrecision(int decimals);
    void setFormatString(const QString &formatString);

private:
    void createSpinBoxes();
    void createDateTimeEdits();
    void createDoubleSpinBoxes();

    QDateTimeEdit *meetingEdit;
    QDoubleSpinBox *doubleSpinBox;
    QDoubleSpinBox *priceSpinBox;
    QDoubleSpinBox *scaleSpinBox;
    QGroupBox *spinBoxesGroup;
    QGroupBox *editsGroup;
    QGroupBox *doubleSpinBoxesGroup;
    QLabel *meetingLabel;
    QSpinBox *groupSeparatorSpinBox;
    QDoubleSpinBox *groupSeparatorSpinBox_d;
};

Les fonctions privées servent à configurer chaque type de spin box dans la fenêtre. Nous utilisons des variables membres pour garder la trace des différents widgets afin de pouvoir les reconfigurer si nécessaire.

Implémentation de la classe de fenêtre

Le constructeur appelle simplement des fonctions privées pour configurer les différents types de spin box utilisés dans l'exemple, et place chaque groupe dans une disposition :

Window::Window(QWidget *parent)
    : QWidget(parent)
{
    createSpinBoxes();
    createDateTimeEdits();
    createDoubleSpinBoxes();

    QHBoxLayout *layout = new QHBoxLayout;
    layout->addWidget(spinBoxesGroup);
    layout->addWidget(editsGroup);
    layout->addWidget(doubleSpinBoxesGroup);
    setLayout(layout);

    setWindowTitle(tr("Spin Boxes"));
}

Nous utilisons la disposition pour gérer l'agencement des widgets enfants de la fenêtre et modifier le titre de la fenêtre.

La fonction ` createSpinBoxes() ` construit une ` QGroupBox ` et y place trois widgets ` QSpinBox ` accompagnés de libellés descriptifs indiquant les types de saisie attendus.

void Window::createSpinBoxes()
{
    spinBoxesGroup = new QGroupBox(tr("Spinboxes"));

    QLabel *integerLabel = new QLabel(tr("Enter a value between "
        "%1 and %2:").arg(-20).arg(20));
    QSpinBox *integerSpinBox = new QSpinBox;
    integerSpinBox->setRange(-20, 20);
    integerSpinBox->setSingleStep(1);
    integerSpinBox->setValue(0);

La première zone de sélection à molette illustre l’utilisation la plus simple de ` QSpinBox`. Elle accepte des valeurs comprises entre -20 et 20 ; la valeur actuelle peut être augmentée ou diminuée de 1 à l’aide des boutons fléchés ou des touches ` Up ` et ` Down `, et la valeur par défaut est 0.

La deuxième zone de saisie à roue utilise un pas plus important et affiche un suffixe afin de fournir davantage d’informations sur le type de données représenté par le nombre :

    QLabel *zoomLabel = new QLabel(tr("Enter a zoom value between "
        "%1 and %2:").arg(0).arg(1000));
    QSpinBox *zoomSpinBox = new QSpinBox;
    zoomSpinBox->setRange(0, 1000);
    zoomSpinBox->setSingleStep(10);
    zoomSpinBox->setSuffix("%");
    zoomSpinBox->setSpecialValueText(tr("Automatic"));
    zoomSpinBox->setValue(100);

Cette zone de saisie affiche également « special value » à la place de la valeur minimale qui lui est attribuée. Cela signifie qu’elle n’affichera jamais « 0% », mais qu’elle affichera « Automatic » lorsque la valeur minimale est sélectionnée.

La troisième zone de saisie avec curseur montre comment utiliser un préfixe :

    QLabel *priceLabel = new QLabel(tr("Enter a price between "
        "%1 and %2:").arg(0).arg(999));
    QSpinBox *priceSpinBox = new QSpinBox;
    priceSpinBox->setRange(0, 999);
    priceSpinBox->setSingleStep(1);
    priceSpinBox->setPrefix("$");
    priceSpinBox->setValue(99);

Par souci de simplicité, nous présentons une zone de sélection avec un préfixe et sans suffixe. Il est également possible d’utiliser les deux à la fois.

    groupSeparatorSpinBox = new QSpinBox;
    groupSeparatorSpinBox->setRange(-99999999, 99999999);
    groupSeparatorSpinBox->setValue(1000);
    groupSeparatorSpinBox->setGroupSeparatorShown(true);
    QCheckBox *groupSeparatorChkBox = new QCheckBox;
    groupSeparatorChkBox->setText(tr("Show group separator"));
    groupSeparatorChkBox->setChecked(true);
    connect(groupSeparatorChkBox, &QCheckBox::toggled, groupSeparatorSpinBox,
            &QSpinBox::setGroupSeparatorShown);

    QLabel *hexLabel = new QLabel(tr("Enter a value between "
        "%1 and %2:").arg('-' + QString::number(31, 16)).arg(QString::number(31, 16)));
    QSpinBox *hexSpinBox = new QSpinBox;
    hexSpinBox->setRange(-31, 31);
    hexSpinBox->setSingleStep(1);
    hexSpinBox->setValue(0);
    hexSpinBox->setDisplayIntegerBase(16);

    QVBoxLayout *spinBoxLayout = new QVBoxLayout;
    spinBoxLayout->addWidget(integerLabel);
    spinBoxLayout->addWidget(integerSpinBox);
    spinBoxLayout->addWidget(zoomLabel);
    spinBoxLayout->addWidget(zoomSpinBox);
    spinBoxLayout->addWidget(priceLabel);
    spinBoxLayout->addWidget(priceSpinBox);
    spinBoxLayout->addWidget(hexLabel);
    spinBoxLayout->addWidget(hexSpinBox);
    spinBoxLayout->addWidget(groupSeparatorChkBox);
    spinBoxLayout->addWidget(groupSeparatorSpinBox);
    spinBoxesGroup->setLayout(spinBoxLayout);
}

Le reste de la fonction configure la mise en page de la zone de groupe et y place chacun des widgets.

La fonction createDateTimeEdits() construit une autre zone de groupe avec une sélection de champs de sélection utilisés pour modifier les dates et les heures.

void Window::createDateTimeEdits()
{
    editsGroup = new QGroupBox(tr("Date and time spin boxes"));

    QLabel *dateLabel = new QLabel;
    QDateEdit *dateEdit = new QDateEdit(QDate::currentDate());
    dateEdit->setDateRange(QDate(2005, 1, 1), QDate(2010, 12, 31));
    dateLabel->setText(tr("Appointment date (between %0 and %1):")
                       .arg(dateEdit->minimumDate().toString(Qt::ISODate))
                       .arg(dateEdit->maximumDate().toString(Qt::ISODate)));

La première zone de sélection est un widget « QDateEdit » capable d’accepter des dates comprises dans une plage donnée, spécifiée à l’aide de valeurs « QDate ». Les boutons fléchés ainsi que les touches « Up » et « Down » peuvent être utilisés pour augmenter ou diminuer les valeurs de l’année, du mois et du jour lorsque le curseur se trouve dans la section correspondante.

La deuxième zone de sélection est un widget « QTimeEdit » :

    QLabel *timeLabel = new QLabel;
    QTimeEdit *timeEdit = new QTimeEdit(QTime::currentTime());
    timeEdit->setTimeRange(QTime(9, 0, 0, 0), QTime(16, 30, 0, 0));
    timeLabel->setText(tr("Appointment time (between %0 and %1):")
                       .arg(timeEdit->minimumTime().toString(Qt::ISODate))
                       .arg(timeEdit->maximumTime().toString(Qt::ISODate)));

Les valeurs acceptables pour l’heure sont définies à l’aide de valeurs « QTime ».

La troisième zone de sélection est un widget « QDateTimeEdit » capable d’afficher à la fois la date et l’heure ; nous plaçons une étiquette au-dessus de celle-ci pour indiquer la plage horaire autorisée pour une réunion. Ces widgets seront mis à jour lorsque l’utilisateur modifiera une chaîne de format.

    meetingLabel = new QLabel;
    meetingEdit = new QDateTimeEdit(QDateTime::currentDateTime());

La chaîne de format utilisée pour l’éditeur de date et d’heure, qui apparaît également dans la chaîne affichée par l’étiquette, est choisie parmi un ensemble de chaînes dans une liste déroulante :

    QLabel *formatLabel = new QLabel(tr("Format string for the meeting date "
                                        "and time:"));
    QComboBox *formatComboBox = new QComboBox;
    formatComboBox->addItem("yyyy-MM-dd hh:mm:ss (zzz 'ms')");
    formatComboBox->addItem("hh:mm:ss MM/dd/yyyy");
    formatComboBox->addItem("hh:mm:ss dd/MM/yyyy");
    formatComboBox->addItem("hh:mm:ss");
    formatComboBox->addItem("hh:mm ap");

    connect(formatComboBox, &QComboBox::textActivated,
            this, &Window::setFormatString);

Un signal provenant de cette liste déroulante est connecté à un slot de la classe « Window » (présentée plus loin).

    QVBoxLayout *editsLayout = new QVBoxLayout;
    editsLayout->addWidget(dateLabel);
    editsLayout->addWidget(dateEdit);
    editsLayout->addWidget(timeLabel);
    editsLayout->addWidget(timeEdit);
    editsLayout->addWidget(meetingLabel);
    editsLayout->addWidget(meetingEdit);
    editsLayout->addWidget(formatLabel);
    editsLayout->addWidget(formatComboBox);
    editsGroup->setLayout(editsLayout);
}

Chaque widget enfant de la zone de groupe est placé dans une mise en page.

Le slot « setFormatString() » est appelé chaque fois que l’utilisateur sélectionne une nouvelle chaîne de format dans la liste déroulante. Le format d’affichage du widget « QDateTimeEdit » est défini à l’aide de la chaîne brute transmise par le signal :

void Window::setFormatString(const QString &formatString)
{
    meetingEdit->setDisplayFormat(formatString);

En fonction des sections visibles dans le widget, nous définissons une nouvelle plage de dates ou d’heures, et mettons à jour l’étiquette associée afin de fournir des informations pertinentes à l’utilisateur :

    if (meetingEdit->displayedSections() & QDateTimeEdit::DateSections_Mask) {
        meetingEdit->setDateRange(QDate(2004, 11, 1), QDate(2005, 11, 30));
        meetingLabel->setText(tr("Meeting date (between %0 and %1):")
            .arg(meetingEdit->minimumDate().toString(Qt::ISODate))
            .arg(meetingEdit->maximumDate().toString(Qt::ISODate)));
    } else {
        meetingEdit->setTimeRange(QTime(0, 7, 20, 0), QTime(21, 0, 0, 0));
        meetingLabel->setText(tr("Meeting time (between %0 and %1):")
            .arg(meetingEdit->minimumTime().toString(Qt::ISODate))
            .arg(meetingEdit->maximumTime().toString(Qt::ISODate)));
    }
}

Lorsque la chaîne de format est modifiée, un libellé et un widget de saisie adaptés s’affichent pour les dates, les heures ou les deux types de saisie.

La fonction ` createDoubleSpinBoxes() ` crée trois champs de sélection utilisés pour saisir des nombres à virgule flottante en double précision :

void Window::createDoubleSpinBoxes()
{
    doubleSpinBoxesGroup = new QGroupBox(tr("Double precision spinboxes"));

    QLabel *precisionLabel = new QLabel(tr("Number of decimal places "
                                           "to show:"));
    QSpinBox *precisionSpinBox = new QSpinBox;
    precisionSpinBox->setRange(0, 100);
    precisionSpinBox->setValue(2);

Avant de créer les widgets de la fonction ` QDoubleSpinBox `, nous créons une zone de sélection pour contrôler le nombre de décimales affichées. Par défaut, seules deux décimales sont affichées dans les zones de sélection suivantes, chacune d’entre elles étant l’équivalent d’une zone de sélection du groupe créé par la fonction ` createSpinBoxes() `.

La première zone de sélection double présente une zone de sélection de précision double standard, avec la même plage, le même pas et la même valeur par défaut que la première zone de sélection de la fonction ` createSpinBoxes() ` :

    QLabel *doubleLabel = new QLabel(tr("Enter a value between "
        "%1 and %2:").arg(-20).arg(20));
    doubleSpinBox = new QDoubleSpinBox;
    doubleSpinBox->setRange(-20.0, 20.0);
    doubleSpinBox->setSingleStep(1.0);
    doubleSpinBox->setValue(0.0);

Cependant, cette zone de sélection permet également de saisir des valeurs non entières.

La deuxième zone de sélection affiche un suffixe et indique une valeur particulière à la place de la valeur minimale :

    QLabel *scaleLabel = new QLabel(tr("Enter a scale factor between "
        "%1 and %2:").arg(0).arg(1000.0));
    scaleSpinBox = new QDoubleSpinBox;
    scaleSpinBox->setRange(0.0, 1000.0);
    scaleSpinBox->setSingleStep(10.0);
    scaleSpinBox->setSuffix("%");
    scaleSpinBox->setSpecialValueText(tr("No scaling"));
    scaleSpinBox->setValue(100.0);

La troisième zone de saisie à molette affiche un préfixe à la place d’un suffixe :

    QLabel *priceLabel = new QLabel(tr("Enter a price between "
        "%1 and %2:").arg(0).arg(1000));
    priceSpinBox = new QDoubleSpinBox;
    priceSpinBox->setRange(0.0, 1000.0);
    priceSpinBox->setSingleStep(1.0);
    priceSpinBox->setPrefix("$");
    priceSpinBox->setValue(99.99);

    connect(precisionSpinBox, &QSpinBox::valueChanged,

Nous connectons le widget « QSpinBox », qui spécifie la précision, à un slot de la classe « Window ».

    QVBoxLayout *spinBoxLayout = new QVBoxLayout;
    spinBoxLayout->addWidget(precisionLabel);
    spinBoxLayout->addWidget(precisionSpinBox);
    spinBoxLayout->addWidget(doubleLabel);
    spinBoxLayout->addWidget(doubleSpinBox);
    spinBoxLayout->addWidget(scaleLabel);
    spinBoxLayout->addWidget(scaleSpinBox);
    spinBoxLayout->addWidget(priceLabel);
    spinBoxLayout->addWidget(priceSpinBox);
    spinBoxLayout->addWidget(groupSeparatorChkBox);
    spinBoxLayout->addWidget(groupSeparatorSpinBox_d);
    doubleSpinBoxesGroup->setLayout(spinBoxLayout);
}

Le reste de la fonction place chacun des widgets dans une disposition pour la zone de groupe.

Le slot « changePrecision() » est appelé lorsque l’utilisateur modifie la valeur dans la zone de sélection « precision » :

void Window::changePrecision(int decimals)
{
    doubleSpinBox->setDecimals(decimals);
    scaleSpinBox->setDecimals(decimals);
    priceSpinBox->setDecimals(decimals);
}

Cette fonction utilise simplement l’entier fourni par le signal pour spécifier le nombre de décimales dans chacun des widgets « QDoubleSpinBox ». Chacun d’entre eux sera mis à jour automatiquement lorsque sa propriété « decimals » sera modifiée.

Exemple de projet sur code.qt.io

© 2026 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.