英文:
QSpinBox - both buttons incrementing value when using custom stylesheet
问题
我需要将 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 放在下面时，它们正常工作。
英文:
I need to style QSpinBox like this:
But when I did it with stylesheet, both down-button and up-button were incrementing value, where down-button should have decremented it.
Stylesheet:
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;
}
When I placed up-button on top, and down-button on bottom, they worked fine.
答案1
得分: 0
在右侧放置up-button，在左侧放置down-button似乎是您需要的。
因此，您需要拆分up-button和down-button的样式表，并为down-button添加一个margin-right，其值等于按钮的宽度。
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的样式表
QSpinBox::down-button {
width: 40px;
height: 50px;
subcontrol-origin: border;
subcontrol-position: top right;
border: 1px solid gray;
border-radius: 3px;
// 在这里添加右侧边距
margin-right: 40px;
}
QSpinBox::up-arrow, QSpinBox::down-arrow {
width: 10px;
height: 10px;
}
// 移除up按钮的右边距
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;
}
英文:
It seems that you need to place up-button on the right, and down-button on the left.
So you need to split your up-button and down-button style sheets, and add a margin-right to your down-button with a value of your button's width.
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;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论