[干货]Qt中利用qss样式化qspinbox，qtimeedit等控件

[VincentKeh]

本文出自我的博客 http://www.hookr.cn/qt_qss_qspinbox.html 欢迎大家多多访问交流！！
正文：
网上介绍qss的的文章真心的很少，搜遍的国内外网站，找到了qspinbox，qtimeedit等控件的stylesheet样式方法。

原本的qspinbox和qtimeedit等控件样式如下图：



加和减的箭头都放在了右侧，而且比较小，点起来非常的不方便。而且现在又是往一个7寸屏幕的板子上写应用程序，这种样式的qspinbox确实不符合要求。我想要是样式是，把上下的箭头放到左侧和右侧，分别对应加和减，这样按钮比较大，操作起来就比较方便了。

其实对于qss我挺有信心，知道怎么去更改样式，但是不知道对谁更改样式。比如qspinbox要更改上下箭头的样式，就得用选择器选择它们，然后给他们定样式。这种在控件里面的上下箭头叫做子控件，很多时候是不知道子控件叫什么。比如qtableview的表头，就是它的子控件，不知道名字，没法应用样式，网上介绍的也都是简单的例子。

后来在老外的论坛上找到了，qspinbox的子控件名字，也就是上下哪两个箭头分别叫：up-button和down-button。把我的QSS样式代码贴到下面，大家可以参考，效果如下图：

原理和qradiobutton样式化一样，就是替换按钮按下和抬起的图片，我用的是宽12px，高20px，效果比较赞，很符合我的要求

/*spinbox 抬起样式*/
QTimeEdit::up-button,QDoubleSpinBox::up-button,QSpinBox::up-button {subcontrol-origin:border;
	subcontrol-position:right;
	image: url(:/ico/up_right.png);
	width: 12px;
	height: 20px;		
}
QTimeEdit::down-button,QDoubleSpinBox::down-button,QSpinBox::down-button {subcontrol-origin:border;
	subcontrol-position:left;
	border-image: url(:/ico/up_left.png);
	width: 12px;
	height: 20px;
}
/*按钮按下样式*/
QTimeEdit::up-button:pressed,QDoubleSpinBox::up-button:pressed,QSpinBox::up-button:pressed{subcontrol-origin:border;
	subcontrol-position:right;
	image: url(:/ico/pushed_right.png);
	width: 12px;
	height: 20px;		
}
 
QTimeEdit::down-button:pressed,QDoubleSpinBox::down-button:pressed,QSpinBox::down-button:pressed,QSpinBox::down-button:pressed{
	subcontrol-position:left;
	image: url(:/ico/pushed_left.png);
	width: 12px;
	height: 20px;
}

[snolkmg]

感谢感谢 楼主帮忙解决了一个想了很久的问题

[pslov]

学习了，谢谢分享

[枪炮与玫瑰GunsNRose]

强大的 QSS， 谢谢分享，赞一个

[GreenArrowMan]

学习学习

[louis_liux]

话说，你这个图片去哪里下载呢

[王桑的一天]

希望楼主能把所有控件的可用部分名称汇总一下

[caimikecai]

引用 5 楼 louis_liux 的回复:

话说，你这个图片去哪里下载呢

http://www.easyicon.net/

[qq_25951075]

我试了一下，为啥样式没变化

[这是一个正经昵称]

那我也分享个东西吧： QSS 美化一些控件的时候 下拉三角 可以用角度渐变画出来。 另外，不是极其复杂的UI ，都可以用PPT画出来。 扁平化不多说。 有点立体感的可以用不同渐变色叠加的方式做出来。 然后把需要的自选图形选中 -> 组合 再保存为图片 比找快朵了