自定义QSpinBox样式表后上下按钮均触发数值递增问题

问题描述 #

需要将QSpinBox设置为左右并排的上下按钮样式（左侧为向下箭头按钮，右侧为向上箭头按钮），但使用自定义样式表后，本应触发数值递减的down-button与up-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都设置了相同的subcontrol-position: top right，Qt会将这两个子控件识别为处于同一个布局区域，导致控件的功能映射出现混乱，最终两个按钮都执行了up-button的递增逻辑。

解决方案 #

需要为两个按钮明确区分布局位置，让Qt能正确识别控件功能，同时通过边距调整实现左右并排效果，修改后的样式表如下：

QSpinBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 2px;
    /* 给右侧两个按钮留出足够空间 */
    padding-right: 82px;
}

QSpinBox::up-button {
    width: 40px;
    height: 50px;
    subcontrol-origin: border;
    subcontrol-position: top right;
    border: 1px solid gray;
    border-radius: 3px;
    image: url(:/icons/ui/images/icons/arrow-up.svg);
}

QSpinBox::down-button {
    width: 40px;
    height: 50px;
    subcontrol-origin: border;
    subcontrol-position: top right;
    border: 1px solid gray;
    border-radius: 3px;
    image: url(:/icons/ui/images/icons/arrow-down.svg);
    /* 偏移距离等于up-button宽度+间隔，实现并排 */
    margin-right: 42px;
}

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

核心逻辑：通过单独设置按钮的定位规则，让Qt能区分两个控件的功能映射，再通过margin调整实现左右并排的布局效果。

内容的提问来源于stack exchange，提问作者vladik