qss样式表之QComboBox

先来个简单的示例

QComboBox { 
    font-family: "Microsoft YaHei"; font-size: 14px; color: #000000; font-style: italic; font-weight: bold; } 

效果图如下

其中：

font-family 为设置字体类型，标准形式需要加双引号，不加也可能会生效，具体看系统是否支持，中英文都支持，但要保证字体编码支持，一般程序编码为”utf-8″时没问题。

font-size 为设置字体大小，单位一般使用 px 像素

font-style 为设置字体斜体，italic 为斜体， normal 为不斜体

font-weight 为设置字体加粗，bold 为加粗， normal 为不加粗

color 为设置字体颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent

注意：字体颜色用的是 color 属性，没有 font-color 这个属性的

对于字体样式，可以把 family size style weight 统一设置在 font 属性中：

font: bold italic 18px "Microsoft YaHei"; 

这里出现的顺序要求是 style 和 weight 必须出现在开头，size 和 family 在后面，而且 size 必须在 family 之前，否则样式将不生效，font 中不能设置颜色，可以单独设置 style weight 和 size，不能单独设置 family

文字位置

padding-left: 10px; padding-top: 8px; padding-right: 7px; padding-bottom: 9px; 

padding-left 为设置按钮(包括选择框和文字)距离左边边界的距离

padding-top 为设置按钮(包括选择框和文字)距离顶边边界的距离

padding-right 为设置按钮(包括选择框和文字)距离右边边界的距离

padding-bottom 为设置按钮(包括选择框和文字)距离底边边界的距离

Tip: 在 qss 中，属性 text-align 对 QComboBox 是不起作用的，一般 padding-left 相当于 x 坐标，padding-top 相当于 y 坐标，设置这两个就可以精确地调节文字的显示位置

下面我们调节字体左间距为 30px

QComboBox { 
      font-family: "Microsoft YaHei"; font-size: 14px; color: #000000; font-style: italic; font-weight: bold; padding-left: 30px; } 

可以看到我们设置的 padding-left 只对按钮框文字起作用，对下拉列表不起作用，后面我们会单独讨论下拉框样式

边框样式

border-style: solid; border-width: 2px; border-color: aqua; 

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

示例如下

QComboBox { 
       font-family: "Microsoft YaHei"; font-size: 14px; color: #000000; font-style: italic; font-weight: bold; padding-left: 30px; border-width: 2px; border-style: solid; border-color: aqua; } 

我们也可以把 border 的 width style color 一起设置在 border 属性中：

border: 2px solid aqua; 

但必须注意的是，值的顺序必须是按照 width style color 来写，不然不会生效！如果不想显示边框可以直接设置 border 属性值为 none

也可以单独设置某一条边框的样式

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 像素，通过圆角半径可以实现圆形的 QComboBox

下面我们来设置左上角和左下角半径

QComboBox { 
         font-family: "Microsoft YaHei"; font-size: 14px; color: #000000; font-style: italic; font-weight: bold; padding-left: 30px; border-width: 2px; border-style: solid; border-color: aqua; border-top-left-radius: 13px; border-bottom-left-radius: 13px; } 

背景样式

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 为设置垂直位置

比如我们给QComboBox左边添加一个背景图片

QComboBox { 
          font-family: "Microsoft YaHei"; font-size: 14px; color: #BDC8E2; font-style: italic; font-weight: bold; padding-left: 30px; border-width: 1px; border-style: solid; border-color: aqua; background-color: #2E3648; background-image: url("./image.png"); background-repeat: no-repeat; background-position: left center; } 

对于 background，可以把 color image repeat position 一起设置在 background 属性中：

background: url("./image.png") no-repeat left center #2E3648; 

color image repeat position 这些属性值出现的顺序可以任意

接下来，我们对 QComboBox 进行动态样式设置

可以设置鼠标悬浮时的样式

QComboBox:hover { 
           color: green; background-color: black; } 

当下拉列表显示出来时的样式

QComboBox:on { 
           color: red; background-color: black; } 

当下拉框按钮可编辑输入文字时的样式

QComboBox:editable { 
           color: white; background-color: #2E3648; } 

想要可编辑样式生效需要设置下拉框按钮为可编辑，比如调用 setEditable() 方法，值得注意的是，一旦可编辑样式生效，其它类似于 hover、on 所设置的样式都会被覆盖掉，除非再次设置为不可编辑

接下来我们讨论下拉框按钮右边的下拉图标

下拉图标属于下拉框按钮的一个子控件 drop-down，而 drop-down 中又包含 down-arrow 子控件，我们用样式表把这两个控件显示出来：

 QComboBox { 
            font-family: "Microsoft YaHei"; font-size: 14px; color: #000000; font-style: normal; font-weight: bold; } QComboBox::drop-down { 
            border: 1px solid red; } QComboBox::down-arrow { 
            border: 1px solid green; } 

在样式表中，我们设置 drop-down 边框颜色为红色，down-arrow 边框为绿色，显示效果如上图。我们也可以自定义 drop-down 控件的大小和位置：

QComboBox { 
            font-family: "Microsoft YaHei"; font-size: 14px; color: #000000; font-style: normal; font-weight: bold; padding-left: 6px; } QComboBox::drop-down { 
            width:28px; height:22px; border: 1px solid red; subcontrol-position: center top; subcontrol-origin: padding; } QComboBox::down-arrow { 
            border: 1px solid green; } 

width 和 height 设置 drop-down 的宽高

subcontrol-position 设置 drop-down 的位置，只支持 left right top bottom center；值 left right center 为设置水平位置，值 top bottom center 为设置垂直位置

subcontrol-origin 设置 drop-down 的对齐方式，一般设置为 padding

注意: 如果想要自定义的 width、height、subcontrol-position 生效，必须在 QComboBox 按钮中设置 padding 的值，哪怕设置值为0，否则无法生效！

当然，我们也可以设置 drop-down 的圆角半径 border-radius，属性值和其它控件样式的设置方式一样：

border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-radius: 6px; 

同时，我们还可以往 drop-down 添加图片，方式有两种：

image: url("./arrow_down.png"); background-image: url("./arrow_down.png"); 

image 设置唯一的自动适应不重复的图片，而 background-image 则需要手动调节它的 repeat, position 属性值。这里，我们不推荐在 drop-down 中设置图片，因为它有一个更好放图片的控件 down-arrow

down-arrow
（由于最近比较忙，后续有空再补充完整！）