'QT creator horizontal spin box

Is there a way to create a QSpinBox whose arrows point left and right (rather than up and down)? I haven't been able to find anything about this, even though it seems quite basic.

qtqt-creatorqtstylesheets


Solution 1:[1]

You can move the buttons to the control sides, and give them custom arrow bitmaps using a stylesheet like this:

QSpinBox::down-button  {
  subcontrol-origin: margin;
  subcontrol-position: center left;
  image: url(:/icons/leftArrow.png);
}

QSpinBox::up-button  {
  subcontrol-origin: margin;
  subcontrol-position: center right;
  image: url(:/icons/rightArrow.png);
}

As an example, apply the following stylesheet to a spinbox with fixed height of 26 pixels:

QSpinBox {
  border: 1px solid #ABABAB;
  border-radius: 3px;
}

QSpinBox::up-button  {
  subcontrol-origin: margin;
  subcontrol-position: center left;
  image: url(:/icons/leftArrow.png);
  background-color: #ABABAB;
  left: 1px;
  height: 24px;
  width: 24px;
}

QSpinBox::down-button  {
  subcontrol-origin: margin;
  subcontrol-position: center right;
  image: url(:/icons/rightArrow.png);
  background-color: #ABABAB;
  right: 1px;
  height: 24px;
  width: 24px;
}

to obtain this:

styled spinbox

Solution 2:[2]

I think you know that qt do not provide it directly. Look into below documentation, it has three options. 

QAbstractSpinBox::UpDownArrows
QAbstractSpinBox::PlusMinus
QAbstractSpinBox::NoButtons

http://doc.qt.io/qt-5/qabstractspinbox.html#ButtonSymbols-enum

But you can style the spin box using style sheet properties using desired images.

Come up with good image files for left and right symbols and set the image files using stylesheets as shown below.

QSpinBox::up-button { image: url(:/images/spinRight.png) }
QSpinBox::down-button { image: url(:/images/spinLeft.png) }

Solution 3:[3]

I never found Qt native solution, so try do it with some tricks, one possible raw example below, the basic idea is to make the Spinbox bare (no native buttons, and make your own buttons) setButtonSymbols(QAbstractSpinBox::NoButtons);, I used just simple text for left/right button, you can choose a more fancy images for the buttons:

.h

//


private slots:
    void leftBtn();
    void RightBtn();

private:
    QSpinBox *spinBx;
//

.cpp

{
    QHBoxLayout *hlayout = new QHBoxLayout;
    QToolButton *btnLt = new QToolButton;
    btnLt->setText("<"); // this is simple, use your image to style the button
    QToolButton *btnRt = new QToolButton; // or could be pushbutton!
    btnRt->setText(">");
    spinBx = new QSpinBox;
    spinBx->setButtonSymbols(QAbstractSpinBox::NoButtons);
    hlayout->addWidget(btnLt);
    hlayout->addWidget(spinBx);
    hlayout->addWidget(btnRt);
    connect(btnLt, &QToolButton::clicked, this, &MainWindow::leftBtn);
    connect(btnRt, &QToolButton::clicked, this, &MainWindow::RightBtn);

    this->ui->centralWidget->setLayout(hlayout);
}

 void MainWindow::leftBtn()
{
    this->spinBx->setValue(this->spinBx->value()-1);
}
void MainWindow::RightBtn()
{
    this->spinBx->setValue(this->spinBx->value()+1);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Pavan Chandaka
Solution 3

Related Questions