QT修改默认的滚动条样式
这几天写一个类似于悬浮窗的小程序,可是qt自带的滚动条实在难看,经过多番查找终于找到一个类似于qq聊天窗口的滚动条,废话不说上代码。希望能帮到大家
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;"
"}"
);
QT修改默认的滚动条样式的更多相关文章
- css修改浏览器默认的滚动条样式
//滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { bo ...
- 设置cnblogs默认滚动条样式
默认滚动条样式丑嘛就不谈了~这里修改为个性化滚动条样式. CSS代码 /*滚动条整体样式*/ body::-webkit-scrollbar { width: 10px; height: 1px; } ...
- CSS改变浏览器默认滚动条样式
前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式 比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决 注:经测试,目 ...
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)
系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...
- 在css中定义滚动条样式
1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...
- css 滚动条样式
1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...
- css3美化滚动条样式
1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...
- 关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法
资料: http://manos.malihu.gr/jquery-custom-content-scroller/ (此项是结合Jquery使用的,在此并未采用) https://www.npmj ...
- css 修改默认滚动条样式
来自:https://www.cnblogs.com/juqian/p/6273808.html 侵删 <div class="inner"> <div clas ...
随机推荐
- apicloud
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8 ...
- SQL Server 把当前日期中月份和几号中的0 去掉
select left(convert(varchar(10),getdate(),20),4)+replace(right(convert(varchar(10),getdate(),20),6), ...
- NOIP2010-普及组复赛模拟试题-第一题-手机
题目背景 Background 现在手机使用越来越广泛了 题目描述 Description 一般的手机的键盘是这样的: 要按出英文字母就必须要按数字键多下.例如要按出 x 就得按 9 两下,第一 ...
- Gitlab 安装配置
Gitlab 很好的替代Github,可以安装到公司的内网服务器 进行管理 ,可以分布式的管理,集中的管理 下面介绍安装这个软件的步骤 其实安装很简单的 按照官网可以安装 https://about ...
- 艰辛五天:Ubuntu14.04+显卡驱动+cuda+Theano环境安装过程
题记:从一开始不知道显卡就是GPU(虽然是学计算机的,但是我真的不知道…脑残如我也是醉了),到搞好所有这些环境前后弄了5天时间,前面的买显卡.装显卡和装双系统见另一篇博客装显卡.双系统,这篇主要记录我 ...
- .NET技术+25台服务器怎样支撑世界第54大网站
摘要:同时使用Linux和Windows平台产品,大量使用静态的方法和类,Stack Overflow是个重度性能控.同时,取代横向扩展,他们坚持着纵向扩展思路,因为“硬件永远比程序员便宜”. Sta ...
- 还原openstack配置文件的方法
cp -a /etc/neutron/neutron.conf /etc/neutron/neutron.conf.bakcp -a /etc/neutron/plugins/ml2/ml2_conf ...
- android log 学习
一,Bug出现了, 需要“干掉”它 bug一听挺吓人的,但是只要你懂了,android里的bug是很好解决的,因为android里提供了LOG机制,具体的底层代码,以后在来分析,只要你会看bug, a ...
- js 放大镜用法bug解决
<img id="zoom_02" src='img/zhang5.jpg' data-zoom-image="img/zhang5p.jpg" /> ...
- 前端模块化之seajs
决心从java后台转做前端有些日子了,不断关注前端知识.从学习了nodejs的 require按需加载模块的思路之后感觉js的世界变得好美好啊,前几天无意看到了seajs,国内大牛的作品,专为前端js ...