You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

QT Creator中如何创建箭头左右指向的QSpinBox?

How to Make QSpinBox Arrows Point Left/Right Instead of Up/Down

Got it, I totally get why this feels like it should be a basic setting but ends up being tricky—Qt's default QSpinBox doesn't expose a direct property for arrow orientation. But don't worry, there are a couple of solid ways to pull this off, depending on how much control you need.

Method 1: Quick Fix with Qt Style Sheets (QSS)

If you just need a simple solution without writing custom C++ code, styling with QSS is the way to go. You can reposition the default up/down buttons to the left/right and rotate or replace their arrow icons:

/* Adjust padding to make space for left/right arrows */
QSpinBox {
    padding-left: 22px;
    padding-right: 22px;
}

/* Reposition up button to the right and rotate arrow to point right */
QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: right center;
    width: 20px;
    transform: rotate(90deg);
}

/* Reposition down button to the left and rotate arrow to point left */
QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: left center;
    width: 20px;
    transform: rotate(-90deg);
}

/* Optional: Replace arrows with custom left/right icons for cleaner look */
QSpinBox::up-arrow {
    image: url(:/path/to/arrow-right.png);
}
QSpinBox::down-arrow {
    image: url(:/path/to/arrow-left.png);
}

Pros & Cons

  • Pros: Fast to implement, no C++ code required, works with existing QSpinBox instances.
  • Cons: Style can vary across platforms (native Qt styles might override some properties), rotated arrows might look odd with certain themes.

Method 2: Custom QSpinBox Subclass (Full Control)

For a more robust, cross-platform solution, create a custom subclass to rearrange the internal widgets into a horizontal layout. This gives you full control over button placement and styling:

#include <QSpinBox>
#include <QHBoxLayout>
#include <QPushButton>
#include <QLineEdit>

class HorizontalSpinBox : public QSpinBox
{
    Q_OBJECT
public:
    explicit HorizontalSpinBox(QWidget *parent = nullptr) 
        : QSpinBox(parent) {
        // Locate internal Qt widgets (object names are stable across Qt versions)
        QPushButton* upButton = findChild<QPushButton*>("qt_spinbox_up_button");
        QPushButton* downButton = findChild<QPushButton*>("qt_spinbox_down_button");
        QLineEdit* lineEdit = findChild<QLineEdit*>();

        if (upButton && downButton && lineEdit) {
            // Remove widgets from the default vertical layout
            layout()->removeWidget(upButton);
            layout()->removeWidget(downButton);
            layout()->removeWidget(lineEdit);

            // Create a new horizontal layout
            QHBoxLayout* horizontalLayout = new QHBoxLayout(this);
            horizontalLayout->setContentsMargins(0, 0, 0, 0);
            horizontalLayout->setSpacing(0);

            // Add widgets in desired order (left arrow, input, right arrow)
            horizontalLayout->addWidget(downButton);
            horizontalLayout->addWidget(lineEdit);
            horizontalLayout->addWidget(upButton);

            // Update button icons to left/right arrows
            upButton->setIcon(QIcon::fromTheme("arrow-right"));
            downButton->setIcon(QIcon::fromTheme("arrow-left"));
            upButton->setFlat(true);
            downButton->setFlat(true);
        }
    }
};

Pros & Cons

  • Pros: Consistent behavior across platforms, full control over layout and styling, can add extra customizations easily.
  • Cons: Requires writing C++ code, depends on Qt's internal widget object names (though these are rarely changed in Qt updates).

Quick Notes

  • If you're using Qt Quick/QML, the approach is similar: either style the SpinBox's upIndicator and downIndicator properties, or create a custom component with horizontal buttons.
  • Test on your target platforms! Native styles (like Windows' Fusion or macOS' Aqua) might need minor padding or styling adjustments to look polished.

Hope one of these methods works for you—let me know if you need help tweaking things for your specific use case!

内容的提问来源于stack exchange,提问作者Simon Segert

火山引擎 最新活动