Qt QScrollBar滚动条样式设置

QScrollBar vertical垂直滚动条分为sub-line、add-line、add-page、sub-page、up-arrow、down-arrow和handle几个部分。
QScrollBar horizontal水平滚动条分为sub-line、add-line、add-page、sub-page、left-arrow、right-arrow和handle几个部分。

QScrollArea qss样式注释

#scrollarea_scrollArea_2,
#scrollarea_widget_2 {
  border: none;
  background-color: rgb(30, 30, 30);
}

/* 整个滚动条区域样式 */
QScrollBar:vertical {
  border: 2px solid grey;
  background: #32CC99;
  width: 30px;
  /* 滑块活动区域间距，这个间距如果小于add-line和sub-line的高度或宽度滚动滑块将会覆盖add-line和sub-line，所以可以通过margin: 0px 0 0px 0;来隐藏滚动条两头区域*/
  margin: 32px 0 32px 0;
}

/* 滑块区域样式 */
QScrollBar::handle:vertical {
  background: rgb(250, 3, 3);
  border: 2px solid rgb(8, 8, 8);
  border-radius: 10px;
  /*无效，宽度由QScrollBar width控制*/
  width: 10px;
  /*可以通过margin设置滑块小于QScrollBar width，再鼠标滑过滑块样式中再重新设置margin，达到鼠标滑过滑块变大的效果，但是圆角设置border-radius不生效了！！！*/
  margin: 0 5px 0 5px;
  min-height: 50px;
  /*max-height无效!!!*/
  max-height: 50px;
}

/* 鼠标滑过滑块样式 */
QScrollBar::handle:vertical:hover,
QScrollBar::handle:vertical:pressed {
  border-radius: 10px;
  margin: 0 1px 0 1px;
  background: rgb(221, 81, 17);
}

/* 向上区域样式 */
QScrollBar::sub-line:vertical {
  border: 2px solid rgb(18, 208, 221);
  background: #0c5a20;
  height: 30px;
  subcontrol-position: top;
  subcontrol-origin: margin;
}

/* 向下区域样式 */
QScrollBar::add-line:vertical {
  border: 2px solid rgb(68, 218, 31);
  background: #123026;
  height: 30px;
  subcontrol-position: bottom;
  subcontrol-origin: margin;
}

/* 向上箭头样式 */
QScrollBar::up-arrow:vertical {
  border-image:url(:/scrollarea/resources/image/scrollarea/arrowup.png);
  border: 2px solid rgb(22, 12, 68);
  width: 20;
  height: 20;
  background: rgb(130, 141, 165);
}

/* 向下箭头样式 */
QScrollBar::down-arrow:vertical {
  border-image:url(:/scrollarea/resources/image/scrollarea/arrowdown.png);
  border: 2px solid rgb(223, 104, 104);
  width: 20;
  height: 20;
  background: rgb(233, 159, 177);
}

/* 当鼠标放到向上区域的时候 */
QScrollBar::sub-line:vertical:hover {}

/* 当鼠标放到向下区域的时候 */
QScrollBar::add-line:vertical:hover {}

/* 当鼠标放到向上箭头上的时候 */
QScrollBar::up-arrow:vertical:hover {
  /* height:9px;width:8px; */
  /* border-image:url(:/images/a/2.png); */
  subcontrol-position: top;
}

/* 当鼠标放到向下箭头上的时候 */
QScrollBar::down-arrow:vertical:hover {
  /* height:9px;width:8px; */
  /* border-image:url(:/images/a/4.png); */
  subcontrol-position: bottom;
}

/* 滑块上面区域样式 */
QScrollBar::sub-page:vertical {
  background: rgb(117, 196, 13);
  border: 2px solid rgb(223, 104, 104);
}

/* 滑块下面区域样式 */
QScrollBar::add-page:vertical {
  background: rgba(255, 102, 11);
  border: 2px solid rgb(223, 104, 104);
}

/* ############################################ */
/* 整个滚动条区域样式 */
QScrollBar:horizontal {
  border: 2px solid grey;
  background: #32CC99;
  height: 30px;
  /* 滑块活动区域间距，这个间距如果小于add-line和sub-line的高度或宽度滚动滑块将会覆盖add-line和sub-line，所以可以通过margin: 0px 0 0px 0;来隐藏滚动条两头区域*/
  margin: 0 32px 0 32px;
}

/* 滑块区域样式 */
QScrollBar::handle:horizontal {
  background: rgb(250, 3, 3);
  border: 2px solid rgb(8, 8, 8);
  /*无效，高度由QScrollBar height控制*/
  height: 10px;
  /*可以通过margin设置滑块小于QScrollBar height，再鼠标滑过滑块样式中再重新设置margin，达到鼠标滑过滑块变大的效果*/
  margin: 5px 0 5px 0;
  min-width: 50px;
  /*max-width无效!!!*/
  max-width: 50px;
}

/* 鼠标滑过滑块样式 */
QScrollBar::handle:horizontal:hover,
QScrollBar::handle:horizontal:pressed {
  margin: 0 1px 0 1px;
  background: rgb(221, 81, 17);
}

/* 向左区域样式 */
QScrollBar::sub-line:horizontal {
  border: 2px solid rgb(18, 208, 221);
  background: #0c5a20;
  width: 30px;
  /*sub-line:horizontal要设置height但是sub-line:vertical却不要设置width！！！*/
  height: 20px;
  subcontrol-position: left;
  subcontrol-origin: margin;
}

/* 向右区域样式 */
QScrollBar::add-line:horizontal {
  border: 2px solid rgb(68, 218, 31);
  background: #123026;
  width: 30px;
  height: 20px;
  subcontrol-position: right;
  subcontrol-origin: margin;
}

/* 向左箭头样式 */
QScrollBar::left-arrow:horizontal {
  border-image:url(:/scrollarea/resources/image/scrollarea/arrow-left.png);
  border: 2px solid rgb(22, 12, 68);
  width: 20;
  height: 20;
  background: rgb(130, 141, 165);
}

/* 向右箭头样式 */
QScrollBar::right-arrow:horizontal {
  border-image:url(:/scrollarea/resources/image/scrollarea/arrowright.png);
  border: 2px solid rgb(223, 104, 104);
  width: 20;
  height: 20;
  background: rgb(233, 159, 177);
}

/* 当鼠标放到向左区域的时候 */
QScrollBar::sub-line:horizontal:hover {}

/* 当鼠标放到向右区域的时候 */
QScrollBar::add-line:horizontal:hover {}

/* 当鼠标放到向左箭头上的时候 */
QScrollBar::left-arrow:horizontal:hover {
  /* height:9px;width:8px; */
  /* border-image:url(:/images/a/2.png); */
  subcontrol-position: top;
}

/* 当鼠标放到向右箭头上的时候 */
QScrollBar::right-arrow:horizontal:hover {
  /* height:9px;width:8px; */
  /* border-image:url(:/images/a/4.png); */
  subcontrol-position: bottom;
}

/* 滑块左面区域样式 */
QScrollBar::sub-page:horizontal {
  background: rgb(117, 196, 13);
  border: 2px solid rgb(223, 104, 104);
}

/* 滑块右面区域样式 */
QScrollBar::add-page:horizontal {
  background: rgba(255, 102, 11);
  border: 2px solid rgb(223, 104, 104);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206

QScrollArea qss样式美化

/* QScrollArea {
  border: none;
  background: none;
} */

/* 整个垂直滚动条区域样式 */
QScrollBar:vertical {
  border: none;
  background: rgb(30, 30, 30);
  width: 10px;
  margin: 0px 0 0px 0;
}

/* 整个水平滚动条区域样式 */
QScrollBar:horizontal {
  border: none;
  background: rgb(30, 30, 30);
  height: 10px;
  margin: 0px 0 0px 0;
}

/* 滑块区域样式 */
QScrollBar::handle:vertical {
  background: rgb(66, 66, 66);
  min-height: 20px;
  border-radius: 5px;
  border: none;
  /* margin: 0 1px 0 1px; */
}

QScrollBar::handle:horizontal {
  background: rgb(66, 66, 66);
  min-height: 20px;
  border-radius: 5px;
  border: none;
}

/* 鼠标滑过滑块样式 */
QScrollBar::handle:vertical:hover,
QScrollBar::handle:vertical:pressed {
  background: rgb(79, 79, 79);
  /* margin: 0 0 0 0; */
}

QScrollBar::handle:horizontal:hover,
QScrollBar::handle:horizontal:pressed {
  background: rgb(79, 79, 79);
}

/* 向下箭头样式 */
QScrollBar::add-line:vertical {
  border: none;
  background: none;
  height: 0px;
  subcontrol-position: bottom;
  subcontrol-origin: margin;
}

/* 向右箭头样式 */
QScrollBar::add-line:horizontal {
  border: none;
  background: none;
  height: 0px;
  subcontrol-position: bottom;
  subcontrol-origin: margin;
}

/* 向上箭头样式 */
QScrollBar::sub-line:vertical {
  border: none;
  background: none;
  height: 0px;
  subcontrol-position: top;
  subcontrol-origin: margin;
}

/* 向左箭头样式 */
QScrollBar::sub-line:horizontal {
  border: none;
  background: none;
  height: 0px;
  subcontrol-position: top;
  subcontrol-origin: margin;
}

/* 滚动条上面和下面区域样式 */
QScrollBar::sub-page:vertical,
QScrollBar::add-page:vertical {
  background: none;
  width: 0px;
  height: 0px;
}

/* 滚动条左面和右面区域样式 */
QScrollBar::sub-page:horizontal,
QScrollBar::add-page:horizontal {
  background: none;
  width: 0px;
  height: 0px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

重写QScrollArea实现QScrollArea获得焦点时qscrollbar才显示，使用时将QScrollArea提升为自定义的QScrollArea。

#pragma once
#include 

class MyQScrollArea : public QScrollArea
{
  Q_OBJECT
private:
protected:
  void enterEvent(QEvent *event) override;
  void leaveEvent(QEvent *event) override;

public:
  MyQScrollArea(QWidget *parent = nullptr);
  ~MyQScrollArea();
};


#include "myqscrollarea.h"

MyQScrollArea::MyQScrollArea(QWidget *parent) : QScrollArea(parent)
{
  // setMouseTracking(true);
  verticalScrollBar()->hide();
  horizontalScrollBar()->hide();
}

MyQScrollArea::~MyQScrollArea()
{
}

void MyQScrollArea::enterEvent(QEvent *event)
{
  verticalScrollBar()->show();
  horizontalScrollBar()->show();
  QAbstractScrollArea::enterEvent(event);
}
void MyQScrollArea::leaveEvent(QEvent *event)
{
  verticalScrollBar()->hide();
  horizontalScrollBar()->hide();
  QAbstractScrollArea::leaveEvent(event);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

问题：
目前没有找到在qss中设置qscrollarea获得焦点时qscrollbar才显示的样式设置方法，目前使用重写QScrollArea通过QScrollArea::enterEvent和QScrollArea::leaveEvent来控制horizontalScrollBar verticalScrollBar()->show()或hide()。

可以通过margin设置滑块小于QScrollBar width，再鼠标滑过滑块样式中再重新设置margin，达到鼠标滑过滑块变大的效果，但是圆角设置border-radius不生效了！！！

在qss中QScrollBar::handle:vertical的max-height无效!!! QScrollBar::handle:horizontal的max-width无效!!! 目前暂时找不到方法！！！

注意:
就算不需要显示sub-line、add-line。也要对sub-line、add-line设置subcontrol-position和subcontrol-origin属性，否则区域布局异常。
在Windows下如果不对滚动条样式设置add-page和sub-page，同时还设置滚动条背景色为深颜色的话，那么滚动条的背景色会变成花斑色，有两种颜色交叉，即color-dotted。这个时候其实只要设置一下add-page和sub-page就可以解决了（Mac下倒是没有这个问题）。

参考：
https://doc.qt.io/qt-6/stylesheet-examples.html#customizing-qscrollbar
https://blog.csdn.net/wang13342322203/article/details/82682388
https://blog.csdn.net/kaida1234/article/details/104846702