0 背景

因為需要對圖片進行裁剪，需要進行上下左右裁剪，而QSpinBox只能進行上下調動，不是十分方便，因此上網查閱資料，發現可以改變qss樣式，來改變按鈕原始的樣式。

1 結果展示

原始樣式

更改qss樣式後，

2 操作

開啟ui設計介面，然後右鍵開啟，選擇改變樣式表

輸入下面的樣式：

QTimeEdit::up-button,QDoubleSpinBox::up-button,QSpinBox::up-button {
	subcontrol-origin:border;
    subcontrol-position:right;
 	image: url(:/icon/add_right.png);
    width: 12px;
    height: 20px;       
}
QTimeEdit::down-button,QDoubleSpinBox::down-button,QSpinBox::down-button {
	subcontrol-origin:border;
    subcontrol-position:left;
 	image: url(:/icon/add_left.png);
    width: 12px;
    height: 20px;
}

為了實現減下加，可以更改為如下樣式:

QTimeEdit::up-button,QDoubleSpinBox::up-button,QSpinBox::up-button {subcontrol-origin:border;
    subcontrol-position:right top;  
    image: url(:/icon/add_top.png);  
    width: 12px;
    height: 24px;
}


QTimeEdit::down-button,QDoubleSpinBox::down-button,QSpinBox::down-button {subcontrol-origin:border;
    subcontrol-position:right bottom;
    border-image: url(:/icon/add_bottom.png);
    width: 12px;
    height: 20px;      
}

3 知識詳解

• subcontrol-origin(操作位置）：空白(margin)、邊框(border)、填充(padding)和內容(content)。
  

• Subcontrol-Position（控制位置）：
  不同按鈕的Subcontrol-Position預設值不同，如QSpinBox的 up-button 的預設值是 right top。

subcontrol-position 水平方向：
left
center
right

subcontrol-position 垂直方向：
top
center
bottom

• image(使用的圖片):【圖片地址】

• width,height（寬高，單位為畫素）