Back to Qt.io
Contact Us Blog Download Qt
このページでは

スピンボックスの例

「スピンボックスの例」では、単純なQSpinBox ウィジェットから、QDateTimeEdit ウィジェットのようなより複雑なエディタに至るまで、Qtで利用可能な多種多様なスピンボックスの使用方法を示しています。

さまざまな種類のスピンボックスのギャラリー

このサンプルは、Qt で利用可能なさまざまなスピンボックスベースのウィジェットを表示するために使用される、単一のWindow クラスで構成されています。

ウィンドウクラスの定義

Window クラスはQWidget を継承しており、対話的な機能を実現するために使用される 2 つのスロットを含んでいます。

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

プライベート関数は、ウィンドウ内の各タイプのスピンボックスを設定するために使用されます。メンバー変数を使用してさまざまなウィジェットを追跡し、必要に応じて再設定できるようにしています。

ウィンドウクラスの実装

コンストラクタは、単にプライベート関数を呼び出して、この例で使用されるさまざまな種類のスピンボックスを設定し、各グループをレイアウトに配置します：

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

レイアウトを使用して、ウィンドウの子ウィジェットの配置を管理し、ウィンドウのタイトルを変更します。

createSpinBoxes() 関数は、QGroupBox を構築し、その内部に3つのQSpinBox ウィジェットを配置します。各ウィジェットには、期待される入力の種類を示す説明的なラベルが付いています。

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

最初のスピンボックスは、QSpinBox の最も単純な使用例を示しています。このスピンボックスは -20 から 20 までの値を受け付け、現在の値は矢印ボタンまたはUp およびDown キーを使用して 1 ずつ増減させることができ、デフォルト値は 0 です。

2番目のスピンボックスは、ステップサイズを大きくしており、その数値が表すデータの種類に関する詳細情報を提供する接尾辞を表示しています：

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

また、このスピンボックスは、定義された最小値の代わりに「special value 」を表示します。つまり、0% は決して表示されず、最小値が選択された際にはAutomatic と表示されます。

3つ目のスピンボックスは、接頭辞の使用例を示しています：

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

簡略化のため、ここでは接頭辞は付いているが接尾辞は付いていないスピンボックスを示しています。両方を同時に使用することも可能です。

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

関数の残りの部分では、グループボックスのレイアウトを設定し、各ウィジェットをその中に配置します。

createDateTimeEdits() 関数は、日付や時刻の編集に使用される一連のスピンボックスを含む別のグループボックスを構築します。

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

最初のスピンボックスは、QDate の値を使用して指定された範囲内の日付を受け入れることができるQDateEdit ウィジェットです。カーソルが該当するセクションにあるとき、矢印ボタンやUp およびDown キーを使用して、年、月、日の値を増減させることができます。

2つ目のスピンボックスは、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)));

時刻の有効な値は、QTime の値を使用して定義されています。

3番目のスピンボックスは、日付と時刻の両方の値を表示できるQDateTimeEdit ウィジェットであり、その上には、会議の許可される時間範囲を示すラベルを配置しています。これらのウィジェットは、ユーザーがフォーマット文字列を変更すると更新されます。

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

日時エディタに使用されるフォーマット文字列（ラベルに表示される文字列にも含まれる）は、コンボボックス内の文字列セットから選択されます：

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

このコンボボックスからのシグナルは、Window クラスのスロットに接続されています（後述）。

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

グループボックスの各子ウィジェットは、レイアウト内に配置されています。

ユーザーがコンボボックスで新しいフォーマット文字列を選択するたびに、setFormatString() のスロットが呼び出されます。QDateTimeEdit ウィジェットの表示形式は、シグナルによって渡された生の文字列を使用して設定されます：

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

ウィジェット内の表示セクションに応じて、新しい日付または時間の範囲を設定し、関連するラベルを更新して、ユーザーに適切な情報を提供します：

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

フォーマット文字列が変更されると、日付、時刻、あるいはその両方の入力に対応した適切なラベルと入力ウィジェットが表示されます。

createDoubleSpinBoxes() 関数は、倍精度浮動小数点数の入力に使用される3つのスピンボックスを生成します：

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

QDoubleSpinBox ウィジェットが生成される前に、表示される小数点以下の桁数を制御するためのスピンボックスを作成します。デフォルトでは、以下のスピンボックスには小数点以下2桁のみが表示されます。各スピンボックスは、createSpinBoxes() 関数によって作成されたグループ内のスピンボックスに相当します。

最初のダブル・スピンボックスは、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);

ただし、このスピンボックスでは、整数以外の値も入力可能です。

2番目のスピンボックスには接尾辞が表示され、最小値の代わりに特別な値が表示されます：

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

3つ目のスピンボックスは、接尾辞の代わりに接頭辞を表示します：

    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,

精度を指定するQSpinBox ウィジェットを、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);
}

関数の残りの部分では、各ウィジェットをグループボックスのレイアウトに配置します。

ユーザーが「precision」スピンボックスの値を変更すると、「changePrecision() 」スロットが呼び出されます：

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

この関数は、シグナルから渡された整数を使用して、各QDoubleSpinBox ウィジェットの小数点以下の桁数を指定するだけです。これらの各ウィジェットは、decimals プロパティが変更されると自動的に更新されます。

サンプルプロジェクト @ 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.