QSpinBox - 使用自定义样式表时两个按钮递增值

Question

我需要这样设计

QSpinBox

：

但是当我使用样式表时，

down-button

和

up-button

都在增加值，而

down-button

应该减少它。

样式表：

QSpinBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 2px;
}

QSpinBox::up-button, QSpinBox::down-button {
    width: 40px;
    height: 50px;
    subcontrol-origin: border;
    subcontrol-position: top right;
    border: 1px solid gray;
    border-radius: 3px;
}

QSpinBox::up-arrow, QSpinBox::down-arrow {
    width: 10px;
    height: 10px;
}

QSpinBox::up-button {
    image: url(:/icons/ui/images/icons/arrow-up.svg);
    margin-right: 40px;
}

QSpinBox::down-button {
    image: url(:/icons/ui/images/icons/arrow-down.svg);
    margin-left: 2px;
}

当我将

up-button

放在顶部，将

down-button

放在底部时，它们工作正常。

Answer 1

看来你需要把

up-button

放在右边，

down-button

放在左边。

所以你需要拆分你的

up-button

和

down-button

样式表，并添加一个

margin-right

到你的

down-button

与你的按钮宽度的值。

QSpinBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 2px;
}
   
QSpinBox::up-button{
    width: 40px;
    height: 50px;
    subcontrol-origin: border;
    subcontrol-position: top right;
    border: 1px solid gray;
    border-radius: 3px;
}

//down-button style sheet separated
QSpinBox::down-button {
    width: 40px;
    height: 50px;
    subcontrol-origin: border;
    subcontrol-position: top right;
    border: 1px solid gray;
    border-radius: 3px;
    //right margin added here
    margin-right: 40px;
}

QSpinBox::up-arrow, QSpinBox::down-arrow {
    width: 10px;
    height: 10px;
}

//remove right margin from up button
QSpinBox::up-button {
    image: url(:/icons/ui/images/icons/arrow-up.svg);
}

QSpinBox::down-button {
    image: url(:/icons/ui/images/icons/arrow-down.svg);
    margin-left: 2px;
}