QT 中自定义QScrollBar 风格(宽度、滑块大小等)

            最近在Qt上做应用程序开发时需要对一个文本编辑框的滚动条进行设置,在网络上查阅了很多网友的意见,多次尝试验证后终于达到目标,现记录整理本次试验的过程,以便参考查阅。

       本人在应用程序中封装PeTextEditor 类用来编辑、加载文本,文本编辑器右侧的滚动条的滑块会根据内容大小进行放大和缩小,当加载文本文件很大时,滑块很小不方便手动操作,故需对滚动条的格式进行修改设计。

       Qt设置滚动条样式的方式有两种,一种直接在程序中写,适用于样式不多的情况;另一种,写入到文件中,适用用样式较大且需要提供换肤功能的情况。

         1.写入到文件中,新建scrollBar.qss文件,然后编辑以下内容:

// 设置垂直滚动条基本样式
QScrollBar:vertical { width:8px; background:rgba(0,0,0,0%); margin:0px,0px,0px,0px; padding-top:9px; // 留出9px给上面和下面的箭头 padding-bottom:9px; } QScrollBar::handle:vertical { width:8px; background:rgba(0,0,0,25%); border-radius:4px; // 滚动条两端变成椭圆 min-height:20; } QScrollBar::handle:vertical:hover { width:8px; background:rgba(0,0,0,50%); // 鼠标放到滚动条上的时候,颜色变深 border-radius:4px; min-height:20; } QScrollBar::add-line:vertical // 这个应该是设置下箭头的,3.png就是箭头 { height:9px;width:8px; border-image:url(:/images/a/3.png); subcontrol-position:bottom; } QScrollBar::sub-line:vertical // 设置上箭头 { height:9px;width:8px; border-image:url(:/images/a/1.png); subcontrol-position:top; } QScrollBar::add-line:vertical:hover // 当鼠标放到下箭头上的时候 { height:9px;width:8px; border-image:url(:/images/a/4.png); subcontrol-position:bottom; } QScrollBar::sub-line:vertical:hover // 当鼠标放到下箭头上的时候 { height:9px;width:8px; border-image:url(:/images/a/2.png); subcontrol-position:top; } QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical // 当滚动条滚动的时候,上面的部分和下面的部分 { background:rgba(0,0,0,10%); border-radius:4px; }

         在程序中读取文件,调用文件中的设置,代码如下:

QFile file(":/scrollbar.qss");
file.open(QFile::ReadOnly);
listWidget->verticalScrollBar()->setStyleSheet(file.readAll());
       这样即可把界面上滚动条设置成文件中设计的格式。


2.直接在程序中设置,适用于不复杂的格式,本次试验就是直接写入程序中,代码示例如下:

    textEdit->verticalScrollBar()->setStyleSheet(

                                                 "QScrollBar{ background: #F0F0F0; width:30px ;margin-top:16px;margin-bottom:16px }"
                                                 "QScrollBar::handle:vertical{ background: #EAEAED; min-height: 80px ;width:30px }"
                                                 "QScrollBar::sub-line:vertical{height:16px;subcontrol-position:top;subcontrol-origin:margin;}"
                                                 "QScrollBar::add-line:vertical{height:16px;subcontrol-position:bottom;subcontrol-origin:margin;}"
                                                 );

       这样就能把设置滚动条的宽度、滑块大小及上下边缘箭头。需要其他设计可参考上述文件中设计的详细格式。

特别注意:

       在设置滑块属性时,一定要先设置QScrollBar 和 QScrollBar::handle:vertical 的背景颜色或图片,不然设置其他属性不生效,亲测可用。


本文针对垂直滚动条进行示例说明,水平滚动条也类似。只需要把vertical 换成 horizontal 即可。


        







你可能感兴趣的:(QT)