[QT编程系列-39]：用户界面UI - 样式表QSS与样式文件快速入门

目录

1. 概述

2. CSS

3. QSS示例

4. QT样式表文件使用方法与步骤

5. QT内置样式

6. QT常见基本样式

---

1. 概述

Qt提供了一种称为Qt样式表（Qt Style Sheets）的机制，可以用于自定义和美化Qt应用程序的用户界面（UI）。

使用Qt样式表，你可以通过类似CSS的语法来定义UI元素的外观和布局，包括颜色、字体、边框、背景等。

以下是一些常用的Qt样式表属性和用法：

1. 选择器（Selectors）：用于选择要应用样式的UI元素，可以使用对象名（object name）或类名（class name）作为选择器，也可以使用通配符和层级选择器。

   QPushButton {
       color: red;                    // 应用到所有QPushButton类型的按钮
   }
   
   QCheckBox#myCheckBox {
       font-size: 14px;               // 应用到objectName为"myCheckBox"的QCheckBox
   }
   
   QLabel.warning {
       background-color: yellow;      // 应用到class name为"warning"的QLabel
   }
   

2. 属性设置：可以使用属性和值的形式来设置UI元素的外观。

   QPushButton {
       color: red;
       background-color: lightblue;    // 设置文本颜色和背景色
       border: 1px solid gray;         // 设置边框样式
   }
   
   QCheckBox:checked {
       color: green;                   // 设置选中状态的文本颜色
   }
   

3. 盒模型属性：可以设置内边距（padding），外边距（margin），以及元素本身的尺寸和位置。

   QPushButton {
       padding: 5px;
       margin: 10px;
       width: 100px;
       height: 30px;                   // 设置内外边距、宽度和高度
   }
   
   QLabel {
       position: absolute;             // 设置绝对定位
       top: 50px;
       left: 100px;
   }
   

4. 伪状态（Pseudo-states）：用于设置特定状态下的样式，如鼠标悬停（hovered）、按下（pressed）等。

   QPushButton:hover {
       background-color: lightgray;    // 鼠标悬停时的背景颜色
   }
   
   QCheckBox:indeterminate {
       color: orange;                  // 设置不确定状态的文本颜色
   }
   
   QRadioButton:checked {
       image: url(checked.png);        // 设置选中状态时的自定义图像
   }
   

除了上述基本用法，Qt样式表还支持更多高级功能，如渐变、阴影效果、动画和自定义部件样式等。

你可以通过在Qt应用程序中设置样式表来改变UI的外观和布局，使其更符合自己的需求和设计。

有关更详细的用法和属性，请查阅Qt文档中关于Qt样式表的部分。

2. CSS

CSS（Cascading Style Sheets）样式表是一种用于描述HTML或XML文档的展示样式的语言。它为网页提供了丰富的样式控制和布局选项，使网页开发人员能够轻松地定义文档元素的外观和排版。

以下是一些常用的CSS样式表属性和用法：

1. 选择器（Selectors）：用于选择要应用样式的HTML元素，可以使用标签名、class、id等作为选择器，也可以使用组合选择器。

   h1 {
       color: red;                    /* 应用到所有
   标签 */
   }
   
   .my-class {
       font-size: 14px;               /* 应用到class为"my-class"的元素 */
   }
   
   #my-id {
       background-color: yellow;      /* 应用到id为"my-id"的元素 */
   }
   
   p.my-class-fancy {
       color: blue;                   /* 应用到同时具有class "my-class-fancy"和
   标签的元素 */
   }
   

2. 属性设置：可以使用属性和值的形式来设置元素的外观。

   h1 {
       color: red;
       background-color: lightblue;    /* 设置文本颜色和背景颜色 */
       border: 1px solid gray;         /* 设置边框样式 */
   }
   
   .my-class {
       font-weight: bold;              /* 设置字体粗体 */
   }
   
   #my-id {
       text-decoration: underline;     /* 设置文本下划线 */
   }
   

3. 盒模型属性：可以设置内边距（padding）、外边距（margin），以及元素本身的尺寸和位置。

   h1 {
       padding: 10px;
       margin-top: 20px;
       width: 300px;
       height: 50px;                   /* 设置内边距、外边距、宽度和高度 */
   }
   
   .my-class {
       position: absolute;             /* 设置绝对定位 */
       top: 50px;
       left: 100px;
   }
   

4. 伪类（Pseudo-classes）：用于设置特定状态下元素的样式，如鼠标悬停（:hover）、点击（:active）等。

   a:hover {
       color: green;                   /* 鼠标悬停时的文本颜色 */
   }
   
   input:focus {
       border: 2px solid blue;         /* 获得焦点时的边框样式 */
   }
   
   li:nth-child(odd) {
       background-color: lightgray;    /* 设置奇数位置的
   元素的背景颜色 */
   }
   

CSS样式表还支持更多高级功能，如渐变、阴影效果、动画和媒体查询等。

使用CSS样式表，可以轻松地自定义网页的外观和布局，并使其具有吸引力和良好的用户体验。

对于更详细的属性和用法，请参考CSS的相关文档和教程。

3. QSS示例

以下是一些Qt样式表（QSS）的示例，展示了如何使用QSS来自定义Qt应用程序的UI外观：

1. 设置全局样式：

/* 设置所有按钮的背景色和文本颜色 */
QPushButton {
    background-color: lightblue;
    color: white;
}

/* 设置所有标签的字体和字体大小 */
QLabel {
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/* 设置窗口的背景图片 */
QWidget {
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-position: center;
}

1. 设置特定对象的样式：

/* 设置特定按钮的尺寸、背景颜色和边框样式 */
QPushButton#myButton {
    width: 100px;
    height: 30px;
    background-color: lightgreen;
    border: 1px solid darkgreen;
}

/* 设置特定文本框的字体样式和内边距 */
QLineEdit.myLineEdit {
    font-family: Verdana, sans-serif;
    padding: 5px;
}

/* 设置特定标签的文本颜色和背景颜色 */
QLabel.warningLabel {
    color: red;
    background-color: lightyellow;
}

1. 使用伪状态和伪类：

/* 设置鼠标悬停时按钮的背景颜色 */
QPushButton:hover {
    background-color: lightgray;
}

/* 设置按下按钮时的背景颜色和文本样式 */
QPushButton:pressed {
    background-color: darkgray;
    color: white;
}

/* 设置表格中奇数行的背景颜色 */
QTableView QAbstractItemView::item:nth-child(odd) {
    background-color: lightgray;
}

/* 设置选中行的背景颜色和文本颜色 */
QTableView QAbstractItemView::item:selected {
    background-color: navy;
    color: white;
}

这些示例只是QSS的一部分用法，其中展示了一些常见的样式设置。你可以根据自己的需求定制和设计Qt应用程序的样式表，以创建独特的UI外观。在应用QSS样式表时，通常需要使用setStyleSheet()函数将样式表应用于Qt对象或整个应用程序。详细的QSS语法和属性，请参考Qt的官方文档和样式表部分。

4. QT样式表文件使用方法与步骤

fangfgnaf在Qt中，你可以将样式表内容保存到一个独立的样式表文件中，然后在应用程序中引用该样式表文件来设置UI的外观。以下是使用样式表文件的步骤：

1. 创建一个独立的样式表文件，通常使用.qss作为文件扩展名，比如styles.qss。

2. 在样式表文件中编写所需的样式规则，就像在QSS中编写样式一样。

   /* styles.qss */
   
   QPushButton {
       background-color: lightblue;
       color: white;
   }
   
   QLabel {
       font-family: Arial, sans-serif;
       font-size: 14px;
   }
   
   QWidget {
       background-image: url(background.jpg);
       background-repeat: no-repeat;
       background-position: center;
   }
   

3. 在应用程序中加载样式表文件，并应用于相应的Qt对象或整个应用程序。

   // main.cpp
   
   #include 
   #include 
   
   int main(int argc, char *argv[])
   {
       QApplication app(argc, argv);
   
       // 创建一个样式表文件对象
       QFile styleFile(":/styles.qss");  // 根据实际的文件路径或资源路径进行修改
   
       if (styleFile.open(QFile::ReadOnly))
       {
           // 读取样式表文件内容
           QString styleSheet = QLatin1String(styleFile.readAll());
   
           // 设置样式表
           app.setStyleSheet(styleSheet);
       }
   
       // ... 创建和显示Qt对象
   
       return app.exec();
   }
   

   在上述示例中，styles.qss文件被读取并加载到styleSheet变量中，然后通过setStyleSheet()方法设置为应用程序的样式表。:/styles.qss是资源路径，可以根据你的实际情况进行修改。

提示：如果要将样式表文件作为资源文件进行管理，可以在Qt项目中的.qrc文件中添加样式表文件并使用资源路径来引用。

通过使用样式表文件，你可以更好地组织和管理UI的样式规则，方便维护和重用。同时，你可以在不重新编译应用程序的情况下修改样式表文件，使得UI的外观可以灵活地调整和定制。

5. QT内置样式

Qt框架默认提供了几种内置的样式，你可以直接在应用程序中使用它们。

以下是几个常用的Qt现有样式：

1. Fusion样式（默认样式）：这是Qt框架默认的样式，它在不同的操作系统上提供了一致的外观。

2. Windows样式：这是Windows操作系统的原生外观样式，可以在Qt应用程序中使用。

3. macOS样式：这是macOS操作系统的原生外观样式，同样可以在Qt应用程序中使用。

4. WindowsVista样式：仿效Windows Vista风格的外观样式。

5. WindowsXP样式：仿效Windows XP风格的外观样式。

使用这些样式非常简单，只需在应用程序中设置所需的样式即可。以下是使用内置样式的示例代码：

#include 
#include 

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    // 设置Fusion样式
    app.setStyle(QStyleFactory::create("Fusion"));

    // 设置Windows样式
    // app.setStyle(QStyleFactory::create("Windows"));

    // 设置macOS样式
    // app.setStyle(QStyleFactory::create("Macintosh"));

    // 设置WindowsVista样式
    // app.setStyle(QStyleFactory::create("WindowsVista"));

    // 设置WindowsXP样式
    // app.setStyle(QStyleFactory::create("WindowsXP"));

    // ... 创建和显示Qt对象

    return app.exec();
}

通过调用app.setStyle()方法并使用QStyleFactory::create()函数提供的内置样式之一，可以设置所需的样式。在上述示例中，使用了Fusion样式，你可以注释掉其他样式并选择你希望使用的样式。

除了这些内置样式，Qt还支持通过自定义QStyle子类来创建和使用自定义样式。这样可以实现完全定制的UI外观和行为。

6. QT常见基本样式

在Qt中，你可以使用样式表（Style Sheets）来定制和美化用户界面。以下是一些常见的样式，你可以通过样式表来实现它们：

1. 背景颜色和背景图片：

   QWidget {
       background-color: lightblue;
       background-image: url(image.png);
       background-repeat: no-repeat;
       background-position: center;
   }
   

2. 按钮样式：

   QPushButton {
       background-color: lightblue;
       color: white;
       border-radius: 5px;
       padding: 5px 10px;
   }
   

3. 标签样式：

   QLabel {
       font-family: Arial, sans-serif;
       font-size: 14px;
       color: #333333;
   }
   

4. 文本框样式：

   QLineEdit {
       padding: 5px;
       border: 1px solid #999999;
       border-radius: 3px;
   }
   

5. 表格样式：

   QTableView {
       background-color: white;
       alternate-background-color: #f2f2f2;
       gridline-color: #cccccc;
   }
   

6. 进度条样式：

   QProgressBar {
       background-color: #f0f0f0;
       border: 1px solid #999999;
       border-radius: 5px;
   }
   

以上只是一些常见的样式示例，你可以使用更多的CSS属性来实现更复杂的效果。在Qt的样式表中，你可以设置背景颜色、字体样式、边框样式、尺寸和间距等。同时，Qt还提供了更高级的样式定制能力，比如自定义绘制、状态切换和动画效果等。

要应用这些样式，你可以将样式表内容应用于相应的Qt对象，通过调用setStyleSheet()方法或使用Qt Designer界面编辑器。

希望这些常见的样式示例能够帮助你美化你的Qt用户界面。你可以根据实际需求和创意来定制更多独特的样式。