我该如何创建一个三态自定义推按钮？

Question

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

• 正常状态
• 鼠标悬停状态
• 鼠标按下状态

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

在中间位置，我想放置一个标签以显示文本。

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

我一直在尝试很多方法来完成这个任务，包括使用从QWidget自定义小部件或使用样式表为QPushButton添加样式，但是我无法实现三种鼠标状态下的三张图片以及点击事件。

我需要帮助。

- Phil

---

可能有点过度，但是考虑使用3个QState的QStateMachine怎么样？ - dschulz

Answer 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;
}

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

- alexisdm

---

这很棒。真的。非常好的答案！非常感谢！我非常需要这个，这太棒了！ - Phil

Answer 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;}");

- Magical

---

嗨，@newUser。感谢您的回答，但我认为它无法解决我的问题。我想让我的自定义按钮在文本增长或缩小时可调整大小，因此我需要每个状态的3个图像，正如我在问题中所述：左侧、中间（展开）、右侧。因此，我认为我需要扩展QWidget并创建一个具有布局的自定义对象。但是，我不知道如何在鼠标状态下更改qwidget的布局和隐藏其余部分，并包含“clicked”信号。 - Phil