目录

1. QSS 的基本语法

2. 选择器

3. 常用属性

4. 应用 QSS

5. 常见问题

6. 示例

7. 基本控件qss美化示例

1. 按钮（QPushButton）美化示例

2. 标签（QLabel）美化示例

3. 输入框（QLineEdit）美化示例

4. 滑动条（QSlider）美化示例

5. 进度条（QProgressBar）美化示例

6. 复选框（QCheckBox）美化示例

7. 下拉框（QComboBox）美化示例

---

        QSS（Qt Style Sheet）是 Qt 框架中用于定制界面样式的一种方式，类似于 CSS（层叠样式表）。通过 QSS，开发者可以轻松地改变 Qt 应用程序的外观，包括窗口、按钮、标签等各种控件的样式。以下是 QSS 的详细解释：

1. QSS 的基本语法

QSS 的基本语法与 CSS 类似，由选择器、属性和值组成。基本格式如下：

选择器 {
    属性1: 值1;
    属性2: 值2;
    ...
}

2. 选择器

选择器用于指定应用样式的控件。以下是一些常见的选择器类型：

• 类选择器：选择特定类的控件。例如：

  QPushButton {
      color: red;
  }
  

  上面的代码会将所有 QPushButton 的颜色设置为红色。

• id选择器：选择具有特定对象名的控件。QSS 不直接支持 CSS 中的 # 符号，而是使用 QObject::setObjectName() 来设置对象名，然后在 QSS 中用 # 来选择。例如：

  #myButton {
      background-color: blue;
  }
  

  上面的代码会将对象名为 myButton 的按钮的背景色设置为蓝色。

• 子控件选择器：选择控件的子控件。例如：

  QComboBox::drop-down {
      image: url(dropdown.png);
  }
  

  上面的代码会将 QComboBox 的下拉按钮的图标设置为 dropdown.png。

• 伪状态选择器：选择处于特定状态的控件。例如：

  QPushButton:hover {
      background-color: yellow;
  }
  

  上面的代码会在鼠标悬停在按钮上时，将按钮的背景色设置为黄色。

3. 常用属性

以下是一些常用的 QSS 属性：

• color：设置文本颜色。例如：

  QLabel {
      color: green;
  }
  

• background-color：设置背景颜色。例如：

  QFrame {
      background-color: #f0f0f0;
  }
  

• border：设置边框。例如：

  QLineEdit {
      border: 2px solid gray;
  }
  

• font：设置字体。例如：

  QTextEdit {
      font: bold 12pt "Arial";
  }
  

• padding：设置内边距。例如：

  QPushButton {
      padding: 5px;
  }
  

• margin：设置外边距。例如：

  QGroupBox {
      margin: 10px;
  }
  

4. 应用 QSS

应用 QSS 到 Qt 应用程序中可以通过以下几种方式：

• 通过代码应用：
  在代码中使用 setStyleSheet() 方法直接设置样式表。例如：

  ui->myButton->setStyleSheet("color: red;");
  

• 全局应用：
  可以将 QSS 应用到整个应用程序的所有控件。例如：

  QApplication::setStyleSheet("QPushButton { color: blue; }");
  

5. 常见问题

• 资源文件：QSS 支持使用资源文件（.qrc）中的图片或字体。可以通过 url() 函数来引用资源文件中的内容。
• 兼容性：QSS 在不同的操作系统上可能会有不同的表现，特别是对于系统控件的样式。

6. 示例

以下是一个简单的 QSS 示例，将所有按钮的文本颜色设置为红色，背景色设置为蓝色：

QPushButton {
    color: red;
    background-color: blue;
}

7. 基本控件qss美化示例

以下是一些关于 QSS 的示例，展示如何对按钮、滑动条等控件进行美化。

1. 按钮（QPushButton）美化示例

QPushButton {
    background-color: #4CAF50; /* 背景色 */
    color: white;              /* 字体颜色 */
    border: none;              /* 去除边框 */
    padding: 10px 20px;       /* 内边距 */
    border-radius: 5px;       /* 圆角 */
    font-size: 16px;          /* 字体大小 */
}

QPushButton:hover {
    background-color: #45a049; /* 悬停时背景色 */
}

QPushButton:pressed {
    background-color: #388e3c; /* 被按下时背景色 */
}

2. 标签（QLabel）美化示例

QLabel {
    color: #333;                /* 字体颜色 */
    font-size: 14px;           /* 字体大小 */
    font-weight: bold;         /* 粗体 */
    padding: 5px;              /* 内边距 */
    border: 1px solid #ccc;    /* 边框 */
    border-radius: 3px;       /* 圆角 */
    background-color: #f9f9f9; /* 背景色 */
}

3. 输入框（QLineEdit）美化示例

QLineEdit {
    border: 2px solid #999;      /* 边框 */
    border-radius: 5px;         /* 圆角 */
    padding: 8px;                /* 内边距 */
    font-size: 14px;            /* 字体大小 */
    color: #333;                /* 字体颜色 */
    background-color: #f0f0f0;  /* 背景色 */
}

QLineEdit:focus {
    border: 2px solid #4CAF50;  /* 聚焦时边框颜色 */
}

4. 滑动条（QSlider）美化示例

QSlider {
    background: #ddd;            /* 背景色 */
}

QSlider::groove:horizontal {
    background: #bdbdbd;        /* 轨道背景 */
    height: 8px;                /* 轨道高度 */
    border-radius: 4px;        /* 圆角 */
}

QSlider::handle:horizontal {
    background: #4CAF50;        /* 滑块颜色 */
    border: 1px solid #388e3c;  /* 滑块边框 */
    width: 16px;                /* 滑块宽度 */
    margin: -4px 0;            /* 上下居中 */
    border-radius: 8px;        /* 圆角 */
}

QSlider::handle:horizontal:hover {
    background-color: #45a049; /* 悬停时滑块颜色 */
}

5. 进度条（QProgressBar）美化示例

QProgressBar {
    border: 2px solid #bbb;         /* 边框 */
    border-radius: 5px;            /* 圆角 */
    text-align: center;             /* 文本居中 */
    background-color: #f0f0f0;     /* 背景色 */
    margin: 5px;                   /* 外边距 */
}

QProgressBar::chunk {
    background-color: #4CAF50;     /* 已完成部分的背景色 */
    border-radius: 5px;            /* 圆角 */
}

6. 复选框（QCheckBox）美化示例

QCheckBox {
    spacing: 5px;                  /* 复选框与文本间距 */
}

QCheckBox::indicator {
    width: 20px;                   /* 指示器宽度 */
    height: 20px;                  /* 指示器高度 */
}

QCheckBox::indicator:unchecked {
    border: 1px solid #999;        /* 未选中状态的边框 */
    background-color: #f0f0f0;    /* 背景色 */
}

QCheckBox::indicator:checked {
    background-color: #4CAF50;     /* 选中状态的背景色 */
    border: 1px solid #388e3c;     /* 选中状态的边框 */
}

7. 下拉框（QComboBox）美化示例

QComboBox {
    border: 1px solid #999;       /* 边框 */
    border-radius: 5px;          /* 圆角 */
    padding: 5px;                 /* 内边距 */
    background-color: #f9f9f9;   /* 背景色 */
    font-size: 14px;              /* 字体大小 */
}

QComboBox::drop-down {
    border-left: 1px solid #999;  /* 下拉按钮的边框 */
}

QComboBox::indicator {
    width: 20px;                   /* 指示器宽度 */
    height: 20px;                  /* 指示器高度 */
}

QComboBox QAbstractItemView {
    background-color: #ffffff;    /* 下拉列表的背景色 */
    border: 1px solid #999;        /* 边框 */
    selection-background-color: #4CAF50; /* 选中项背景色 */
    selection-color: white;                /* 选中项字体颜色 */
}