今天在知乎上看到一篇文章,描述使用样式表设置圆角滚动条时,圆角四周会有黑色区域而非透明,文章里最后借用 QSlider 来实现圆角滚动条。
我好奇 Qt 居然会出现这样的Bug,就研究了一下,顺便做个记录。
QScrollBar 有一些子控件区域,handle 为滑块, add-line、sub-line 默认是滚动条两侧箭头区域,add-page、sub-page 是滑块两侧区域,使用以下样式表设置圆角,除了滑块与主背景,都设置为透明:
QScrollBar:horizontal{
background: #309AB8;
border-radius: 15px;
min-height: 30px;
max-height: 30px;
}
QScrollBar::handle:horizontal{
background: #FFFFFF;
border-radius: 15px;
min-width: 30px;
}
QScrollBar::add-page,
QScrollBar::sub-page{
background: transparent;
}
QScrollBar::add-line,
QScrollBar::sub-line{
background: transparent;
}
一开始尝试调整子控件的样式,无解,而且圆角四周会出现奇怪的刷新问题。
重写 QScrollBar::paintEvent,使用老方法自绘。发现即使不绘制子控件,也是会有黑色像素,调试源码猜测是绘制边框的问题。
在样式表里设置一下 “border: 1px solid transparent”,黑色像素居然没有了,只不过边框歪歪扭扭对不齐。
调试源码又看不明白源码是怎么绘制边框的,便在 paintEvent 什么都不做,发现整个滚动条区域居然都是黑色的:
这种情况在 Qt 中并不多见,经常自绘或者写无边框窗口总会遇到,无非是几个特定属性,查看 QScrollBar 源码的构造函数发现:
尝试手动关闭该属性,黑色背景消失。
所以,根本原因在 Qt::WA_OpaquePaintEvent 被默认开启了,关闭掉就行了。测试过程中发现设置 “border-style: solid;”也可以解决,可以根据情况实际自己选择。
到此已经解决了问题,不过有两个问题还需要再回答。