Qt 自定义 滚动条 样式

http://www.cnblogs.com/xufeiyang/p/3314955.html

 今天是时候把软件中的进度条给美化美化了,最初的想法就是仿照QQ。

先前的进度条是这样

,默认的总是很难受欢迎的;美化之后的是这样

,怎么样?稍微好看一点点了吧,最后告诉你实现这个简单的效果在Qt只需要加几句简单的样式。下面就来吐槽吐槽,关于进度条样式的设置问题,欢迎评论交流,高手勿喷。

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

  1.写入到文件中,新建个xx.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.直接在程序中设置,简单

listWidget->verticalScrollBar()->setStyleSheet("QScrollBar:vertical"
                                                   "{"
                                                   "width:8px;"
                                                   "background:rgba(0,0,0,0%);"
                                                   "margin:0px,0px,0px,0px;"
                                                   "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;"
                                                   "}"
                                                   "QScrollBar::add-line:vertical"
                                                   "{"
                                                   "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;"
                                                   "}"
                                                   );

滚动条有两种,水平的和垂直的,我这里面只设置了垂直的,水平的其实差不多,只需要把 vertical 换成 horizontal。

更多的自定义样式可以参考http://www.zhouwenyi.com/name/193435,有点乱不过还能用,具体的意思我在上面已经添加注释。

样式中设计到一些图片,如果您需要源代码例子,请下载:ListWidget.rar.

转载请标明出处哦:http://www.cnblogs.com/xufeiyang/p/3314955.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端侠2.0

转:为什么 $("a").click()无效

我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久。前段时间的一次发呆,冒出了新的想法,于是就动手进行了测试。

56930
来自专栏十月梦想

Vue动画之使用volecity.js动画库

在vue中使用动画都要放在transition组件中,以后不再累述!我们还看上个例子!

1.6K50
来自专栏听雨堂

对asp.net响应事件的试验

1、可否把bind独立出来,在page_load中只是初次时bind,以后都在具体事件的处理中bind    实验:        page_load中,只作d...

22480
来自专栏前端小叙

页面加载中jquery逐渐消失效果实现

为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬。 html: <div id="l...

47590
来自专栏hotqin888的专栏

AutoCAD视图播放系统功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

13510
来自专栏企鹅号快讯

《小白HTML5成长之路32》把自定义弹窗做成控件的第一步

“小白,今天上午布局的那个弹窗想法不错!” 小白说道:“我只是用CSS布了一个局,还没有添加用户交互呢!” 老朱说:“不着急,像这种常用的功能你可以尝试把它做成...

253100
来自专栏vue学习

19、分类详情页之基本页面结构

具体关于路由的跳转就不多讲了,具体可以参考前面第5章vue-router之什么是编程式路由

12220
来自专栏从零开始学自动化测试

Selenium2+python自动化74-jquery定位

前言 元素定位可以说是学自动化的小伙伴遇到的一道门槛,学会了定位也就打通了任督二脉,前面分享过selenium的18般武艺,再加上五种js的定位大法。 这些还不...

28760
来自专栏韩东吉的Unity杂货铺

零基础入门 23: UGUI ScrollView

今天要分享的内容,是近期内关于UGUI的最后一篇,UGUI里的滚动视图ScrollView,后期的内容会根据项目实用的功能组件进行分享。

56410
来自专栏Jerry的SAP技术分享

巧用代理设计模式(Proxy Design Pattern)改善前端图片加载体验

这篇文章介绍一种使用代理设计模式(Proxy Design Pattern)的方法来改善您的前端应用里图片加载的体验。

12240

扫码关注云+社区

领取腾讯云代金券