QT样式表StyleSheet的使用与加载

转自：https://blog.youkuaiyun.com/qq_31073871/article/details/79943093

目录

0、相关链接

1、在设计师界面上直接添加

1.1 注意事项

2、用程序添加样式

2.1 用程序语句添加

2.2 用qss文件添加

2.2.1引用qss文件的外部路径

2.2.2引用qss文件的资源路径

3、样式表选择器

---

 

0、相关链接

官网的样式表链接：http://doc.qt.io/archives/qt-4.8/stylesheet.html

各种控件的样式：http://doc.qt.io/archives/qt-4.8/stylesheet-reference.html

QSS语法：http://www.w3school.com.cn/css/css_syntax.asp

使用样式表的3种方法：《Qt 之 样式表的使用——设置样式的方法 》https://blog.youkuaiyun.com/goforwardtostep/article/details/60884870

其实本质上就两种：1、在设计师界面上直接添加，2、用程序设置

 

1、在设计师界面上直接添加

举例，在设计师界面拖入一个QPushButton，右击这个按钮，选择改变样式表，就会弹出添加样式的窗口；

或者，左键选中这个按钮，在右侧的属性对话框中找到StyleSheet属性，点击...按钮也可打开样式表窗口，如下图所示

在打开的编辑样式表窗口直接输入“样式语句”，点击应用apply即可实时看到样式的效果，如下图所示：

编辑样式表这个窗口可以实时提示，我们输入的qss语句语法是否正确，如果正确会在左下角提示：有效样式表，当然，这个语法检查功能非常有限，只能检查语法的格式，例如是否缺少了大括号、是否漏了冒号、分号。

1.1 注意事项

    1、这里有一点比较另类，设定背景颜色background-color时，必须要同时把设置一下边框属性：如边框圆角border-radius、边框粗细等，否则背景色无法生效。

    2、如上图所示，样式表可以用大括号限定作用的控件类型，比如QPushButton{  }，如果不用大括号限定控件类型，那么该控件的所有子控件都会显示为父控件的样式，最典型的例子，使用容器类控件时，

例如QGroupBox，我们不用QGroupBox{  }限定qss语句的作用范围，而是直接设置其样式，那么该容器中的任何子控件（按钮、单选框、label等）都会显示为QGroupBox的样式，如下图所示：

由此我们还可以联想到，主窗口是所有控件的父控件，

（1）如果我们设置了主窗体的样式，而不指定作用范围，那么窗体内的所有控件都会按照主窗体的设置的样式来显示；

（2）如果我们在主窗体中设置样式时指定作用范围为QPushButton，那么该窗体内的所有QPushButton就都会显示为所设置的样式。

（3）如果父控件和子控件都设置了样式，那么子控件就按照自己的样式来显示，这是覆盖机制，因为父控件总是在子控件之前构造，子控件在构造时，会把原先的设置给覆盖掉。

 

2、用程序添加样式

2.1 用程序语句添加

    这种方法更简单粗暴，每一个控件都有自己的setStyleSheet(QString &)成员函数，直接把方法一里面的样式语句，作为形参传入该方法即可，例如：

 

 

   

    

   
   

    

     QString pushButton_SS = 
     "QPushButton{border-radius: 10px; /*圆角半径*/color:green;/*字体颜色*/}";
    
   

   

    

   
   

    

     ui->pushButton_SerialSend->setStyleSheet(pushButton_SS);
    
   
 

 

2.2 用qss文件添加

跟2.1节的方法基本一样，唯一的不同就是，样式表的语句是从文件中读入的，而2.1节的样式语句是直接写在程序里的。

步骤如下：

1、新建一个txt文本文档，并修改后缀名为.qss，文件名任取，例如：myStyleSheet.qss，

2、在这个qss文件中写qss语句

3、在程序中用QFile类读取该文件，并把读出的内容传递给setStyleSheet()函数

下面是从别处抄来的例程：

 

 

   

    

   
   

    

     MainWindow::MainWindow(QWidget *parent) :
    
   

   

    

   
   

    

         QMainWindow(parent),
    
   

   

    

   
   

    

         ui(
     new Ui::MainWindow)
    
   

   

    

   
   

    

     {
    
   

   

    

   
   

    

         ui->setupUi(
     this);
    
   

   

    

   
   

    
    
     this->loadStyleSheet(
     ":/qss/myStyleSheet.qss");
    
   

   

    

   
   

    

     }
    
   

   

    

   
   

    

     void MainWindow::loadStyleSheet(
     const QString &styleSheetFile)
    
   

   

    

   
   

    

     {
    
   

   

    

   
   

    
    
     QFile file(styleSheetFile);
    
   

   

    

   
   

    

         file.open(QFile::ReadOnly);
    
   

   

    

   
   

    
    
     if (file.isOpen())
    
   

   

    

   
   

    

         {
    
   

   

    

   
   

    

             QString styleSheet = 
     this->styleSheet();
    
   

   

    

   
   

    

             styleSheet += QLatin1String(file.readAll());
     //读取样式表文件
    
   

   

    

   
   

    
        
     this->setStyleSheet(styleSheet);
     //把文件内容传参
    
   

   

    

   
   

    

             file.close();
    
   

   

    

   
   

    

         }
    
   

   

    

   
   

    
    
     else
    
   

   

    

   
   

    

         {
    
   

   

    

   
   

    

             QMessageBox::information(
     this,
     "tip",
     "cannot find qss file");
    
   

   

    

   
   

    

         }
    
   

   

    

   
   

    

     }
    
   
 

给MainWindow添加成员函数loadStyleSheet()，直接在构造函数中调用它即可

 

myStyleSheet.qss文件的内容如下：

 

 

   

    

   
   

    

     QPushButton
    
   

   

    

   
   

    

     {
     /*按钮无任何操作时*/
    
   

   

    

   
   

    
     
     background-color: green;
     /*背景色*/
    
   

   

    

   
   

    

     }
    
   

   

    

   
   

    

     QPushButton
     :hover
    
   

   

    

   
   

    

     { 
     /*鼠标悬停在按钮上时*/
    
   

   

    

   
   

    
    
     background-color:red;
    
   

   

    

   
   

    

     }
    
   

   

    

   
   

    
 
    
   

   

    

   
   

    

     QPushButton
     :pressed
    
   

   

    

   
   

    

     { 
     /*按钮被按下时*/
    
   

   

    

   
   

    
     
     background-color:green;
    
   

   

    

   
   

    

     }
    
   
 

 

2.2.1引用qss文件的外部路径

 

    加载qss文件时，需要指定文件路径（一般是相对路径），如果把qss文件放在磁盘上，文件暴露在用户眼皮底下，可能会被用户随意修改，解决方法就是把qss文件作为资源，一起打包进exe文件中

2.2.2引用qss文件的资源路径

步骤如下：

1、在qt左侧目录树的顶层文件夹上右击->添加新文件->选择QT->QT resource file->choose，输入自定义资源文件的名字res->选择资源文件的存放路径->下一步->ok，这样就可以在目录树中看到一个文件 res.qrc。（如果已经创建过资源文件，则跳过该步）

2、右击res.qrc文件->open in editor，如果打不开则选->open with->资源编辑器，在打开的资源编辑器中，点击添加->前缀->修改前缀为/qss，  再点击添加->添加现有文件->添加上选中我们上面做好的qss文件。完成后效果如下图所示。

3、写程序时需要读取该文件时，右击这个qss文件，选择复制url，即可复制本文件的资源路径，非常方便。

 

 

附：如何设置qss语法高亮？百度上有很多相关答案，自行搜索即可。

 

3、样式表选择器

 

样式表选择器，是为了给某一类控件统一设置样式，内容比较多，自行搜索学习吧