QT样式设置之 QSpinBox样式中按钮箭头变换位置

怼烎@ 2023-07-11 11:26 6阅读 0赞

网上介绍qss的的文章真心的很少，搜遍的国内外网站，找到了qspinbox，qtimeedit等控件的stylesheet样式方法。  
  
原本的qspinbox和qtimeedit等控件样式如下图：

![format_png][]  
加和减的箭头都放在了右侧，而且比较小，点起来非常的不方便。而且现在又是往一个7寸屏幕的板子上写应用程序，这种样式的qspinbox确实不符合要求。我想要是样式是，把上下的箭头放到左侧和右侧，分别对应加和减，这样按钮比较大，操作起来就比较方便了。  
  
其实对于qss我挺有信心，知道怎么去更改样式，但是不知道对谁更改样式。比如qspinbox要更改上下箭头的样式，就得用选择器选择它们，然后给他们定样式。这种在控件里面的上下箭头叫做子控件，很多时候是不知道子控件叫什么。比如qtableview的表头，就是它的子控件，不知道名字，没法应用样式，网上介绍的也都是简单的例子。  
  
后来在老外的论坛上找到了，qspinbox的子控件名字，也就是上下哪两个箭头分别叫：up-button和down-button。把我的QSS样式代码贴到下面，大家可以参考，效果如下图：

![format_png 1][]

原理和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;
    }

转自：[https://bbs.csdn.net/topics/391821571?page=1][https_bbs.csdn.net_topics_391821571_page_1]

QSpinBox\{  
 height:30px;  
 width:30px;  
\}

QSpinBox::up-button  
\{  
 background-image:url(:/images/scroll\_up.png);  
 height: 15px;  
\}  
QSpinBox::down-button\{  
    background-image:url(:/images/scroll\_down.png);  
 height: 15px;  
\}

表 2. 子部件列表  
子部件    描述  
::down-arrow    combo box或spin box的下拉箭头  
::down-button    spin box的向下按钮  
::drop-down    combo box的下拉箭头  
::indicator    checkbox、radio button或可选择group box的指示器  
::item    menu、menu bar或status bar的子项目  
::menu-indicator    push button的菜单指示器  
::title    group box的标题  
::up-arrow    spin box的向上箭头  
::up-button    spin box的向上按钮

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWctYmJzLmNzZG4ubmV0L3VwbG9hZC8yMDE1MDkvMDMvMTQ0MTI5MzEwMl84ODM3ODIucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWctYmJzLmNzZG4ubmV0L3VwbG9hZC8yMDE1MDkvMDMvMTQ0MTI5MzEyOF82MDU1NTAucG5n?x-oss-process=image/format,png
[https_bbs.csdn.net_topics_391821571_page_1]: https://bbs.csdn.net/topics/391821571?page=1