一、概述
根据《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"
"}"));
}
}
现在大功告成,我们来看看效果吧!