如何使用样式表更改 QPushButton 图标/文本间距？答案

【问题标题】：How to change QPushButton icon/text spacing with stylesheets?如何使用样式表更改 QPushButton 图标/文本间距？
【发布时间】：2013-06-25 02:26:53
【问题描述】：

我对 Qt 的样式表方法相当陌生，我希望调整 QPushButton 上图标和文本之间的间距。

这是我指的差距：http://imageshack.us/scaled/thumb/593/4kem.png（stackoverflow 还不让我发布图片）

QPushButton {
   qproperty-icon: theme_url("/button_action/add");
   qproperty-iconSize: 14px; 
}

有没有可以用来调整这个空间的参数？我试过margin、padding、spacing？也许有一个不同的选择器可以用来抓取图标？

【问题讨论】：

我在样式表中没有看到任何有用的东西，也许你可以在按钮的文本中使用空格？ ;)
系统中有很多按钮，所以我希望有一个一站式的答案，而不是必须手动更改它们......
您可以将图标修改为更宽以弥补差距吗？据我所知，没有这样的样式表属性。您可以根本不在按钮上设置文本和图标，而是在按钮上设置布局并插入 2 个标签，1 个用于图标，1 个用于文本
请重新发布图片。链接似乎已损坏。

标签： qt user-interface qtstylesheets

【解决方案1】：

实际上，使用 QPushButton 时，您很不走运。您可以在 qt documentation 中找到用于设置按钮样式的完整工作选项列表（我假设您使用的是 qt5，但它也适用于其他版本）。

如果您想对图标进行更多控制，通常建议您将 QPushButtons 与 QToolButtons 交换，它们完全相同，只是它们具有使它们与工具栏兼容的额外功能 - 并且 - 它们具有更多图标放置选项。但这可能对您不起作用，因为as you can see 它们的样式与 QPushButtons 完全相同。但是请查看允许您移动图标的“toolButtonStyle”参数。

列表中的下一个是更改艺术品。如果您想要的只是更多空间，那么只需将额外的空像素添加到艺术品中。这确实伤了完美主义者的心，但很有效。

列表中的下一个是继承 QPushButton 并自己覆盖绘制。听起来比它更令人生畏。 Qt 中的子类化已经成为一种习惯，而且效果很好。这是关于子类化问题的 jiffie 中的tutorial i googled（对于 4.8，但对于 5 应该大致相同）。它甚至涵盖了覆盖绘制事件。

希望这对您有所帮助。

【讨论】：

【解决方案2】：

至少在 Qt5.5 中（我希望这可能会在未来发生变化），除了覆盖绘制事件，这很复杂，我认为只是一件简单的事情就很混乱，没有固有的 Qt 方法来移动该图标这里或那里的几个像素（小的调整）。如果您删除图标并使用样式表将background 设置为资源URL 中的图标，则可以在样式表中使用background-position 属性，但不幸的是它只接受center、left 等字词.，不是像素调整。

以下是我解决此问题的方法。我创建了比我需要的稍大的透明 PNG，我在 PNG 内的图标本身周围有 4px 的边距。然后，我只是将图标移动到画布内并将其重新加载到项目资源文件中，然后使用 QPushButton 设计器中的图标属性再次映射它，并且成功了。现在，我的图标在左侧与旁边的文本正确对齐。我什至可以扩大图标和文字之间的差距。

【讨论】：

【解决方案3】：

从 Qt5.7 开始，我不知道图标/文本间距的任何内置功能。我通常做的就是在图片右侧留出更多空间，并相应地设置按钮的图标大小。

解决方案：

将您的图标文件调整为 32*16 像素，但保持其内容不变。
在您的按钮上调用 setIconSize(QSize(32, 16))。

结果：现在它的图标和文本之间有 16 像素的空白空间。 32 像素 只是我的示例，您当然可以将附加尺寸设置为适合您的风格。

如果您想在所有按钮元素上应用它，只需创建一个在构造函数中自动执行此操作的小子类。确实没有必要为此重写 paintEvent 方法。

【讨论】：

【解决方案4】：

这是一种自定义文本和图标间距的机会主义方法。目前还没有常规的方法来改变宽度，所以我们需要在图标的右侧添加一个透明区域，用于绘制设备。

首先，添加一个新的成员变量“m_spacing”(double)，并在构造函数中将其初始化为0.0，作为扩展宽度的一个因素。然后，覆盖“paintEvent”、“sizeHint”和“minimumSizeHint”。

class CPushButton : public QPushButton {
    Q_OBJECT
public:
    double spaceRatio() const;
    void setSpaceRatio(double ratio);
protected:
    double m_spacing;
    void paintEvent(QPaintEvent *event) override;

......

QSize CPushButton::sizeHint() const {
    QSize sz = QPushButton::sizeHint();
    int offset = iconSize().width() * m_spacing;
    return QSize(sz.width() + offset, sz.height());
}

QSize CPushButton::minimumSizeHint() const {
    QSize sz = QPushButton::minimumSizeHint();
    int offset = iconSize().width() * m_spacing;
    return QSize(sz.width() + offset, sz.height());
}

void CPushButton::paintEvent(QPaintEvent *event) {
    QSize sz = iconSize();
    QPixmap tmp = icon().pixmap(sz); // Get the pixmap to apply with right size

    sz.rwidth() *= 1 + m_spacing;    // Multiply width

    QPixmap exp(sz);                 // Expended
    exp.fill(Qt::transparent);

    QPainter painter(&exp);
    painter.drawPixmap(QRect(QPoint(), tmp.size()), tmp);

    QStylePainter p(this);            // From Qt source
    QStyleOptionButton option;        // From Qt source
    initStyleOption(&option);         // From Qt source

    option.icon = QIcon(exp);         // Change to real icon
    option.iconSize = sz;             // Change to real size

    p.drawControl(QStyle::CE_PushButton, option); // From Qt source
    
    Q_UNUSED(event)
}

现在您可以创建一个CPushButton 实例并将spacingRatio 设置为0.1 或其他正实数。从视觉上看，它确实增加了文本和图标之间的间距。

【讨论】：

【解决方案5】：

最简单的方法是创建您自己的继承自 QPushButton 的类并覆盖 PaintEvent，然后手动将图标的像素图放置在您想要的任何位置。

【讨论】：

【解决方案6】：

这是实现“文本和图像之间的空间”的解决方法：

QPushButton{
border:0px;
image: /*your url*/;
padding-top:16px;
image-position:top;

text-align:bottom;
padding-bottom:10px;
}

由于qss不支持相对大小，需要实现resize()在大小变化时改变样式表，以获得文本和图像之间的固定空间。

【讨论】：