在 Qt 中使用 CSS 自定义向下箭头按钮

Question

我们正在开发一个 C++ 形式的触摸屏 Qt 应用程序，需要宽的向下箭头图形图像以及自定义背景。我一直在尝试获得一些可以使用 QSS 工作的东西，但到目前为止都失败了。

我发现获得宽按钮（大于 16 像素）的唯一方法是使用负边距：

QComboBox {
    min-height:63px;
    max-height:63px;
    margin-right:47px;
    border-image:url(Resources/ComboBox_Center1.png);
    font-family:  "Franklin Gothic Medium";
    font-size:  22px;
}
QComboBox::drop-down {
    width:47px;
    border:0px;
    margin:0px;
    margin-right:-47px;
}
QComboBox::down-arrow {
    image:url(Resources/ComboBox_Right1.png);
}

这会将按钮放在正确的位置并使输入区域具有正确的大小，但向下箭头只会打开组合框，不打开然后关闭。

所有其他选项要么将输入区域扩展到该区域（边距、边框），要么缩小整个控件。

设置背景图像标签没有效果 - 只有边框图像显示图像。

请注意，即使在箭头下方，边框图像（或背景颜色）也始终显示。

有没有办法只设置组合框输入部分的样式？看起来组合的那部分应该有自己的子选择器，但我还没有看到它。

Answer 1

试试这个...

QComboBox {
    min-height:63px;
    max-height:63px;
    font-family:  "Franklin Gothic Medium";
    font-size:  22px;
    padding: 1px 1px 1px 1px;
}
QComboBox::drop-down {
   width: 47px;
   border: 0px;
}

QComboBox::down-arrow {
    image: url(Resources/ComboBox_Right1.png);
    width: 42px;
    height: 42px;
}

注意：向下箭头图像的宽度和高度将取决于您正在使用的图像。这些对我的形象有用。

样式表有一些奇怪的事情 - 以及许多隐藏的技巧。可能值得花几分钟阅读此，其中描述了样式表工作原理背后的基本原则。它们看起来很简单，但即使使用了一段时间后，我仍然经常回顾示例和文档。

背景图像是那些不明显的东西之一。这是我直接从文档中获取的内容。在大多数情况下，当设置背景图像时，我们真正想要的是设置边框图像。我假设您看不到“背景图像”的原因是组合框是一个“复杂”小部件 - 这意味着它由其他几个小部件组成 - 因此背景隐藏在它们后面。

尝试background-image属性是很常见的，但这有一个
缺点：比如背景会经常出现
隐藏在按钮装饰后面，因为它不被视为
背景。此外，如果调整按钮的大小，整个
背景将被拉伸或平铺，这并不总是看起来
好的。最好使用 border-image 属性，因为它总是
显示图像，无论背景如何（您可以将其组合
如果它有 alpha 值，则带有背景），并且它有特殊的
设置来处理按钮大小调整。

至于输入区域的样式...假设您的 QComboBox 是可编辑的，则输入区域只是一个 QLineEdit。因此，您始终可以通过这种方式将样式表分配给行编辑，

comboBox->lineEdit()->setStyleSheet(your style sheet);

我希望有所帮助。