QT樣式設置之 QSpinBox樣式中 按鈕箭頭變換位置

網上介紹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;
}

轉自:https://bbs.csdn.net/topics/391821571?page=1

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章