qss应用的简略说明

由于在用qt写一个机器人界面，感觉太丑。所以研究了qt界面设计。了解了有qss这个东西。由于本人初学，下面的这些都是初学者的操作步骤。如果对读者有所帮助，深感荣欣。

qt style sheets -qt的皮肤设计。基本运用css的语法。可以让我们把功能代码与界面设计代码分开，只需要在main函数中另外调用写好的.qss代码文件。

1.创建一个name.txt文件。更改后缀名为name.qss。这个就是代码文件

2.用编辑器打开name.qss。编写代码，例程如下，具体语法查看：

http://www.w3school.com.cn/cssref/index.asp

/**********全局字体*********/
*{  
  font-size:13px;  
  color:white;  
  font-family:"宋体";  
}  

/********窗口设置**********/  
QMainWindow,QDialog{  
       background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #1B2534, stop: 0.4 #01583d,  
                                 stop: 0.5 #01583d, stop: 1.0 #1F2B3C);	   
}  
QWidget{  
       background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #1B2534, stop: 0.4 #01583d,  
                                 stop: 0.5 #01583d, stop: 1.0 #1F2B3C);	    
}  

/*******标签设置*********/
QLabel{  
   background:transparent;  
}  

/*******按钮设置*********/
QPushButton,QToolButton{  
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #5B5F5F, stop: 0.5 #0C2436,  
                                 stop: 1.0 #27405A);  
    border-style: outset;  
    border-width: 1px;  
    border-radius: 5px;  
    border-color: #11223F;  
    padding: 1px;  
}  
QPushButton::hover,QToolButton::hover{  
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #758385, stop: 0.5 #122C39,  
                                 stop: 1.0 #0E7788);  
    border-color: #11505C;  
}  
QPushButton::pressed,QToolButton::pressed{  
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #969B9C, stop: 0.5 #16354B,  
                                 stop: 1.0 #244F76);  
    border-color: #862885;  
}  
QPushButton::disabled,QToolButton::disabled{  
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #282B2C, stop: 0.5 #09121A,  
                                 stop: 1.0 #111D29);  
    border-color: #0A1320;  
    color:#6A6864;  
}  
QDialog QPushButton,QDialog QToolButton{  
  min-width:30px;  
  min-height:23px;  
}  

3.打开qt项目添加资源文件。右键项目->添加新文件->qt resource file 设置名字后完成。

4.在左侧的界面文件下面可以看到资源。右键刚才新建的资源，把第二步完成的name.qss文件添加进来。

5.在main中调用。具体看代码。

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    QFile styleFile(":\name.qss");
    styleFile.open(QIODevice::ReadOnly);
    QString setStyleSheet(styleFile.readAll());;
    a.setStyleSheet(setStyleSheet);


    return a.exec();
}

注 ：

1.  qss文件我只给出了背景设置以及按钮控件的设置。其实包含很多东西，比如qframe，qlineEdit等控件。想要设计属于自己好看的界面读者深入深入了解。

2.background：qlineargradient设置背景的渐变色中。比如stop 0.4 是在40%比例的地方设置颜色。其他的语法参照上面给的链接具体查看功能。

3.main函数加载路径的过程中遇到问题，由于刚开始加载错误的路径。导致后面即使代码写对了，编译后也没结果，这是由于qt自身的关系。更改资源路径后要把工程目录中的build-XXX文件删除，重新编译才有结果。