帶陰影的圓形 Label

圓形頭像大家應該都見過不少軟體裡用過吧，例如 qq 的好友列表，網頁裡的人物頭像，有沒有想過在 qt 裡怎麼做到呢？

這一節中就來介紹怎麼實現下圖中的圓形 qlabel，然後擴充套件到給 qlabel 新增陰影效果、模糊效果以及加上邊框:

最核心的就是圓形 qlabel 的實現，有很多種方法能夠做到，這裡使用 qss 來實現:border image + border radius，也就是幾行**的事:

背景: 為了讓背景圖縮放填滿 qlabel，需要使用 border-image 並且設定 qlabel 邊框的寬度為 0

2

3

4

5

6

7

8

9

10

上面的 qss 就能得到左邊第乙個圓形 qlabel 的效果。

雖然使用border: 6px solid gray可以給 qwidget 增加邊框，但是由於上面為了實現圓形 qlabel 時需要把背景圖鋪滿 qlabel，已經把它的邊框寬度設定為 0，所以就不能再使用 border 了。採用曲線救國的辦法，把 qlabel 布局放到乙個 qwidget 裡，並把這個 qwidget 設定為圓形的同時使用 border 加上邊框。因為 qlabel 在 qwidget 中，這樣看起來就像是給圓形 qlabel 加上了乙個邊框，增加下面的 qss 後得到的效果如圖中第三個 qlabel:

2

3

4

5

6

7

8

9

為了效果更好，布局的時候需要設定布局物件的 margin 為 0，避免邊框和 qlabel 之間有間隔。因為背景圖是經過縮放鋪滿 qlabel 的，所以不會完全的平滑，padding: -1px讓 qlabel 擴大一點點，把邊緣繪製到邊框上，效果看起來更好，這些細節必須經過慢慢的調教體驗才能有更深的感觸。

css 中有 box-shadow 新增陰影效果，可惜 qss 中沒有，為了給 qlabel 增加陰影效果，可以使用 qgraphicsdropshadoweffect 來實現:

2

3

4

5

new qgraphicsdropshadoweffect(

this);

shadoweffect->setcolor(qt::darkred);

shadoweffect->setoffset(

0, 0);

shadoweffect->setblurradius(

30);

ui->shadowqlabel->setgraphicseffect(shadoweffect);

模糊效果使用 qgraphicsblureffect 實現:

2

3

4

new qgraphicsblureffect(

this);

blureffect->setblurradius(

6);blureffect->setblurhints(qgraphicsblureffect::qualityhint);

ui->blurqlabel->setgraphicseffect(blureffect);

這裡演示的是 qlabel，有的時候設計的是圓形按鈕 (還要處理 hover, pressed 等狀態)，怎麼實現呢？

css 帶陰影的字

html head title new document title meta name generator content editplus meta name author content meta name keywords content meta name description cont...

qt 視窗帶陰影

qframe frame new qframe this ui.setupui this frame setstylesheet qframe 設定圓角與背景透明 frame setgeometry 5,5,this width 10,this height 10 設定有效範圍框 qgraphics...

畫帶陰影效果的文字

using system using system.drawing using system.drawing.text using system.drawing.drawing2d using system.collections using system.componentmodel using ...