Qt スライダー

スライダー

今回はスライダーを説明します。

slider プロジェクト

slider という作業用ディレクトリを作ってください。

そして、そこに次の slider.cpp を記述して保存してください。

slider.cpp


/*************************************
    slider.cpp
    copyright    :  vivacocoa.jp
    last modified:  Mar. 26, 2025
*************************************/

#include <QWidget>
#include <QPainter>
#include <QApplication>
#include <QGridLayout>
#include <QSlider>
#include <QLabel>
#include <QString>

class Slider : public QWidget
{
public:
    Slider(QWidget *parent = 0);
    int r = 0;
    int g = 0;
    int b = 0;

protected:
void paintEvent (QPaintEvent *e);
private slots:
    void OnRed   (int);
    void OnGreen (int);
    void OnBlue  (int);
private:
    void doPainting ();
    QSlider *sred, *sgreen, *sblue;
    QLabel *lempty, *lred, *lgreen, *lblue;
};

void Slider::OnRed (int r)
{
    this->r = r;
    this->repaint();
    //lempty->setText (QString::number (r));
}

void Slider::OnGreen (int g)
{
    this->g = g;
    this->repaint();
}

void Slider::OnBlue (int b)
{
    this->b = b;
    this->repaint();
}

Slider::Slider (QWidget *parent)
: QWidget (parent)
{
    auto *grid = new QGridLayout (this);
    lempty = new QLabel ("", this);
    lred   = new QLabel ("Red", this);
    lgreen = new QLabel ("Green", this);
    lblue  = new QLabel ("Blue", this);
    sred   = new QSlider (Qt::Horizontal, this);
    sgreen = new QSlider (Qt::Horizontal, this);
    sblue  = new QSlider (Qt::Horizontal, this);

    sred->setMaximum (255);
    sgreen->setMaximum (255);
    sblue->setMaximum (255);
    grid->setSpacing (5);
    //setMinimum(int)

    grid->addWidget (lempty, 0, 0, 1, 2);
    grid->addWidget (lred,   1, 0);
    grid->addWidget (lgreen, 2, 0);
    grid->addWidget (lblue,  3, 0);
    grid->addWidget (sred,   1, 1);
    grid->addWidget (sgreen, 2, 1);
    grid->addWidget (sblue,  3, 1);
    lempty->setAlignment (Qt::AlignCenter);
    lred->setAlignment (Qt::AlignRight);
    lgreen->setAlignment (Qt::AlignRight);
    lblue->setAlignment (Qt::AlignRight);

    setLayout (grid);

    connect (sred, &QSlider::valueChanged, this, &Slider::OnRed);
    connect (sgreen, &QSlider::valueChanged, this, &Slider::OnGreen);
    connect (sblue, &QSlider::valueChanged, this, &Slider::OnBlue);
}

void Slider::paintEvent (QPaintEvent *e)
{
    Q_UNUSED (e);
    doPainting ();
}

void Slider::doPainting ()
{
    auto size = this->size ();
    auto w = size.width ();
    auto h = size.height ();
    
    QPainter painter (this);
    painter.setPen (QColor (r, g, b));
    //QPen pen(Qt::black, 1, Qt::SolidLine);
    //painter.setPen (pen);

    painter.setBrush (QColor (r, g, b));
    painter.drawRect (0, 0, w, h - 95);
}

int main (int argc, char **argv)
{
    QApplication app (argc, argv);

    Slider win;
    win.resize (600, 400);
    win.setWindowTitle ("Slider");
    win.show ();

    return app.exec ();
}

ビルド

slider ディレクトリで作業を続けます。

macOS Linux の場合


// プロジェクトを作ります。
qmake -project

// slider.pro というファイルができていると思います。
// slider.pro の末尾に次の行を追加してください。
QT += widgets

// Makefile を作ります。
qmake

// make します。
make

// コードにエラーがありましたら、コードを修正して再び make します。
// プロジェクトから作り直す必要はありません。

Windows の場合


// プロジェクトを作ります。
qmake -project

// slider.pro というファイルができていると思います。
// slider.pro の末尾に次の行を追加してください。
QT += widgets

// Makefile を作ります。
qmake

// nmake します。make じゃなく nmake です。
nmake

// コードにエラーがありましたら、コードを修正して再び nmake します。
// プロジェクトから作り直す必要はありません。

実行


// Mac の場合は、slider ディレクトリに slider.app ができていると思います。
// ターミナルで実行するには次のようにコマンドします。
./slider.app/Contents/MacOS/slider

// Linux の場合は、slider という実行ファイルが出来上がっています。これをそのまま実行します。
./slider

// Windows の場合は、
// slider の中の release ディレクトリの中に slider.exe が出来上がっています。

Mac の場合、slider ディレクトリにできている slider.app (slider という名前になっています) をダブルクリックしても起動します。

他の場所、例えばデスクトップに持って行ってもダブルクリックで起動します。

Debian、Fedora、Kali の場合も、slider ディレクトリにできている slider をダブルクリックしても起動します。

他の場所、例えばデスクトップに持って行ってもダブルクリックで起動します。

Ubuntu、Mint はシステムに登録しないとダブルクリックでは起動できなかったと思います。

Windows の場合は、出来上がった slider.exe は、どこに持って行ってもダブルクリックで起動できます。

Windows