QScrollBar样式表

1. 基本结构 

QScrollBar 的样式表由以下部分组成：

• 方向选择器：QScrollBar:vertical（垂直）或 QScrollBar:horizontal（水平）。

• 子控件：::handle（滑块）、::add-line（底部/右侧箭头）、::sub-line（顶部/左侧箭头）、::add-page（滑块后的轨道区域）、::sub-page（滑块前的轨道区域）。

• 伪状态：:hover（悬停）、:pressed（按下）、:disabled（禁用）等。

 2. 子控件详解

(1) 滚动条整体（QScrollBar）

• 作用：设置滚动条的整体尺寸、背景、边距等。

• 示例：

  QScrollBar:vertical {
      background: #f0f0f0;  /* 轨道背景色 */
      width: 12px;          /* 垂直滚动条宽度 */
      border: none;         /* 无边框 */
      margin: 2px;          /* 滚动条与边缘的间距 */
  }

(2) 滑块（::handle）

• 作用：定义滑块的样式。

• 示例：

  QScrollBar::handle:vertical {
      background: #c0c0c0;  /* 滑块颜色 */
      min-height: 20px;     /* 滑块最小高度（垂直）或宽度（水平） */
      border-radius: 6px;   /* 圆角 */
  }

(3) 箭头按钮（::add-line 和 ::sub-line）

• 作用：滚动条两端的箭头按钮。

• 示例（隐藏箭头）：

  QScrollBar::add-line:vertical,
  QScrollBar::sub-line:vertical {
      background: none;     /* 无背景 */
      border: none;         /* 无边框 */
      height: 0px;         /* 高度设为 0 */
  }

(4) 轨道区域（::add-page 和 ::sub-page）

• 作用：滑块前后的轨道区域。

• 示例（透明轨道）：

  QScrollBar::add-page:vertical,
  QScrollBar::sub-page:vertical {
      background: transparent; /* 透明背景 */
  }

---

3. 伪状态交互

(1) 悬停（:hover）

QScrollBar::handle:vertical:hover {
    background: #a0a0a0;  /* 悬停时颜色加深 */
}

(2) 按下（:pressed）

QScrollBar::handle:vertical:pressed {
    background: #808080;  /* 按下时颜色更深 */
}

(3) 禁用（:disabled）

QScrollBar:vertical:disabled {
    background: #e0e0e0;  /* 禁用状态轨道颜色 */
}

---

4. 完整示例代码

垂直滚动条样式

QString verticalStyle = 
    "QScrollBar:vertical {"
    "    background: #f0f0f0;"     // 轨道背景
    "    width: 12px;"             // 宽度
    "    margin: 2px;"
    "    border: none;"
    "}"
    "QScrollBar::handle:vertical {"
    "    background: #c0c0c0;"     // 滑块默认颜色
    "    min-height: 20px;"        // 最小高度
    "    border-radius: 6px;"
    "}"
    "QScrollBar::handle:vertical:hover {"
    "    background: #a0a0a0;"     // 悬停颜色
    "}"
    "QScrollBar::handle:vertical:pressed {"
    "    background: #808080;"     // 按下颜色
    "}"
    "QScrollBar::add-line:vertical,"
    "QScrollBar::sub-line:vertical {"
    "    height: 0px;"             // 隐藏箭头
    "    background: none;"
    "    border: none;"
    "}"
    "QScrollBar::add-page:vertical,"
    "QScrollBar::sub-page:vertical {"
    "    background: none;"        // 透明轨道区域
    "}";

水平滚动条样式

QString horizontalStyle = 
    "QScrollBar:horizontal {"
    "    background: #f0f0f0;"
    "    height: 12px;"            // 高度
    "    margin: 2px;"
    "    border: none;"
    "}"
    "QScrollBar::handle:horizontal {"
    "    background: #c0c0c0;"
    "    min-width: 20px;"         // 最小宽度
    "    border-radius: 6px;"
    "}"
    "/* 其他状态同垂直滚动条 */";

---

5. 高级技巧

(1) 动态渐变效果

QScrollBar::handle:vertical {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
        stop:0 #a0a0a0, stop:1 #c0c0c0);  /* 线性渐变 */
}

(2) 完全隐藏滚动条

QScrollBar:vertical {
    width: 0px;  /* 宽度设为 0，彻底隐藏 */
}

(3) 自定义箭头图标

QScrollBar::add-line:vertical {
    image: url(:/images/arrow-down.png);  /* 自定义箭头图片 */
    height: 16px;                         /* 图标高度 */
}