【QSS样式表 - ③】：QSS常用属性

QSS常用属性

字体样式

以上也可以直接写成一行：

font: 字体风格 字体粗细 字体大小 字体名称;

QSS示例

新建一个 QMainWindow 窗口程序，拖入两个QLabel控件：

代码：

#label {
	color: red;
	/*字体*/
	font-family: "Microsoft YaHei";
	/*字体加粗*/
	font-weight: bold;
	/*字体尺寸*/
	font-size: 24pt;
	/*字体风格*/
	font-style: italic;
}

#label_2 {
	font: italic bold 36pt "宋体";
}

边框样式

注意：只要遵守上 右 下 左的原则，都遵循以下规则。（以 border-width为例）

border-width: 2px;				表示四个边框都一样为2px
border-width: 2px 15px;			表示上下为2px，左右为15px
border-width: 2px 10px 2px;		表示上为2px，左右为10px，下为2px

每条边还可以分开设置：

1. border-width

    border-top-width
    border-right-width
    border-bottom-width
    border-left-width
   

2. border-style

    border-top-style
    border-right-style
    border-bottom-style
    border-left-style
   

3. border-radius

    border-top-left-radius
    border-top-right-radius
    border-bottom-left-radius
    border-bottom-right-radius
   

也可以直接写成一行：

border: 边框宽度 风格 边框颜色;

QSS示例

新建一个 QMainWindow 窗口程序，拖入三个QLabel控件：

代码：

#label {
	border-width: 2px 5px 10px 15px;	 /*上 右 下 左*/
	border-color: green blue red;	/*上 左右 下*/
	border-style: dotted dashed;	/*上下 左右*/
}

#label_2 {
	border-width: 1px; /*全部为1px*/
	border-color: green yellwo; /*上下为 green 左右为red*/
	border-style: solid;	/*全部为solid*/
	border-radius: /*圆角半径*/
}

#label_3{
	border: 1px solid red; /**一行设置边框/
}

盒子模型

在 QSS（Qt Style Sheets）中，盒子模型是用于描述和控制界面元素（如按钮、文本框等）外观的一个重要概念。盒子模型将每个界面元素视为一个矩形框，框的各个部分可以通过不同的属性进行样式设置。盒子模型主要由四个部分组成：margin（外边距）、border（边框）、padding（内边距）和内容区域。

• 简单理解，如下图所示，将一个按钮放入QFrame窗口中，黄色的部分即为 margin，按钮的边框即为 border，边框到 PushButton 内容的区域即为 padding。
  
• 设置了 padding-top: 20px; 即设置按钮的内容的上部分与边框的距离增加了20px。
  
• 设置 margin-top: 30px; 即设置按钮的上部分外边距增加了30px（可以理解为按钮的位置不变，上面被压缩了30px。
  

每条边还可以分开设置

1. margin

    margin-top
    margin-right
    margin-bottom
    margin-left
   

2. padding

    padding-top
    padding-right
    padding-bottom
    padding-left
   

背景颜色、背景图片

background-

也可以直接写一行：

background: 背景颜色 背景图片 重复 图片位置;

QSS示例

新建一个 QMainWindow，拖入4个 QWidget 控件，并设置其背景为绿色：

代码：

#widget, #widget_2, #widget_3, #widget_4{
	background-color: green;
}

#widget{
	background-image: url(:/images/images/qss.png);
	background-position: right center; /*靠右居中*/
	background-repeat: no-repeat; /*不平铺*/
}

#widget_2{
	/*设置背景图片 xy方向平铺 居右下角*/
	background: url(:/images/images/qss.png) repeat right bottom;
}

#widget_3{
	/*设置背景图片 不平铺 居右下角*/
	background: green url(:/images/images/qss.png) no-repeat center;
}

#widget_4{
	/*图片拉伸需要用到 border-image */
	border-image: url(:/images/images/qss.png);
}

border-image

• border-image 属性允许定义图像的切割、缩放和填充方式，从而实现更加丰富的视觉效果。
  
  下面的 border-top 等为窗体的边距
  

• border-image 属性可以通过4条直线，将一副图像划分为九宫格
  

QSS示例1

新建一个 QMainWindow，放入 QLabel控件：

如下图所示：图片的宽为171px，高为130px。

代码：

QLabel{
	border-image: url(:/images/images/border.png) 10;
}

QSS示例2

如下图所示，当拉伸 QLabel 时图片会变形：

可将代码设置为如下：

QLabel{
	/* 上右下左 全为40 */
	border-image: url(:/images/images/border.png) 40; /* 40相对于图片 */
	
	/* 下面四个边距是相对于窗体的 */
	border-top: 40px transparent;
	border-right: 40px transparent;
	border-bottom: 40px transparent;
	border-left: 40px transparent;
}

为什么这样设置后就不会变形呢？
我们的需求是要求图片的四个角都不变形。

1. 首先 border-image: url(:/images/images/border.png) 50; 将图片进行分割，分成九块。
   

2. 然后，将窗体（即示例中的 QLabel）进行分割，分成九块。

    border-top: 50px transparent;
    border-right: 50px transparent;
    border-bottom: 50px transparent;
    border-left: 50px transparent;
   

   

3. 最后将图片的九块区域分别放到窗体（QLabel）的九块区域，从上面我们知道，分割后图片的四个角区域和窗体的四个角区域一样，因此放上去后不会有改变，而图片的其他区域比较小，窗体的其他区域比较大时，会自动拉伸填充。因此实现了四个角怎样拉伸都不被影响。

QObject属性

在QSS中设置的属性分为两种：

在设置QSS时，不仅可以设置标准CSS属性，也可以设置QObject定义的属性，设置QObject定义的属性需要属性名前加上 qproperty- 来标识。

QSS示例

代码：

QLabel {
	font-size: 20px;
	font-style: italic;
	color: white;
	background-color: blue;
	qproperty-text: "街三仔";
	qproperty-alignment: AlignCenter;
}