Qt 5.12 QSpinBox样式表设置后上下箭头消失问题求助

在Qt 5.12桌面应用中，为QSpinBox设置自定义样式表匹配应用配色后，上下箭头按钮的箭头消失。尝试基础样式组合、指定自定义箭头图片等方式均未解决问题。

用户原有样式表代码：

QSpinBox {
  background: #474747;
  color: white;
  border: 2px outset;
  border-top-color: #0E0E0E;
  border-right-color: #525252;
  border-bottom-color: #525252; 
  border-left-color: #0E0E0E;
  font: bold 14px;
  font-family: Helvetica;
}
QSpinBox::up-arrow {
  background: red;
  color: white;
}
QSpinBox::down-arrow {
  background: red;
  color: white;
}

尝试添加自定义图片的样式表：

QSpinBox::up-arrow {
  background: red;
  color: white;
  image: url(:/images/up_arrow.png);
}
QSpinBox::down-arrow {
  background: red;
  color: white;
  image: url(:/images/down_arrow.png);
}

问题原因 #

自定义样式表会覆盖QSpinBox子控件的默认布局与渲染规则，若未显式指定箭头按钮的位置、尺寸等属性，箭头会因布局挤压或无绘制区域而无法显示。

解决方案 #

需为箭头按钮（::up-button/::down-button）和箭头（::up-arrow/::down-arrow）补充布局与尺寸设置，以下是两种场景的修正示例：

场景1：使用自定义箭头图片 #

QSpinBox {
  background: #474747;
  color: white;
  border: 2px outset;
  border-top-color: #0E0E0E;
  border-right-color: #525252;
  border-bottom-color: #525252; 
  border-left-color: #0E0E0E;
  font: bold 14px Helvetica;
  padding-right: 20px; /* 为右侧箭头按钮预留空间 */
}

/* 定义上箭头按钮的位置与尺寸 */
QSpinBox::up-button {
  subcontrol-origin: border;
  subcontrol-position: top right;
  width: 16px;
  height: 50%; /* 上按钮占右侧区域一半高度 */
  border: 1px solid #0E0E0E;
  background: #333333;
}

/* 上箭头图片样式 */
QSpinBox::up-arrow {
  image: url(:/images/up_arrow.png);
  width: 12px;
  height: 12px;
}

/* 定义下箭头按钮的位置与尺寸 */
QSpinBox::down-button {
  subcontrol-origin: border;
  subcontrol-position: bottom right;
  width: 16px;
  height: 50%; /* 下按钮占右侧区域一半高度 */
  border: 1px solid #0E0E0E;
  background: #333333;
}

/* 下箭头图片样式 */
QSpinBox::down-arrow {
  image: url(:/images/down_arrow.png);
  width: 12px;
  height: 12px;
}

场景2：使用默认箭头形状 #

若无需自定义图片，仅需恢复默认箭头样式，需确保箭头颜色与按钮背景有对比度，并设置箭头尺寸：

QSpinBox {
  background: #474747;
  color: white;
  border: 2px outset;
  border-top-color: #0E0E0E;
  border-right-color: #525252;
  border-bottom-color: #525252; 
  border-left-color: #0E0E0E;
  font: bold 14px Helvetica;
  padding-right: 20px;
}

QSpinBox::up-button {
  subcontrol-origin: border;
  subcontrol-position: top right;
  width: 16px;
  height: 50%;
  background: #333333;
}

QSpinBox::up-arrow {
  color: white;
  width: 10px;
  height: 10px;
}

QSpinBox::down-button {
  subcontrol-origin: border;
  subcontrol-position: bottom right;
  width: 16px;
  height: 50%;
  background: #333333;
}

QSpinBox::down-arrow {
  color: white;
  width: 10px;
  height: 10px;
}

关键说明 #

• padding-right：为QSpinBox右侧的箭头按钮预留空间，避免输入文本与按钮重叠。
• subcontrol-origin/subcontrol-position：明确箭头按钮在QSpinBox中的定位规则，确保按钮区域正确渲染。
• 箭头尺寸：显式设置width/height，保证箭头有足够的绘制区域，自定义图片时需与图片尺寸匹配。

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