Question

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

正常
鼠标悬停
鼠标按下

我想为按钮的左侧，右侧和中侧（拉伸侧）设置一个QHBoxLayout 3个部分。

在中等大小的内部，我希望有一个标签来显示文字。

我需要此按钮才能进行“点击”活动。

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

我正在寻求帮助。

Answer 1

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

           |              |
Left Image | Middle Image | Right 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;}");

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

2 个答案: