qss之QRadioButton

末蓝、 2021-12-15 06:07 492阅读 0赞

**先来个示例**

QRadioButton { 
        font-family: "Microsoft YaHei";
        font-size: 14px;
        color: #BDC8E2;
        background-color: #2E3648;
    }

效果图如下：  
![在这里插入图片描述][20190704162432653.png]

**上面的例子是基本的样式设置，下面我们将探讨 QRadioButton 各种样式设置：**

--------------------

**字体样式**

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 为不加粗

**font** 为同时设置字体 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 这个属性的

--------------------

**文字位置**

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

**spacing** 为设置选择框与文字之间的间距（水平间距）

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

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

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

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

**Tip:** 在 qss 中，属性 text-align 对 QRadioButton 是不起作用的，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 像素，通过圆角半径可以实现圆形的 RadioButton

--------------------

**背景样式**

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 这些属性值出现的顺序可以任意

--------------------

**下面是一个综合示例**

QRadioButton { 
        font-family: "Microsoft YaHei";
        font-size: 14px;
        color: #BDC8E2;
        font-style: italic;
        font-weight: bold;
    
        spacing: 5px;
        padding-left: 3px;
        padding-top: 0px;
    
        border-style: solid;
        border-width: 2px;
        border-color: aqua;
    
        border-radius: 20;
    
        background-color: #2E3648;
        background-image: url("./image.png");
        background-repeat: no-repeat;
        background-position: right center;
    }

效果图

![在这里插入图片描述][20190704164310310.png]

--------------------

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

鼠标悬浮时的样式

QRadioButton:hover{ 
    	color: red;
    	border-color: green;
        background-color: aqua;
    }

鼠标点击时的样式

QRadioButton:pressed{ 
    	color: green;
    	border-color: blueviolet;
        background-color: black;
    }

按钮禁止时的样式

QRadioButton:disabled{ 
    	color: blue;
    	border-color: brown;
        background-color: aqua;
    }

--------------------

**单选框**

对于 QRadioButton，可以单独设置单选框的样式，单选框属于 QRadioButton 的一个子控件 **indicator**，所以我们通过（::）来引用设置子控件样式

QRadioButton::indicator { 
        width: 32px;
        height: 18px;
        image: url(./image1.png);
        
        position: relative;
        left: 0px;
        right: 3px;
        top: 2px;
        bottom:4px;
    }

如果 height 属性的值小于图片的真实高度，默认会根据 height 的值进行等比例缩放，height 的值大于图片真实高度时不做任何缩放处理；如果 width 属性的值大于实际值不会缩放图片，但 indicator 控件宽端会跟随变大，width 小于真实宽度时则对进行不等比缩放，会导致图片变形。

通过设置 position 值为 relative，可以实现调节 left right top bottom 的值来调节图片的显示位置

**动态样式**

QRadioButton::indicator:hover { 
        image: url(./image2.png);
    }
    
    QRadioButton::indicator:pressed { 
        image: url(./image3.png);
    }

当然，还可以对 indicator 的是否选中状态动态调节样式

QRadioButton::indicator:unchecked { 
        image: url(./image1.png);
    }
    
    QRadioButton::indicator:unchecked:hover{ 
        image: url(./image2.png);
    }
    
    QRadioButton::indicator:unchecked:pressed { 
        image: url(./image3.png);
    }
    
    QRadioButton::indicator:checked { 
        image: url(./image4.png);
    }
    
    QRadioButton::indicator:checked:hover{ 
        image: url(./image5.png);
    }
    
    QRadioButton::indicator:checked:pressed { 
        image: url(./image6.png);
    }

unchecked 未选中状态和没有添加任何状态时的样式是相同，这里只是为了统一规范而已

--------------------

[20190704162432653.png]: /images/20211214/562fdbb91b2641df97e174367279a13a.png
[20190704164310310.png]: /images/20211214/a7c303c0382d44faab3ed19383d37a4c.png