how to use style sheets in Qt-----Style Sheet Example instruction

           《Qt Examples and demos 》中有一个关于Qt界面美化和样式风格使用的例子《Style Sheet Example》，该例子很好的展现了Qt进行界面美化的功能和特点（版本：Qt4.7）(图1)。

          

                                                              图1 Style Sheet Example

          运行该示例（图2）,点击菜单“File”-“Edit Style...”,

          

                                                               图2 Style Sheet Example 运行

         进入“Style Editor” 对话框（图3），在该对话框中，可以通过改变“Style”和“Style Sheet”来调整图1和图2对话框的界面风格。当调整“Style Sheet”中的选项时，可以看到下面QTextEdit中的内容不同，QTextEdit中的内容是从该例子qss目录下面加载的qss文件内容，我们也可以通过调整QTextEdit中qss的内容后，点击“Apply”查看图1和图2对话框的界面风格的变化。

         

                                                               图3 Style Editor

        下面分别介绍“Style”和“Style Sheet”：

         1，“Style”中枚举了Qt封装的GUI外观样式，这些外观样式通过调用QStyleFactory类keys()函数获得，型的情况下它包含"windows"、"motif"、"cde"、"plastique"和"cleanlooks"，依赖于平台。

      

                                                              图4 GUI外观样式

在该示例的StyleSheetEditor类的构造函数中加载这些外观样式到“Style”的QComboBox中。

StyleSheetEditor::StyleSheetEditor(QWidget *parent)
     : QDialog(parent)
 {
     ui.setupUi(this);

     QRegExp regExp(".(.*)\\+?Style");
     QString defaultStyle = QApplication::style()->metaObject()->className();

     if (regExp.exactMatch(defaultStyle))
         defaultStyle = regExp.cap(1);

     ui.styleCombo->addItems(QStyleFactory::keys);
     ui.styleCombo->setCurrentIndex(ui.styleCombo->findText(defaultStyle, Qt::MatchContains));
     ui.styleSheetCombo->setCurrentIndex(ui.styleSheetCombo->findText("Coffee"));
     loadStyleSheet("Coffee");
 }

当我们需要改变“Style”，选择不同的GUI外观样式时，我是怎么响应的呢？我们看QComboBox选择响应代码中的的qApp->setStyle(styleName)，就是用该函数来改变GUI的外观的。

void StyleSheetEditor::on_styleCombo_activated(const QString &styleName)
 {
     qApp->setStyle(styleName);
     ui.applyButton->setEnabled(false);
 }

整个应用的样式可以通过QApplication::setStyle()函数设置。
        2，“Style Sheet”使用加载qss文件中的样式的方式来设置界面样式。

        qss是Qt皮肤，借用css 的灵感， Qt也支持Qt自己的css, 简称qss。同css 相似，qss的主要功能与最目的都是能使界面的表现与界面的元素分离，即质与形的分离，就如同一个人可以在不同的时候穿上不同的衣服一样，css机制的引入，使得设计一种皮肤与界面控件分离的软件成为可能，应用程序也能像web界面那样随意地改变外观。关于qss的具体语法我不知本文中进行详细介绍了。大家可以在网上找找。

        本示例程序中是如何加载使用qss的，看代码，

        “Style Sheet”QComboBox的响应：

void StyleSheetEditor::on_styleSheetCombo_activated(const QString &sheetName)
 {
  loadStyleSheet(sheetName);}

        loadStyleSheet函数如下：

void StyleSheetEditor::loadStyleSheet(const QString &sheetName)
 {
     QFile file(":/qss/" + sheetName.toLower() + ".qss");
     file.open(QFile::ReadOnly);
     QString styleSheet = QLatin1String(file.readAll());

     ui.styleTextEdit->setPlainText(styleSheet);
     qApp->setStyleSheet(styleSheet);
     ui.applyButton->setEnabled(false);
 }

将qss样式文件加载，然后使用QApplication::setStyleSheet()函数将该样式皮肤在界面上应用。