Qt样式表(2)：Qt盒子模型原理

最新推荐文章于 2024-07-12 08:59:50 发布

hyongilfmmm

最新推荐文章于 2024-07-12 08:59:50 发布

阅读量2k

点赞数 6

分类专栏： Qt 文章标签： Qt样式表 Qt盒子模型 Qt自定义外观

本文链接：https://blog.csdn.net/hyongilfmmm/article/details/83142542

版权

Qt 专栏收录该内容

40 篇文章 141 订阅

订阅专栏

Qt样式表(2)：Qt盒子模型原理

本文为原创文章，转载请注明出处，或注明转载自“黄邦勇帅(原名：黄勇)

本文出自本人原创著作《Qt5.10 GUI完全参考手册》网盘地址：
https://pan.baidu.com/s/1iqagt4SEC8PUYx6t3ku39Q
《C++语法详解》网盘地址：https://pan.baidu.com/s/1dIxLMN5b91zpJN2sZv1MNg

若对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属性的使用
    #include<QtWidgets>
    int main(int argc, char *argv[]){    QApplication aa(argc,argv);
        QWidget w;    QPushButton *pb=new QPushButton("AAA",&w);
        pb->move(33,33);    pb->resize(333,222);
       aa.setStyleSheet(
            "QPushButton{"
            		"background: red url(F:/1i.png);"   	//背景色为红色，背景图片为1i.png
           		"background-repeat: repeat-y;"     	//在y轴方向重复图片
            		"background-position: left;"        	//图片位于左侧
             		"border: 11px solid rgb(1,111,1);" 	//绘制一个11像素宽的绿色实线边框线，注意值的顺序
             		"margin:22px;"     				//部件的边距为22像素
            		"padding:22px;"       				//部件填充距离为22像素
            		"background-clip:margin;"  			//背景色填充整个边距矩形
            		"background-origin:margin;"   		//背景图片的原点位于边界矩形
            		"outline:11 dashed rgb(111,111,1);}" 	//绘制一个11像素宽的黄色虚线轮廓线
            "QPushButton:pressed {"   				//当按钮按下时的样式
          		"background-color: rgb(255,1,255);" 	//背景色为黄色
            		"background-clip:border;"       		//背景色填充边界矩形
            		"background-origin:content;}"    	//背景图片的原点位于内容矩形
            );  
        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)
#include<QtWidgets>
int main(int argc, char *argv[]){    QApplication aa(argc,argv);
QWidget w;
QPushButton *pb=new QPushButton("AAA",&w);   pb->move(33,33);  pb->resize(300,200);
aa.setStyleSheet(
"QPushButton{"
/*设置边框图像。其上、右、下、左的边缘距离分别为15,25,15,25，除4个角外，其余区域的图像被重复绘制(平铺)，若要使其拉伸，只需把repeat修改为stretch即可。*/
        "border-image:url(F:/1x.png) 15 25 15 25 repeat;"
        "border-width:55;}"    );				//必须设置边框宽度
   		 w.resize(400,300);    w.show();    return aa.exec();		}

在这里插入图片描述
本文作者：黄邦勇帅(原名：黄勇)