Qt设置美观按钮

一、简述

在上一篇 Qt 之 去除窗口部件被选中后的焦点虚线框 中，我们为了去除焦点虚线框，给按钮的样式加上了如下的样式。

QPushButton
{
    background:red;
    border:0px;
}

这样导致鼠标点击按钮之后没有按下凹陷的反馈感觉是没有点击上去似的。

---

上面两个按钮加上了border:0px;去除了边框，点击之后没有凹陷的感觉，而后两个按钮没有加上border:0px;，保留了按钮原始的点击凹陷的感觉，但是为了去除矩形虚线框，我们不得已加上了border:0px;去除了边框，保留了背景色样式。这一篇中我们将自定义按钮 在鼠标 悬浮、按下、松开后的效果。

二、代码之路

关于自定义按钮 在鼠标 悬浮、按下、松开后的效果，其实代码很简单，主要是需要自己设计按钮的效果图。

/*注册账户图标*/
// 正常状态下显示的效果
QPushButton#pButtonRegistAccount
{
    border-p_w_picpath:url(:/Resources/registeraccount.png);
}
// 鼠标悬浮状态下显示的效果
QPushButton#pButtonRegistAccount:hover
{
    border-p_w_picpath:url(:/Resources/registeraccount_hover.png);
}
// 鼠标按下状态下显示的效果
QPushButton#pButtonRegistAccount:pressed
{
    border-p_w_picpath:url(:/Resources/registeraccount_pressed.png);
}

/*忘记密码图标*/
QPushButton#pButtonForgetPassword
{
    border-p_w_picpath:url(:/Resources/forgetpassword.png);
}

QPushButton#pButtonForgetPassword:hover
{
    border-p_w_picpath:url(:/Resources/forgetpassword_hover.png);
}

QPushButton#pButtonForgetPassword:pressed
{
    border-p_w_picpath:url(:/Resources/forgetpassword_pressed.png);
}

这里我们需要准备几张图片：

---

运行效果图：

---

资源图片：

效果图： 

---

注意

QPushButton
{
    border-p_w_picpath:url(:/Resources/registeraccount_hover.png);
}

如果我们使用如上样式，将会对所有的QPushButton进行设置样式，如果只需要给某一个则用以下格式：

“QPushButton#” + “按钮名称（objectName）”。

我们主要用到了按钮的三种状态，分别是鼠标悬浮、按下、松开 。

// 正常状态或者鼠标松开按钮的状态
QPushButton
{}
//鼠标悬浮在按钮上的状态
QPushButton:hover
{}
//鼠标按下按钮时的状态
QPushButton:pressed
{}

// 我们只需在不同状态下的{}中填写不同的样式，在我们对按钮进行操作时就会显示不同的样式效果。

---

尾

以上只是简单地介绍了对按钮设置的一些样式，其他控件的样式可以查看Qt的文档。

下面是我模仿QQ做的一个界面。欢迎大家随时交流哈 O(∩_∩)O！