通过样式表自定义按钮外观

一、概述

        根据《C++ GUI QT4编程》第二版，自定义QT控件的外观有两种方式：1、使用样式表；2、子类化QStytle

现在的需求是将QPushButton的外观定义成如下的样子：

        

       具体的需求还包括：

       当鼠标在button上时，颜色要改变；
       当按下时，颜色要加深；
       如果按下进入另外的状态，还要能改变外观；例如变成：
       

      需求还不算难，下面就利用样式表对QPushButton进行改造吧。

二、主要内容

     1、设计好图片

      根据按钮的用途、所包含的状态设计好图片。如下图所示：

  

     2、添加资源

     用QT设计师打开窗体文件，右键点击QPushButton，选择"改变样式表"，如图所示：

点击左上角的铅笔，为样式表添加图片资源：

添加完成后如下图所示：

3、使用样式表

下面的代码就定义了一般状态、鼠标停留，按下和禁止四中状态对应的图片显示。

可以看到上面有添加资源、添加渐变、添加颜色、添加字体个菜单，大家可以参考官网并自行摸索。

编辑样式表之后，可以在生成文件ui_mywindow.h中看到相关的代码：

记住，并不能直接在该文件中修改代码，ui_mywindow是自动生成的，编译时会忽略所有的改变！

到目前为止，似乎一切顺利。但是如果要改变图片系列怎么办？例如将转换为。可以利用setSytyleSheet方法，重新设置样式表。示例代码如下：

//设置播放按钮的图片
//因为播放/暂停对应不同的图片系列
void MyWindow::setPlayPauseBtnState(){

	int state = getPlayState();
	if (state==0)
	{
		ui->PlayPause->setStyleSheet(QLatin1String("QPushButton{border-image: url(:/pause/pause_common.png);}\n"
			"QPushButton:hover{\n"
			"border-image: url(:/pause/pause_hover.png);\n"
			"}\n"
			"QPushButton:pressed{\n"
			"border-image: url(:/pause/pause_down.png);\n"
			"}"));
	} 
	else
	{
		ui->PlayPause->setStyleSheet(QLatin1String("QPushButton{border-image: url(:/play/play_common.png);}\n"
			"QPushButton:hover{\n"
			"border-image: url(:/play/play_hover.png);\n"
			"}\n"
			"QPushButton:pressed{\n"
			"border-image: url(:/play/play_down.png);\n"
			"}"));
	}
}

现在大功告成，我们来看看效果吧！