qss之QRadioButton

先来个示例

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

效果图如下：

上面的例子是基本的样式设置，下面我们将探讨 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;
}

效果图

接下来，我们对 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 未选中状态和没有添加任何状态时的样式是相同，这里只是为了统一规范而已

qss之QRadioButton相关推荐

Qt QSS QCheckBox和QRadioButton
导读单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素.单选按钮只允许用户在一组选项中选择一个,且当其中一个被选中的时候,按钮组中的其他单选按钮自动取消.复选框 ...
Qt样式表之二：QSS语法及常用样式
一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...
button 样式_实战PyQt5: 111-可以使用QSS样式表的部件
可以使用QSS样式表的部件 QSS样式表支持各种部件,属性,伪状态和子控件,从而可以实现定制部件的外观,下面我们将详细列出可以使用QSS样式表的部件: QAbstractScrollArea:所有派生 ...
qt qss设置字体大小_Qt编写自定义控件70-扁平化flatui
一.前言对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦,而通过渐变色产生的质感色彩反 ...
Qt中QSS的简单使用
样式表的组成样式表由两大元素组成:选择器和声明.选择器实际上可以理解为对象,声明则是对该对象的属性的设置. 样式表的使用方法一:在代码中调用setStyleSheet()来设置样式: 方法二:通过 ...
【QT】QT从零入门教程(十六)：QSS样式表
实现一个软件的基本界面和功能后,接下来要做的就是美化界面,这就用到了QSS样式表. QSS包含了一个样式规则序列,一个样式规则由一个选择器和声明组成,选择器指定哪些部件由规则影响,声明指定哪些 ...
Qt学习笔记--QSS样式表
样式表QSS QSS 简介语法规则选择器子控件用法常见子控件伪状态用法常见伪状态常用样式属性经典样式表 QSS-白色靓丽 QSS-黑色炫酷实现方法效果展示对应样式表 QSS ...
（QT）qss与按钮
一.qss 1.qss相关概念 QT QSS(Qt Style Sheets)文件是一种基于CSS的样式表语言,用于定义QT应用程序的外观和风格.它可以用于控制应用程序中的各种界面元素的外观和行为,如 ...
Qt Style Sheets(QSS)参考
综述:Qt Style Sheets QSS语法:The Style Sheet Syntax Style Rules,样式规则,属性汇总:List of Properties Selector Ty ...
Qt 样式表之QSS
前言最近想给程序做个换皮肤的功能,于是想起了用 QSS.QSS 这个东西也算是老古董了,博主刚工作那会就有接触过,但是没有深入去了解,趁着这一次机会来学习一下.网上翻阅了一些资料,结合 Qt 的官方 ...

qss之QRadioButton

qss之QRadioButton相关推荐

最新文章

热门文章