Qt 之QSS美化滑动条

王摆摆摆

已于 2022-11-11 09:00:08 修改

阅读量2.2k

点赞数 4

分类专栏： Qss 文章标签： css qt c++

于 2021-04-22 00:04:03 首次发布

本文链接：https://blog.csdn.net/wangbaba_1/article/details/115986009

版权

Qss 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用QSS（Qt Style Sheets）来定制Qt应用程序的垂直滚动条，包括设置滚动条的基本样式、滑动柄的外观、上下箭头的样式以及鼠标悬停时的效果。通过调整背景颜色、边框半径、图片资源等属性，实现了滚动条的视觉美化。

摘要由CSDN通过智能技术生成

Qt 之QSS美化滑动条：
最终效果：
在这里插入图片描述


/*设置垂直滚动条基本样式*/
QScrollBar:vertical {
    width: 8px;
    background: rgba(0,0,0,0%);
    margin: 0px,0px,0px,0px;
    /*留出9px给上面和下面的箭头*/
    padding-top: 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;
}

/*这个应该是设置下箭头的，3.png就是箭头*/
QScrollBar::add-line:vertical 
{
    height: 9px;
    width: 8px;
    border-image: url(:/image/123.png);
    subcontrol-position: bottom;
}

/*设置上箭头 */
QScrollBar::sub-line:vertical 
{
    height: 9px;
    width: 8px;
    border-image: url(:/image/123.png);
    subcontrol-position: top;
}

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

/*当鼠标放到下箭头上的时候*/
QScrollBar::sub-line:vertical:hover 
{
    height: 9px;
    width: 8px;
    border-image: url(:/image/456.png);
    subcontrol-position: top;
}


/*当滚动条滚动的时候，上面的部分和下面的部分*/
QScrollBar::sub-page:vertical {
    background: rgb(78,0,80);
    border-radius: 4px;
}

QScrollBar::add-page:vertical 
{
    background: rgb(78,0,80);
    border-radius: 4px;
}