QT-功能-QSS的简单实际应用

本文系转载文章，附上原文章地址QSS设置QT程序1.3Qss过滤选择器和优先级1.3.1Qss选择器Qss有一些规则用来设置符合规则的控件名称，通常是按照通用属性设置一类控件，对某个有特殊要求的在特别设置。避免大量的重复设置。分为通配选择器：*;所有的控件属性设置*{}类型选择器：QPushButton ; 匹配所有QPushButton和其子类的实...

Freedom_Bule

570人浏览 · 2019-09-26 17:42:41

Freedom_Bule · 2019-09-26 17:42:41 发布

本文系转载文章，附上原文章地址QSS设置QT程序

1.3 Qss过滤选择器和优先级
1.3.1 Qss选择器
Qss有一些规则用来设置符合规则的控件名称，通常是按照通用属性设置一类控件，对某个有特殊要求的在特别设置。避免大量的重复设置。分为

通配选择器：* ;所有的控件属性设置
*

{

}

类型选择器：QPushButton ; 匹配所有QPushButton和其子类的实例
QPushButton

{

}

3.类选择器： .QPushButton ; 匹配所有QPushButton的实例，但是并不匹配其子类。这是与CSS中的类选择器不一样的地方，注意前面有一个点号

.QPushButton

{

}

4.属性选择器：QPushButton[flat=“false”]; 匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性

QPushButton[flat=“false”]

{

}

5.ID选择器： #myButton; 匹配所有id为myButton的控件实例，这里的id实际上就是objectName指定的值,针对特定名称的控件设置属性。

QPushButton#myButton1, #myButton2

{

}

6.后代选择器： QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的还是间接的。

QDialog QPushButton

{

}

7.子选择器： QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog

QDialog > QPushButton

{

}

1.3.2 Qss优先级
上面虽然用了选择器，单肯定会有重复的设置，那么系统怎么去排列这些设置的优先级。原则：宽泛的设置优先级低于更加针对具体的设置，文件上面的设置优先级低于文件下面的设置。

1.4 Qss开发步骤
（1）添加资源文件qrc，在资源里添加qss文件，图片皮肤文件等。

（2）分界面在qss文件中设置各控件的属性值

Qss中配置一般按照如下格式配置

控件类型#控件名称1,控件名称2,控件名称3

{

控件属性;

}

按钮属性设置

按钮为background背景图片的形式



QToolButton#addTimeBtn{//常规属性设置

       font-size: 12px;

       background: url(:/addanddeduct/image/add-l-16-normal.png) no-repeat center center;//背景图片资源中的路径，不重复，居中、居中显示。

       background-repeat:no-repeat;//图片较小时，不显示个。

       border-style: flat;//扁平

       border-left:1px solid #CCCCCC;//边框线条粗细、虚实、颜色

}

QToolButton#addTimeBtn:hover{//按钮高亮属性设置

   background: url(:/addanddeduct/image/add-l-16-hov.png) no-repeat center center;

   background-repeat:no-repeat;

   border-style: flat;

   border-left:1px solid #CCCCCC;

}

QToolButton#addTimeBtn:pressed{//按钮按下时的属性设置

   background: url(:/addanddeduct/image/add-l-16-pressed.png) no-repeat center center;

   border-style: flat;

   border-left:1px solid #CCCCCC;

}

按钮为qproperty-icon图片加文字的形式

/删除报警按键设置/

QToolButton#delAlarmBtn{

   font-size: 12px;

   border-style:inset;

   border:0px solid #E5E5E5;

   qproperty-icon: url(:/qss/image/lidaicon-h-trashcan.svg);

qproperty-iconSize: 16px 16px;//图片大小

qproperty-toolButtonStyle: ToolButtonTextBesideIcon;//文字和图片样式

}

QToolButton#delAlarmBtn:pressed{

   color:#1C72DD;

   border: 0px solid #1C72DD;

   font-size: 12px;

   border-style:inset;

   qproperty-icon: url(:/qss/image/lidaicon-h-trashcan-pressed.svg);

qproperty-iconSize: 16px 16px;

qproperty-toolButtonStyle: ToolButtonTextBesideIcon;

}

QToolButton#delAlarmBtn:hover{

   color:#4C99F8;

   font-size: 12px;

   border-style:inset;

   border: 0px solid #4C99F8;

   qproperty-icon: url(:/qss/image/lidaicon-h-trashcan-pressed.svg);

qproperty-iconSize: 16px 16px;

qproperty-toolButtonStyle: ToolButtonTextBesideIcon;

}

QCheckBox{

    spacing: 5px;

    color: black;

          border-style: flat;

}

复选框QCheckBox属性设置

QCheckBox::indicator

{

    width: 17px;

    height: 17px;

          image: url(:/checkImage/image/checkImage/check-nor.png);

}

QCheckBox::indicator:hover {

image: url(:/checkImage/image/checkImage/check-hov.png);

}

QCheckBox::indicator:checked{

image: url(:/checkImage/image/checkImage/check-sel.png);

}

QComboBox属性设置

QComboBox::drop-down:hover:pressed

{//下拉按钮设置

   subcontrol-position:center right;//按钮位置

   image:url(:/qss/image/angle-down.png);//按钮图片

}

QComboBox:drop-down

{

   subcontrol-position:center right;

   image:url(:/qss/image/angle-down-l-16.png);

}

QComboBox

{// QComboBox本身属性设置

   border: 1px solid #CCCCCC;

   border-radius: 2px;

}

QComboBox::hover

{//鼠标移上去，边框变蓝色

   /* 边框宽度,线条样式,颜色 */ 

border:1px solid #2080F7;  

/* 内边框 */ 

padding:1px 18px 1px 3px; 

min-width:100px; 

   font:12px;

}

QComboBox QAbstractItemView

{//下拉列表中的选项设置

  border: 1px solid #2080F7;

  selection-//选中背景色

}

/水平滚动条/

QScrollBar:horizontal{

   width:8px; 

   padding-top:0px;

   padding-bottom:0px;

   padding-right:0px;

   padding-left:0px;

   background: #000000;

   border-radius:100px;

}

QScrollBar::handle:horizontal{

   background:#E5E5E5;

   width:8px;

   border: 0px solid #E5E5E5;

   min-height:20px;

   border-radius:100px;

}

QScrollBar::handle:horizontal:normal{

   background:#F5F5F5;

   width:8px;

   border: 0px solid #E5E5E5;

   border-radius:100px;

}

QScrollBar::handle:horizontal:hover{

   background:#E6E6E6;

   width:8px;

   border: 0px solid #E5E5E5;

   border-radius:100px;

}

QScrollBar::handle:horizontal:pressed{

   background:#CCCCCC;

   width:8px;

   border: 0px solid #E5E5E5;

   border-radius:100px;

}

QScrollBar滚动条属性设置

/垂直滚动条/

QScrollBar:vertical

{

   width:8px;  //宽度

   padding-top:4px; //内上边距设置

   padding-bottom:0px;

   padding-right:0px;

   padding-left:0px;

   background: #000000;

   border-radius:100px;

}

QScrollBar::handle:vertical{ //滑块属性设置

   background:#E5E5E5;

   width:8px;

   border: 0px solid #E5E5E5;

   min-height:20px;

   border-radius:100px;

}

QScrollBar::handle:vertical:normal{

   background:#F5F5F5;

   width:8px;

   border: 0px solid #E5E5E5;

   border-radius:100px;

}

QScrollBar::handle:vertical:hover{

   background:#E6E6E6;

   width:8px;

   border: 0px solid #E5E5E5;

   border-radius:100px;

}

QScrollBar::handle:vertical:pressed{

   background:#CCCCCC;

   width:8px;

   border: 0px solid #E5E5E5;

   border-radius:100px;

}

QScrollBar{

background: #000000;

}

QScrollBar::pressed

{

   background: #000000;

}

QTableWidget属性设置

QTableWidget#tableWidget::Item

{

   border:0px solid #E5E5E5;

   border-bottom:1px solid #E5E5E5;

   font-size: 12px;

   color: #4C4C4C;

   font - family: Microsoft YaHei;

   alternate- /*行交替颜色*/ 

selection-background-color: #E9F2FE; /*选中行背景颜色*/

}

QTableWidget#tableWidget::Item:selected

{

   background:#4C99F8;

}

QTableWidget表头属性设置

QHeaderView::section{

   font-size: 12px;

   color: #000000;

   font - family: Microsoft YaHei;

   font-weight: bold;

   height:36px;/*表头高度*/

   border-style: flat;

  

   border-bottom:1px solid #E5E5E5;

   border-top:0px solid #E5E5E5;

   alignment: left;//左对齐

}

QTabWidget切换界面Tab属性设置

QTabWidget::pane //边框设置

{

   border-top: 1px solid #E5E5E5;

          border-left:1px solid #E5E5E5;

          position: absolute;

          font-size: 14px;

}

QTabWidget::tab-bar {

          border-bottom: 2px solid #E5E5E5;

          border-left:1px solid #E5E5E5;

          alignment: left;

          font-size: 14px;

}

QTabBar::tab {//切换按钮设置

border: none;

border-bottom-color: #C2C7CB; /* same as the pane color */

border-top-left-radius: 4px;//上左交界处的圆角

border-top-right-radius: 4px;

min-width: 8ex;

padding: 2px;

   font-size: 14px;

}

QTabBar::tab:hover {

   color:#2080F7;//选中高亮

}

QTabBar::tab:selected {

   color:#2080F7;

   border-bottom: 2px solid #2080F7;//下边框线条属性

   font-weight:bold;//加粗

}

（3）将qss文件添加到步骤（1）中添加的qrc资源文件中，注意每次修改之后都要重新加入。否则不生效。

（4）在代码中访问qss文件，读取文件内容，通过setstylesheet函数设置属性

QByteArray CSkinCtrl::ReadAllContents(const QString& dir_name)

   {

          QByteArray content;



          //获取路径下所有文件，如果是qrc路径呢？

          QStringList file_name_list = QDir(dir_name).entryList(QDir::Files);

          //将所有的读取的文件内容汇总到content

          for each (QString file_name in file_name_list)

          {

                 QFile file(dir_name + file_name);

                 if (file.open(QIODevice::ReadOnly))

                 {

                        content += file.readAll();

                        file.close();

                 }

          }

          //遍历子文件夹中的文件

          QStringList dir_name_list = QDir(dir_name).entryList(QDir::Dirs);

          for each (QString dir in dir_name_list)

          {

                 content += ReadAllContents(dir_name + dir + "/");

          }



          return content;

   }

调用读取函数，用qApp->setStyleSheet设置

QString gui_qss_path = “:/qss/iVMSGUIToolkit/”;

          QString client_qss_path = ":/qss/qss/";

qApp->setStyleSheet(ReadAllContents(gui_qss_path) + ReadAllContents(client_qss_path));

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter-OH 概述与未来发展全景分析

开源鸿蒙跨平台开发者社区

Flutter+OpenHarmony 智能家居开发 Day12｜用户中心 + 数据统计 + 鸿蒙原子化服务适配全流程

开源鸿蒙跨平台开发者社区

Flutter-OH 3.35.7 环境配置与插件开发指南

环境配置核心：JDK 必须用17版本，环境变量路径无中文/空格，通过校验环境；应用构建关键：使用编译 HAP 包，Impeller 渲染可通过 buildinfo.json5 开关；插件开发要点：原生插件需配置 pubspec.yaml 平台信息，现有插件可通过快速添加 OHOS 支持，FFI 插件适用于跨语言调用场景。