Qt樣式表 2 Qt盒子模型原理

若對c++語法不熟悉，建議參閱本人所著《c++語法詳解》一書，電子工業出版社出版，該書語法示例短小精悍，對查閱c++知識點相當方便，並對語法原理進行了透徹、深入詳細的講解，可確保讀者徹底弄懂c++的原理，徹底解惑c++，使其知其然更知其所以然。此書是一本全面了解c++不可多得的案頭必備圖書。

樣式表把每個部件都被視為4個同心矩形的盒子，如圖13-26所示

1、樣式表的邊框屬性

樣式表的邊框屬性主要描述的是邊框的邊界線，包括邊界線的顏色、樣式(虛線、實線等)、寬度、角落半徑和填充邊框的影象。下面分別介紹這些屬性

注意：由於邊框(border)、填充矩形(padding)、輪廓線(outline)的邊界線預設寬度為0，且樣式為none(即沒有線條)，因此要使其邊界線可見，必須指定邊界線的寬度和樣式，否則邊界線不可見。

(1)、邊框

(2)、邊框顏色

(3)、邊框半徑

(4)、邊框樣式

(5)、邊框寬度

(6)、邊框影象

2、樣式表的邊距屬性

3、樣式表的填充屬性

4、樣式表的輪廓線屬性

示例13.14：理解盒子模型(效果見圖13-27和圖13-28)
//border、outline、padding、background-clip、background-origin屬性的使用
qwidget w; qpushbutton *pb=new qpushbutton("aaa",&w);
pb->move(33,33); pb->resize(333,222);
aa.setstylesheet(
"qpushbutton" //繪製乙個11畫素寬的黃色虛線輪廓線
"qpushbutton:pressed " //背景的原點位於內容矩形
); 
w.resize(400,300); w.show(); return aa.exec(); }

5、邊框影象(border-image)原理

如圖13-29所示，邊框影象被4條虛線劃分為3*3的9個小格，從而把影象分為9個區域。

當使用邊框影象填充部件背景時，4個角(即格仔①、③、⑦、⑨)保持不變，其他5個格仔被拉伸或重複(即平鋪)。

邊框影象(border-image)與背景影象(background-image)的顯著區別是，背景影象不會隨視窗部件的大小而縮放。若同時指定了邊框影象和背景影象，則邊框影象會繪製在背景影象之上。

邊框影象的設計原則如下：

 4條虛線分別使用從上、右、下、左邊緣的距離設定，如圖中top、right、bottom、left所示。

 使用邊框影象還必須明確的設定邊框的寬度(即border-width屬性)，通常把邊框寬度設定為與4條虛線的值相一致，否則，4個角的影象將被適當的拉伸或壓縮以適應邊框的大小。

示例13.15：邊框影象原理(border-image屬性)(效果見圖13-30)
qwidget w;
qpushbutton *pb=new qpushbutton("aaa",&w); pb->move(33,33); pb->resize(300,200);
aa.setstylesheet(
"qpushbutton" ); //必須設定邊框寬度
w.resize(400,300); w.show(); return aa.exec(); }

Qt樣式表 2 Qt盒子模型原理

qt樣式表入門

Qt樣式表學習

QT 樣式表基礎

Qt樣式表 2 Qt盒子模型原理

qt樣式表入門

Qt樣式表學習

QT 樣式表基礎

相關推薦