自定义QPushButton 样式
之前在项目需要用到自定的QPushButton,于是在网上找了一些方法,有什么设置pattle的,有设置icon的,到最后都不符合要求,而且设置来设置去的多麻烦,有没有什么好的方法可以统一方便的设置,方法当然是有的。下面就用Qt自带的Design中的styesheet来设计自己想要的PushButton!
1、首先打开QCreator,新建个项目,我是新建了个Qt控件项目->Qt QUI 应用.
2、双击mainwindow.ui,在上面拖一个Push Button进去,像这样:
很中规中距的push button,一点一点改吧。
3、QT中窗口对象都有属性什么的都可以在Design里面来设置,我们点选QMainWindow那个对象,我的是mainwindow,右键选择->改变样式表(或者在属性编辑器里找到stylesheet),打开的样式表单像这样的:(空空如也)
4、试着添一句看看,比如
QPushButton#pushButton{
color:red;
}
注意格式,点击确定,成功后要像这样的:
5、能不能改成自定义颜色呢,可以,点击添加颜色,选择个喜欢的颜色,加到color:后面,像这样
QPushButton#pushButton{
color:rgb(193, 35, 255);
}
断句记得加“;”再在color:后添加渐变看看;
6、字体能不能设置呢,点击添加字体,选个喜欢的字体,加到font:后面,像这样
QPushButton#pushButton{
color:rgb(193, 35, 255);
font: oblique 50pt "AR PL UKai TW";
}
记得断句加”;” , 效果应该是这样的
7、能不能改变push button的背景图片呢,这之前,我们肯定要把我们想要的图片加载到资源文件中来,我是加了这两个
然后回到样式表,点击添加资源,双击resource root,可以看到我新添加的两张图片,选择一张添加进去,加到border-image:后面,最后记得加断句“;”
QPushButton#pushButton{
color:rgb(193, 35, 255);
font: oblique 50pt "AR PL UKai TW";
border-image:url(:/an10.png) ;
}
成功后像这样:
8、但是,我们要的按键,应该是pressed的时候换一张图片,好吧,我们可以这样
QPushButton#pushButton{
color:rgb(193, 35, 255);
font: oblique 50pt "AR PL UKai TW";
border-image:url(:/an10.png) ;
}
QPushButton#pushButton::pressed{
border-image:url(:/an11.png);
}
这样点击后就可以切换到自己想要的图片了,像这样
我们还可以为其他pushButton状态设置想要的图片,比如pushButton::disabled
但是我们想去掉外围这个虚线框,可以这样
加上这样一句
outline:none;
9、可能有些人说,这样一个一个pushButton的设置多麻烦,那好,我们再添一个push button
,然后表单里面可以这样写
QPushButton#pushButton, #pushButton_2{
color:rgb(193, 35, 255);
font: oblique 50pt "AR PL UKai TW";
border-image:url(:/an10.png) ;
outline:none;
}
QPushButton#pushButton::pressed, #pushButton_2::pressed{
border-image:url(:/an11.png);
}
注意pushButton是我第一个pushbutton的对象名,pushButton_2是第二个pushbutton。
好的,我是大功告成了,你们呢?