qss样式表之QPushButton
先来个⽰例
QPushButton{
font-family:"Microsoft YaHei";
font-size: 16px;
color: #BDC8E2;
background-color: #2E3648;
}
效果图如下：
上⾯的例⼦是基本的样式设置，下⾯我们将探讨 QPushButton 各种样式设置：
字体样式
font-family:"Microsoft YaHei";
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #BDC8E2;
font: bold italic 18px "Microsoft YaHei";
font-family为设置字体类型，标准形式需要加双引号，不加也可能会⽣效，具体看系统是否⽀持，中英⽂都⽀持，但要保证字体编码⽀持，⼀般程序编码为"utf-8"时没问题。
font-size为设置字体⼤⼩，单位⼀般使⽤ px 像素
font-style为设置字体斜体，italic 为斜体， normal 为不斜体
font-weight为设置字体加粗，bold 为加粗， normal 为不加粗
text align centerfont为同时设置字体 style weight size family 的样式，但是 style 和 weight 必须出现在开头，size 和 family 在后⾯，⽽且size 必须在 family 之前，否则样式将不⽣效，font 中不能设置颜⾊，可以单独设置 style weight 和 size，不能单独设置family
color为设置字体颜⾊，可以使⽤⼗六进制数表⽰颜⾊，也可以使⽤某些特殊的字体颜⾊：red, green, blue 等，或者使⽤rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显⽰颜⾊可以设置值为透明 transparent
注意：字体颜⾊⽤的是 color 属性，没有 font-color 这个属性的
⽂字位置
text-align: left center;
padding-left: 10px;
padding-top: 8px;
padding-right: 7px;
padding-bottom: 9px;
text-align为设置⽂字位置，只⽀持 left right top bottom center；值 left right center 为设置⽔平位置，值 top bottom center 为设置垂直位置
padding-left为设置⽂字距离左边边界的距离
padding-top为设置⽂字距离顶边边界的距离
padding-right为设置⽂字距离右边边界的距离
padding-bottom为设置⽂字距离底边边界的距离
Tip: 特殊的位置可以使⽤ text-align 来设置，如果要精确设置位置只能通过 padding 来设置，⼀般 padding-left 相当于 x 坐标，padding-top 相当于 y 坐标，设置这两个就可以显⽰任意位置显⽰了（默认情况下⽂字是上下左右都居中显⽰的）
边框样式
border-style: solid;
border-width: 2px;
border-color: red;
border: 2px solid red;
border-style为设置边框样式，solid 为实线， dashed 为虚线， dotted 为点线， none 为不显⽰（如果不设置 border-style 的话，默认会设置为 none）
border-width为设置边框宽度，单位为 px 像素
border-color为设置边框颜⾊，可以使⽤⼗六进制数表⽰颜⾊，也可以使⽤某些特殊的字体颜⾊：red, green, blue 等，或者使⽤ rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显⽰颜⾊可以设置值为透明 transparent
border为同时设置 border 的 width style color 属性，但值的顺序必须是按照 width style color 来写，不然不会⽣效！
也可以单独设置某⼀条边框的样式
border-top-style: solid;
border-top-width: 2px;
border-top-color: red;
border-top: 2px solid red;
border-right-style: solid;
border-right-width: 3px;
border-right-color: green;
border-right: 3px solid green;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom: 2px solid blue;
border-left-style: solid;
border-left-width: 3px;
border-left-color: aqua;
border-left: 3px solid aqua;
border-top-style为设置顶部边框样式
border-top-width为设置顶部边框宽度
border-top-color为设置顶部边框颜⾊
border-top为设置顶部边框 width style color 的属性，原理和 border ⼀致
其它三个边框：right bottom left 边框的设置都相同
设置边框半径
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-radius: 20px;
border-top-left-radius为设置左上⾓圆⾓半径，单位 px 像素
border-top-right-radius为设置右上⾓圆⾓半径，单位 px 像素
border-bottom-left-radius为设置左下⾓圆⾓半径，单位 px 像素
border-bottom-right-radius为设置右上⾓圆⾓半径，单位 px 像素
border-radius为设置所有边框圆⾓半径，单位为 px 像素，通过圆⾓半径可以实现圆形的 PushButton
背景样式
background-color: #2E3648;
background-image:url("./image.png");
background-repeat: no-repeat;
background-position: left center;
background:url("./image.png") no-repeat left center #2E3648;
background-color为设置背景颜⾊，可以使⽤⼗六进制数表⽰颜⾊，也可以使⽤某些特殊的字体颜⾊：red, green, blue 等，或者使⽤ rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显⽰颜⾊可以设置值为透明transparent
background-image为设置背景图⽚，图⽚路径为 url(image-path)
background-repeat为设置背景图是否重复填充背景，如果背景图⽚尺⼨⼩于背景实际⼤⼩的话，默认会⾃动重复填充图⽚，可以设置为 no-repeat 不重复，repeat-x 在x轴重复，repeat-y 在y轴重复
background-position为设置背景图⽚显⽰位置，只⽀持 left right top bottom center；值 left right center 为设置⽔平位置，值 top bottom center 为设置垂直位置
background为设置背景的所有属性，color image repeat position 这些属性值出现的顺序可以任意
下⾯是⼀个综合⽰例
QPushButton{
font-family:"Microsoft YaHei";
font-size: 16px;
color: #BDC8E2;
font-style: italic;
font-weight: bold;
text-align: left center;
padding-left: 25px;
padding-top: 0px;
border-style: solid;
border-width: 2px;
border-color: aqua;
border-radius: 20px;
background-color: #2E3648;
background-image:url("./image.png");
background-repeat: no-repeat;
background-position: left center;
}
效果图
接下来，我们对 QPuahButton 进⾏动态样式设置
⿏标悬浮时的样式
QPushButton:hover{
color: red;
border-color: green;
background-color: aqua;
}
⿏标点击时的样式
QPushButton:pressed{
color: green;
border-color: blueviolet;
background-color: black;
}
按钮禁⽌时的样式
QPushButton:disabled{
color: blue;
border-color: brown;
background-color: aqua;
}
下拉菜单
对于 QPushButton，可以给它设置添加⼀个下拉菜单，这需要调⽤ QPushButton 的 setMenu() ⽅法，当菜单设置成功后，QPushButton 就会默认添加⼀个 menu-indicator 下拉菜单指⽰器图标，我们可以对这个菜单图标进⾏样式修改
QPushButton::menu-indicator{
image:url(myindicator.png);
subcontrol-position: right center;
subcontrol-origin: padding;
right: 10px;
top: 15px;
}
image为设置菜单指⽰器图标
subcontrol-position为设置菜单指⽰器图标的位置，如果不设置的话会默认放在右下⾓处
subcontrol-origin为设置菜单指⽰器图标与按钮之间的停靠位置，默认为 padding
right top left bottom为设置菜单指⽰器图标距离按钮四个位置的距离
当然下拉菜单指⽰器图标也有动态样式
QPushButton::menu-indicator:hover{
image:url(./image1.png)
}
QPushButton::menu-indicator:pressed{
image:url(./image2.png)
}
QPushButton::menu-indicator:open{
image:url(./image2.png)
}
对于 menu-indicator 来说 pressed 和 open 原理相同

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。