• C++Qt开发——QSS样式表

    1、样式表

    Qt样式表(style sheet)是用于定制用户界面的强有力的机制，其概念、术语是收到HTML中的级联样式表(Cascading Style Sheets,CCS)启发而来，只是Qt样式表是用用于窗体界面的

    与HTML的CSS类似，Qt的样式表是纯文本的格式定义，在应用程序运行时可以载入和解析这些样式定义。使用样式表可以定义各种界面组件(QWidget类及其子类)的样式，从而使应用程序的界面呈现不同的效果。很多软件具有换肤功能，使用Qt的样式表就可以很容易的实现这样的功能

    多多翻看Qt官方文档，所有控件都有案例：在索引栏输入Qt style

    1、样式表

    Qt样式表(style sheet)是用于定制用户界面的强有力的机制，其概念、术语是收到HTML中的级联样式表(Cascading Style Sheets,CCS)启发而来，只是Qt样式表是用用于窗体界面的

    与HTML的CSS类似，Qt的样式表是纯文本的格式定义，在应用程序运行时可以载入和解析这些样式定义。使用样式表可以定义各种界面组件(QWidget类及其子类)的样式，从而使应用程序的界面呈现不同的效果。很多软件具有换肤功能，使用Qt的样式表就可以很容易的实现这样的功能

    多多翻看Qt官方文档，所有控件都有案例：在索引栏输入Qt style

    本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

    盒子模型

    CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

    下面的图片说明了盒子模型(Box Model)：

    不同部分的说明：

    • Margin(外边距) - 清除边框外的区域，外边距是透明的。
    • Border(边框) - 围绕在内边距和内容外的边框。
    • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    • Content(内容) - 盒子的内容，显示文本和图像。

    为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

    2、选择器

    到目前为止所有的例子使用的都是最简单的选择器类型。QT样式表支持CSS2定义的所有选择器。下表总结了最常用的选择器类型。

    选择器类型

    选择器

    示例

    描述

    通用选择器

    *

    匹配所有控件

    类型选择器

    QPushButton

    匹配给定类型控件，包括子类

    类选择器

    .QPushButton

    匹配给定类型控件，不包括子类

    属性选择器

    QPushButton[flat="false"]

    匹配给定类型控件中符合[属性]的控件

    ID选择器

    QPushButton#closeBtn

    匹配给定类型，且对象名为closeBtn的控件

    子对象选择器

    QDialog>QPushButton

    匹配给定类型的直接子控件

    子孙对象选择器

    QDialog QPushButton

    匹配给定类型的子孙控件

    辅助(子控件)选择器

    QComboBox::drop-down

    复杂对象的子控件

    伪状态选择器

    QPushButton:hover

    控件的特定状态下的样式

    伪状态选择器

    状态

    描述

    :disabled

    控件禁用

    :enabled

    控件启用

    :focus

    控件获取输入焦点

    :hover

    鼠标在空间上悬停

    :pressed

    鼠标按下

    :checked

    控件被选中

    :unchecked

    控件没有选中

    :indeterminate

    控件部分被选中

    :open

    控件

    :closed

    空间关闭

    :on

    控件可以切换，且处于on状态

    :off

    控件可以切换，且处于off状态

    !

    对以上状态的否定

    本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

    3、控件示例

    3.1 QLabel

    设置字体样式

    1. QLabel
    2. {
    3.     /*分开设置*/
    4.     /*font-family: "楷体";
    5.     font-size: 20px;
    6.     font-style: italic;
    7.     font-weight:bold ;
    8.     /*快捷设置*/
    9.     font:bold italic 18px "微软雅黑";
    10.     color:cornflowerblue;
    11. }

    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

    文字位置

    1. QLabel
    2. {
    3.     padding-left: 10px;
    4.     padding-top: 8px;
    5.     padding-right: 7px;
    6.     padding-bottom: 9px;
    7. }

    Tip: 在 qss 中，属性 text-align 对 Label 是不起作用的，只能通过设置 padding 来实现文字的显示位置；一般 padding-left 相当于 x 坐标，padding-top 相当于 y 坐标，设置这两个就可以在任意位置显示了（

    边框样式

    整体设置

    1. QLabel
    2. {
    3.     /*分开设置*/
    4.     border-style: solid;
    5.     border-width: 2px;
    6.     border-color:darkgoldenrod;
    7.     /*快捷设置*/
    8.     border:2px solid red;
    9. }

    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 来写，不然不会生效！

    单独设置某条边框的样式

    1. QLabel
    2. {
    3.     border-left: 2px solid red;
    4.     border-top: 2px solid black;
    5.     border-right: 2px solid blue;
    6.     border-bottom-color: transparent;   /*下边框透明，不显示*/
    7. }

    设置边框半径(圆角)

    1. QLabel
    2. {
    3.     border-left: 2px solid red;
    4.     border-top: 2px solid black;
    5.     border-right: 2px solid blue;
    6.     border-bottom: 2px solid yellow;
    7. ​
    8.     border-top-left-radius: 20px;
    9.     border-top-right-radius: 15px;
    10.     border-bottom-left-radius: 10px;
    11.     border-bottom-right-radius: 5px;    
    12.     /*border-radius: 20px;*/
    13. }

    border-top-left-radius 为设置左上角圆角半径，单位 px 像素

    border-top-right-radius 为设置右上角圆角半径，单位 px 像素

    border-bottom-left-radius 为设置左下角圆角半径，单位 px 像素

    border-bottom-right-radius 为设置右上角圆角半径，单位 px 像素

    border-radius 为设置所有边框圆角半径，单位为 px 像素，通过圆角半径可以实现圆形的 Label

    背景样式

    1. QLabel
    2. {
    3.    background-color: #2E3648;
    4.     background-image: url("./image.png");
    5.     background-repeat: no-repeat; 
    6.     background-position: left center;
    7.     /*background: url("./image.png") no-repeat left center #2E3648;*/
    8. }

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

    3.2 QPushButton

    1. QPushButton
    2. {
    3.     /*1*/
    4.     border:none;    /*去掉边框*/
    5.     border-radius:10px;
    6.     /*1，添加图片*/
    7.     background-image: url(:/images/quit.png);
    8.     background-repeat:none;
    9.     background-position:center;
    10.     /*3，把图片作为边框，会自动铺满背景*/
    11.    border-image: url(:/images/quit.png);
    12. }
    13. QPushButton:hover
    14. {
    15.     background-color:rgba(102,205,227,255);
    16. }
    17. QPushButton:pressed
    18. {
    19.     background-color:rgb(48,188,218);
    20. }

     

     

     

     

    3.3 QCheckBox、QRadioButton

    1. QCheckBox
    2. {
    3.     color:red;
    4. }
    5. ​
    6. QCheckBox::indicator
    7. {
    8.     width:16px;
    9.     height:16px;
    10.     border-image: url(:/images/checkbox-unchecked.png);
    11.     border-radius:5px;      
    12. }
    13. QCheckBox::indicator:checked
    14. {   
    15.     border-image: url(:/images/checkbox-checked.png);
    16. }
    17. QCheckBox::indicator:unchecked:hover
    18. {   
    19.     border-image: url(:/images/checkbox-unchecked-hover.png);
    20. }
    21. QCheckBox::indicator:checked:hover
    22. {
    23.     border-image: url(:/images/checkbox-checked-hover.png);
    24. }

    3.4 QGroupBox

    1. QGroupBox {
    2.     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
    3.                       stop: 0 #E0E0E0, stop: 1 #EEEEEE);
    4.     border: 2px solid gray;
    5.     border-radius: 5px;
    6.     margin-top: 10px; /* leave space at the top for the title */
    7. }
    8.  
    9. QGroupBox::title {
    10.     subcontrol-origin: margin;
    11.     subcontrol-position: top center; /* position at the top center */
    12.     padding: 2px 3px;
    13.     color: white;
    14.     margin-top: 2px;
    15.     background-color: gray;
    16.     border-radius: 3px;
    17.     spacing: 5px;
    18. }
    19.  
    20. QGroupBox::indicator {
    21.     width: 13px;
    22.     height: 13px;
    23.     border: 1px solid black;
    24.     background: white;
    25. }
    26.  
    27. QGroupBox::indicator:checked {
    28.     background: yellow;
    29. }

    本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

    3.5 QComboBox

    1.  
    2. #comboBox {
    3.     combobox-popup: 0;/*两种下拉框样式,默认0,Value(0、1)*/
    4.     border:2px solid #2080F7;/*设置边框样式*/
    5. }
    6.  
    7. #comboBox:hover{
    8.      background-color:rgb(255,255,255);
    9.      color:rgb(255,0,0);
    10.      border:1px;
    11.      border-color:rgb(234,145,54);
    12.      border-style:solid;
    13. }
    14.  
    15. /*下拉框按钮图标样式设置*/
    16. #comboBox::drop-down{
    17.     subcontrol-origin: padding;
    18.     subcontrol-position: right;
    19.     width: 20px;
    20.     border: 0px;
    21. }
    22.  
    23. /*设置下拉框按钮图标*/
    24. #comboBox::down-arrow{
    25.     width: 16px;
    26.     height: 16px; 
    27.     image: url(:/res/combobox.png);
    28. }
    29.  
    30. /*设置下拉框按钮按下图标*/
    31. #comboBox::down-arrow:on{
    32.     image: url(:/res/combobox_on.png);
    33. }
    34.  
    35. /*下拉列表每一项的样式*/
    36. #comboBox QAbstractItemView::item{
    37.     height: 30px;
    38.     min-height:30px;
    39.     color:rgb(0,0,0);
    40.     background-color:rgb(55,55,55);
    41. }
    42.  
    43. /*下拉列表项选中样式*/
    44. #comboBox QAbstractItemView::item:hover{
    45.     color:rgb(0,0,0);
    46.     background-color:rgb(2,141,193);
    47. }
    48.  
    49. /*设置垂直滚动条*/
    50. #comboBox QAbstractScrollArea QScrollBar::vertical{
    51.     width: 15px; 
    52.     background-color:rgb(128,255,255);
    53. }
    54.  
    55. /*设置垂直滚动条滑块属性*/
    56. #comboBox QScrollBar::handle::vertical {
    57.     width: 15px;
    58.     background-color:rgb(242,185,51);
    59.     border-radius: 5px;
    60. }
    61.  
    62. QComboBox {
    63.     color: black;
    64. 	border:1px solid black;
    65. 	border-radius:5px;
    66. 	padding: 1px 1px 1px 1px;	/*不加这个圆角会有缺失*/
    67. }
    68. QComboBox::drop-down
    69. {
    70. 	width:25px;
    71. 	border-image: url(:/images/comboBox/drop-down.png);
    72. }
    73. QComboBox::drop-down:hover
    74. {
    75. 	border-image: url(:/images/comboBox/drop-down-hover.png);
    76. }
    77. /*把checked换成on也行*/
    78. QComboBox::drop-down:checked
    79. {
    80. 	border-image: url(:/images/comboBox/drop-down-on.png);
    81. }
    82. QComboBox::drop-down:checked:hover
    83. {
    84. 	border-image: url(:/images/comboBox/drop-down-on-hover.png);
    85. }
    86. /*设置下拉菜单的样式*/
    87. QComboBox#usernameEdit QAbstractItemView
    88. {
    89.     border: none;
    90.     background-color: rgb(255, 255, 255);
    91.     outline:0px ;
    92. }
    93. /*设置下拉菜单的每一项的样式*/
    94. QComboBox#usernameEdit QAbstractItemView::item
    95. {
    96.     height: 50px;
    97.     /*设置高度不生效，需要给QcomboBox设置如下属性(二选一)
    98.         //1,usernameEdit->setItemDelegate(new QStyledItemDelegate);
    99.     	//2,usernameEdit->setView(new QListView
    100.     */
    101. }

    下拉项使用委托？

    3.6 QSpinBox、QTimeEdit、QDateEdit、QDateTimeEdit

    QSpinBox 的 subcontrol 有 ::up-button, ::down-button, ::up-arrow, ::down-arrow。

    • up-button 显示在 QSpinBox 里，它的 subcontrol-origin 是相对于 QSpinBox的
    • down-button 显示在 QSpinBox 里，它的 subcontrol-origin 是相对于 QSpinBox的
    • up-arrow 显示在 up-button 里，它的 subcontrol-origin 是相对于 up-button 的
    • down-arrwo 显示在 down-button 里，它的 subcontrol-origin 是相对于 down-button 的

    1. QSpinBox
    2. {
    3. 	border:1px solid black;
    4. 	border-radius:5px;
    5. }
    6. /*按钮*/
    7. QSpinBox:down-button,QSpinBox:up-button
    8. {
    9. 	width:16px;
    10. 	height:15px;
    11. 	subcontrol-origin:padding;
    12. 	background:white;
    13. 	border:2px solid rgb(217,217,217);
    14. 	border-radius:5px;
    15. }
    16.  
    17. QSpinBox:down-button
    18. {
    19. 	subcontrol-position:left center;
    20. }
    21.  
    22. QSpinBox:up-button
    23. {
    24. 	subcontrol-position:right center;
    25. }
    26.  
    27. QSpinBox:down-button:hover,QSpinBox:up-button:hover
    28. {
    29.  
    30. 	border:2px solid rgb(138,138,138);
    31. }
    32. /*箭头*/
    33. QSpinBox:down-arrow
    34. {	
    35. 	border-image: url(:/images/spinBox/down-arrow.png);
    36. }
    37.  
    38. QSpinBox:up-arrow
    39. {
    40. 	border-image: url(:/images/spinBox/up-arrow.png);
    41. }
    42. QSpinBox:down-arrow:hover
    43. {	
    44. 	border-image: url(:/images/spinBox/down-arrow-hover.png);
    45. }
    46.  
    47. QSpinBox:up-arrow:hover
    48. {
    49. 	border-image: url(:/images/spinBox/up-arrow-hover.png);
    50. }

    3.7 QSlider

    QSlider 的 subcontrol 有 ::groove（槽），::handle，::add-page 和 ::sub-page。

    • groove 显示在 QSlider 里，它的 subcontrol-origin 是相对于 QSlider 的
    • handle 显示在 groove 里，它的 subcontrol-origin 是相对于 groove 的
    • sub-page 显示在 groove 里，它的 subcontrol-origin 是相对于 groove 的
    • add-page 显示在 groove 里，它的 subcontrol-origin 是相对于 groove 的
    • handle, sub-page, add-page 虽然都显示在 groove 里，但是都可以把它们扩展到 groove 外

    1. QSlider::groove:horizontal
    2. {
    3.     border: 1px solid skyblue;
    4.     background-color: skyblue;
    5.     height: 10px;
    6.     border-radius: 5px;
    7. }
    8.  
    9. QSlider::handle:horizontal
    10. {
    11. 	background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.7 white,stop:0.8 rgb(143,212,255));
    12.     width: 20px;
    13.     border-radius: 10px;    
    14.     margin-top: -5px;
    15.     margin-bottom: -5px;
    16. }
    17. QSlider::sub-page:horizontal 
    18. {
    19.     background: #999;
    20.     margin: 5px;
    21.     border-radius: 5px;
    22. }
    23.  
    24. QSlider::add-page:horizontal 
    25. {
    26.     background: #666;
    27.     margin: 5px;
    28.     border-radius: 5px;
    29. }

    3.8 QProgressBar

    对于 QProgressBar 的 QSS，大多数都是想把 chunk 定义为圆角矩形的样子，但是当它的 value 比较小时，chunk 的圆角会变成直角，即使使用图片都不行，效果很不理想，所以如果要修改 QProgressBar 的外观的话，推荐继承 QProgressBar 自己绘制或者使用 QStyle。

    1. /*边框*/
    2. QProgressBar
    3. {
    4. 	border:1px solid skyblue;
    5. 	border-radius:5px;
    6. 	height:5px;
    7.     text-align: center;
    8. }
    9. /*进度条*/
    10. QProgressBar::chunk
    11. {
    12.     background-color: steelblue;
    13.     border-radius: 5px;
    14. }

    1. QProgressBar
    2. {
    3.     border-color: 1px solid blue;
    4.     border-radius: 5px;
    5.     text-align: center;
    6. }
    7.  
    8. QProgressBar:chunk
    9. {
    10.     background-color: aqua;	/*设置快的颜色*/
    11.     width: 5px;		/*块的宽度*/
    12.     margin: 0.5px;	/*让每个块之间有点间隔*/
    13. }

    如果最大值和最小值都为0，则会显示一个繁忙提示，等待系统容错处理结束，再继续恢复加载

    progressBar->setRange(0,0);

    3.9 QToolTip

    1. QToolTip
    2. {
    3.      border: 1px solid black;
    4.      background-color: #ffa02f;
    5.      padding: 1px;
    6.      border-radius: 3px;
    7. }

    本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C++语言基础，Qt编程入门，QT信号与槽机制，QT图像绘制，QT网络，QT数据库编程，QT项目实战，QT嵌入式开发，Quick模块等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

  • 相关阅读:
    SpringSecurity - 启动流程分析（三）
    1688API 接入说明，Onebound数据
    国外大神制作的史上最精简Win10系统，真有那么好用吗？
    Android图形-组件-比较与理解
    Flink对比Spark
    SSL证书的加密算法有哪些？
    JavaScript入门④-万物皆对象:Object
    [Gradle]清理Gradle生成的out\build目录
    leetcode896：单调数列
    python使用PIL模块加载图像、通过resize函数改变图像的大小、使用save函数保存处理过的图像、并自定义指定保存后的格式
  • 原文地址：https://blog.csdn.net/m0_60259116/article/details/127812977