具体的 QPushButton 样式

Posted 2023-02-21

【中文标题】具体的 QPushButton 样式

【英文标题】：Specific QPushButton style

【发布时间】：2012-11-19 06:03:20

【问题描述】：

如何自定义 QPushButton 或 QToolButton 的外观，使其看起来像elementaryos 的网页“按钮”？

我真正想要的只是特征图像位置和它侧面的文字，也许如果我幸运的话我也可以得到这样的边框，但我真的不需要标题下方的小描述:) 我可以只使用 StyleSheets，还是必须继承 QPushButton/QAbstractButton/类似的东西？我已经到处搜索了，但没有发现没有像在固定地方画东西这样的定制级别，这正是我不想要的。

编辑： 我真的很想要一个解决方案，它会给我一个可定制的按钮，而不是一个固定的图像按钮，在

的轨道上的东西

MainWindowButton(QString(title), /*opt*/QString(description), QImage(icon));

【问题讨论】：

答案将取决于更具体的要求。您可以使用样式表和两个图像准确地实现您在图像中看到的内容； “向上”图像和“向下”（按下）图像。但是，如果您只想指定文本和图标图像并让按钮小部件像示例一样对其进行风格化，那么这将需要一个更复杂的解决方案，可能是子类。您应该编辑您的问题，使其更具体。

【参考方案1】：

有许多可行的方法。

您可能首先考虑尝试使用普通的QPushButton 和QVBoxLayout 组成一个解决方案。您可以添加三个QLabels；一个用于标题文本，一个用于标题文本，一个用于图像。一些 CSS 可能用于渲染按钮的背景图像向上和向下，更多 CSS 用于设置两个标签中的文本样式并将图像定位在第三个标签上，但您会发现标签不会向下移动按钮被点击。

我认为最好的解决方案是直接绘画。您可以通过子类化QWidget 并覆盖paintEvent() 来实现此目的。为 up 状态渲染所有内容，为 down 状态渲染所有内容。

您可以通过将 up 和 down 状态渲染为 QImage 并使用 CSS 为 QPushbutton 设置样式来实现此目的，而无需子类化。

这些方法也有多种组合。

【讨论】：

我最终使用了 QPainter 并手动绘制了按钮，并且我在一个灵活的 MainButton(QString Title, QString Descrition, QImage Icon) 类中得到了这一切！ :D 谢谢！

【参考方案2】：

您可以将背景设置为白色，图标位于右上角.您需要制作一个基本上看起来像图标的自定义图像，左侧和顶部有几个像素宽度，是白色的

http://doc.qt.digia.com/qq/qq20-qss.html#theboxmodel

您可能需要覆盖paintEvent 的文本。