c++ - 如何创建 3 状态自定义按钮？

Question

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

• 普通的
• 鼠标移到
• 鼠标按下

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

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

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

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

我正在寻求帮助。

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

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

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