QT中的自定义按钮答案

【问题标题】：Customise button in QTQT中的自定义按钮
【发布时间】：2020-10-23 19:38:09
【问题描述】：

我需要在 qt 中创建一个切换按钮，它应该如下图所示。它应该在打开时显示 ON 图像并保持此状态，直到再次切换。它应该在关闭的情况下显示关闭图像。请帮我解决这个问题。

【问题讨论】：

您可以使用自定义 Widget 类并在绘图处理程序中绘制这些图像，或者您可以使用更简单的方法在 QT 中使用级联样式表，请参阅我的答案

标签： c++ qt qwidget qpushbutton

【解决方案1】：

最简单的方法是将开关图像作为资源添加到您的项目中然后将按钮设置为 checkable 并在其属性中设置图像是否被选中时渲染..（在 icon -> selected on 和选择关闭）

当然，您已经创建了具有适当几何形状的图像...在屏幕截图中它们看起来很小，因为我从您的帖子中借用了它们.. :)

【讨论】：

图标仍然留下可见的按钮边框和文本，这需要一些更改和样式表才能摆脱。根据 OP 写的内容，使用border-image 属性更可取

【解决方案2】：

您可以将图像用作图标（遗憾的是，默认情况下它不会随按钮缩放），创建一个类来在处理程序中为绘制事件绘制这些图像，或者您可以在 QSS 中使用这些图像样式表。 QSS 是 Qt 的 GUI 元素的 CSS 2.0 模拟。

请注意，在使用样式表后，对所述元素的视觉效果的所有更改也应通过更改样式表来完成。

这些样式可以通过表单编辑器通过右键单击小部件并选择“更改样式表”来设置，也可以通过调用setStyleSheet 直接通过代码设置，具体取决于您喜欢的工作流程。

button->setStyleSheet(
    "QPushButton {  border-image: url(:/Resources/chbUnchecked.png); }"
    "QPushButton::checked { border-image: url(:/Resources/chbChecked.png); }" );

border-image 将图像缩放到边框限制，替换标准边框。还有一个 background-image 可以定期重复填充小部件的表面。

仅对可检查按钮限制此更改：

button->setStyleSheet(
    "QPushButton[checkable="true"] {    border-image: url(:/Resources/chbUnchecked.png); }"
    "QPushButton::checked[checkable="true"] {   border-image: url(:/Resources/chbChecked.png); }" );

:/Resources/ 是应用资源中的路径。

QSS 语法：https://doc.qt.io/Qt-5/stylesheet-syntax.html

请注意，QSS 具有选择器，因此它具有与 CSS 相同的“级联”能力。您可以根据 GUI 上的分层位置、类继承、类名、准状态和名称来批量分配样式。

如果您将上述样式设置为一个窗口，则该窗口内的所有QPushButton 实例都会指定样式。如果为此类 Button 定义一个新类，则可以使用其名称代替标准按钮类，尽管基类的 QSS 将适用于它。

【讨论】：