发帖 回复
返回列表
  • 7806阅读
  • 0回复

[QSS美化实例5] Qt中利用qss样式化qspinbox，qtimeedit等控件 [复制链接]

 上一主题 下一主题
离线chinaboyone
新手上路
 
只看楼主 倒序阅读 楼主  发表于: 2015-09-04
原文出自我的博客 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，效果比较赞，很符合我的要求
  1. /*spinbox 抬起样式*/
  2. QTimeEdit::up-button,QDoubleSpinBox::up-button,QSpinBox::up-button {subcontrol-origin:border;
  3.     subcontrol-position:right;
  4.     image: url(:/ico/up_right.png);
  5.     width: 12px;
  6.     height: 20px;        
  7. }
  8. QTimeEdit::down-button,QDoubleSpinBox::down-button,QSpinBox::down-button {subcontrol-origin:border;
  9.     subcontrol-position:left;
  10.     border-image: url(:/ico/up_left.png);
  11.     width: 12px;
  12.     height: 20px;
  13. }
  14. /*按钮按下样式*/
  15. QTimeEdit::up-button:pressed,QDoubleSpinBox::up-button:pressed,QSpinBox::up-button:pressed{subcontrol-origin:border;
  16.     subcontrol-position:right;
  17.     image: url(:/ico/pushed_right.png);
  18.     width: 12px;
  19.     height: 20px;        
  20. }
  22. QTimeEdit::down-button:pressed,QDoubleSpinBox::down-button:pressed,QSpinBox::down-button:pressed,QSpinBox::down-button:pressed{
  23.     subcontrol-position:left;
  24.     image: url(:/ico/pushed_left.png);
  25.     width: 12px;
  26.     height: 20px;
  27. }
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个