6

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

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

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

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

4

6 回答 6

1

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

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

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

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

希望这会有所帮助。

于 2014-07-30T19:40:16.387 回答
1

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

首先，添加一个新的成员变量“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 或其他正实数。从视觉上看，它确实增加了文本和图标之间的间距。

于 2021-12-21T22:20:25.953 回答
1

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

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

于 2015-10-02T19:50:02.847 回答
1

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

解决方案：

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

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

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

于 2016-08-17T14:25:19.640 回答
0

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

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

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

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

于 2021-03-08T10:32:35.933 回答
0

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

于 2015-12-24T10:37:39.107 回答