目錄

• 設置QToolButton圖標位置
• • 設置圖標處于左側位置向右移動一段距離
  • 設置圖標處于中間位置文字向下移動一段距離
  • 小遺憾

設置QToolButton圖標位置

QToolButton通過left，top等方式設置的圖標，緊靠按鈕邊緣，視覺效果并不好。
通過網上查找資料和摸索，得出了可行的一種方式，設置按鈕的margin和padding；
修改了圖標的顯示位置，可以設置到想要的位置。

我使用的圖標尺寸在20*20以內。
按鈕上有4個文字，加上圖標，我設置的按鈕寬度是105px；

設置圖標處于左側位置向右移動一段距離

使用默認圖標靠左方式設置圖標

background:url(:/image/image/icon.png) left no-repeat;

效果圖：

圖標太靠左，看著視覺效果并不是太好。

通過設置margin-left和padding-left，并設置圖片為居中對齊的方式，能達到下圖效果。

background:url(:/image/image/icon.png) center no-repeat;

我的按鈕寬度105px，設置margin-left:-75px;即把圖標從中間位置向左拉了75px的位置。
再設置文字位置，padding-left:85px; 即文字從圖標的右邊10px位置開始顯示。

大家可以這樣設定： margin-left = -(按鈕width-30)px，padding-left: (按鈕width-20)px。

#toolButton { margin-left:-75px; padding-left:85px; background:url(:/image/image/icon.png) center no-repeat; font-size: 14px; border: none; }

實現效果：

設置圖標處于中間位置文字向下移動一段距離

#toolButton{ min-width:55px; min-height:45px; border:none; padding-top:50px; margin-top:-25px; margin-left:25px; background:url(:/image/image/icon.png) center no-repeat; }

運行結果：

小遺憾

有個小遺憾就是這樣不能設置border-radius，因為margin推出去的部分，并不在border的范圍內，設置border-radius也不會變成圓角。
如果有知道其他方法的伙伴也可以給我評論，互相交流。

總結

以上是生活随笔為你收集整理的QToolButton设置图标位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。