如何创建 3 状态自定义按钮？答案

【问题标题】：How can I create a 3 state custom push button?如何创建 3 状态自定义按钮？
【发布时间】：2012-12-14 04:50:22
【问题描述】：

我需要创建一个自定义按钮，该按钮将具有对应于以下状态的 3 个不同背景图像：

正常
鼠标悬停
鼠标向下

我想要一个QHBoxLayout，按钮的左侧、右侧和中间（拉伸侧）有 3 个部分。

在中间尺寸内，我想有一个标签来显示文字。

我也需要这个按钮有一个“点击”事件。

我一直在做很多搜索来实现这一点，但我真的迷路了。我尝试了很多东西，包括来自 QWidget 的自定义小部件或使用样式表设置 QPushButton 的样式，但我未能为 3 个鼠标状态和单击事件实现 3 个图像。

我正在寻求帮助。

【问题讨论】：

可能有点矫枉过正，但 QStateMachine 和 3 QStates 怎么样？

标签： c++ qt pyqt pyside qpushbutton

【解决方案1】：

您可以使用border-image 属性，为每个状态组合一个图像，如下所示：

| | 左图 |中间图像 |右图 | |

然后通过将左右图像大小指定为边框切片大小和样式表的边框宽度。例如，如果右边的图像是 25 像素宽，而左边的图像是 20 像素，那么您将：

QPushButton {
    border-image: url(:/normal.png) 0 25 0 20 stretch stretch; 
    border-width:0 25 0 20; /* without it, only the middle images would show */
}
QPushButton:hover { 
    border-image: url(:/hover.png) 0 25 0 20 stretch stretch;
}
QPushButton:pressed { 
    border-image: url(:/pressed.png) 0 25 0 20 stretch stretch;
}

这些值表示图像顶部、右侧、底部和左侧之间的距离。

【讨论】：

这很性感。真的。精彩的答案！非常感谢！我找了这么多，这太棒了！

【解决方案2】：

嗯，首先，你应该有 3 个状态的 3 张图片，然后你可以使用函数 setStyleSheet 。

QPushButton *btn = new QPushButton;
btn->setStyleSheet("QPushButton{background:url(:/Resources/pause_nor.png);border:0px;}"
        "QPushButton:hover{background:url(:/Resources/pause_over.png);border:0px}"
        "QPushButton:pressed{background:url(:/Resources/pause_over.png); position: relative;top: 1px; left: 1px;}");

【讨论】：

嗨@newUser。感谢您的友好回答，但我认为它不能解决我的问题。我希望我的自定义按钮可以随着文本的增长或缩小而调整大小，因此我需要为每个状态提供 3 个图像，正如我在问题中所述：左、中（扩展）、右。所以我想我需要扩展 QWidget 并创建一个带有布局的自定义。但我不知道如何更改鼠标状态的 qwidget 布局并隐藏其余部分，并合并“点击”信号。