qt 滚动条 美化

 qt QScrollBar 滚动条分为竖直与水平滚动条，两者设置上类似，但也有一些不同，下面主要讲述美化及注意事项。

一、竖直滚动条

竖直滚动条分为7个部分： sub-line、  up-arrow 、sub-page、 hanle、 add-line、 dow-arrow、 add-page 其中，sub-line区域包含up-arrow区域，add-line区域包含down-arrow区域。

handle是滚动条的滑块部分。

问题：

想要定制化设置滚动条： 滚动条宽度40，上下箭头高度设置50，滑块长度100。

实现的具体代码如下：

ui->tableWidget->setStyleSheet("QScrollBar::vertical { width: 40px; border:0px ;padding:50px 0px 50px 0px;}""QScrollBar::handle:vertical {background:#CDCDCD;border-radius:3px;min-height: 100px;width:40px; }""QScrollBar::add-line:vertical {height: 50px;subcontrol-origin:margin;}""QScrollBar::sub-line:vertical {background:red;height: 50px;subcontrol-origin:margin; }""QScrollBar::up-arrow:vertical {background:green;subcontrol-origin: margin; height: 40px; border-image: url(:/res/image/arrow-drop.png);}""QScrollBar::down-arrow:vertical {subcontrol-origin: margin; height: 40px; border-image: url(:/res/image/arrow-drop.png);}");

注意：

1. 通过 实际效果图可以看到，sub-line区域比up-arrow区域大

2. 要想上下箭头区域显示，必须设置border、padding或  border、margin

QScrollBar::vertical { width: 40px; border:0px ;padding:50px 0px 50px 0px;}

或者

QScrollBar::vertical { width: 40px; border:0px ;margin:50px 0px 50px 0px;}

 其中，竖直滚动条设置宽度(width: 40px)，水平滚动条设置高度；

3.sub-line add-line 必须设置subcontrol-origin:margin

4.添加 悬浮、按压时的样式----效果图中未体现

"QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed { margin: 0 1px 0 1px;  background: #606060;}""QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:pressed {background:#606060;}"
"QScrollBar::sub-line:vertical:hover, QScrollBar::sub-line:vertical:pressed {background:#606060;}"
"QScrollBar::up-arrow:vertical:hover,QScrollBar::up-arrow:vertical:pressed { border-image: url(:/res/white.svg);}""QScrollBar::down-arrow:vertical:hover,QScrollBar::down-arrow:vertical:pressed { border-image: url(://res/white.svg);}"

5.代码解读

QScrollBar::vertical { width: 40px; border:0px ;margin:50px 0px 50px 0px;}/*竖直滚动条宽度；边距*/
QScrollBar::handle:vertical {background:#CDCDCD;border-radius:3px;min-height: 100px;width:40px; }/*滑块背景色；滑块高度 */
QScrollBar::add-line:vertical {height: 50px;subcontrol-origin:margin;}/* add-line高度设置；subcontrol必须设置，*/
QScrollBar::sub-line:vertical {background:red;height: 50px;subcontrol-origin:margin; }/*sub-line区域设置：高度；subcontrol必须设置 */
QScrollBar::up-arrow:vertical {background:green;subcontrol-origin: margin; height: 40px; border-image: url(:/res/image/arrow-drop.png);}/*箭头区域设置 */
QScrollBar::down-arrow:vertical {subcontrol-origin: margin; height: 40px; border-image: url(:/res/image/arrow-drop.png);}/* */

实际效果图：

6.整体代码

  ui->tableWidget->setStyleSheet("QScrollBar::vertical { width: 40px; border:0px ;padding:50px 0px 50px 0px;}""QScrollBar::handle:vertical {background:#CDCDCD;border-radius:3px;min-height: 100px;width:40px; }""QScrollBar::add-line:vertical {height: 50px;subcontrol-origin:margin;}""QScrollBar::sub-line:vertical {background:red;height: 50px;subcontrol-origin:margin; }""QScrollBar::up-arrow:vertical {background:green;subcontrol-origin: margin; height: 40px; border-image: url(:/res/arrow-drop.png);}""QScrollBar::down-arrow:vertical {subcontrol-origin: margin; height: 40px; border-image: url(:/res/ff.png);}""QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed { margin: 0 1px 0 1px;  background: #606060;}""QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:pressed {background:#606060;}""QScrollBar::sub-line:vertical:hover, QScrollBar::sub-line:vertical:pressed {background:#606060;}""QScrollBar::up-arrow:vertical:hover,QScrollBar::up-arrow:vertical:pressed { border-image: url(:/res/white.svg);}""QScrollBar::down-arrow:vertical:hover,QScrollBar::down-arrow:vertical:pressed { border-image: url(:/res/white.svg);}");

二、水平滚动条

水平滚动条跟竖直滚动条差不多，也是分为7个部分： sub-line、  left-arrow 、sub-page 、hanle、 add-line、 right-arrow、 add-page 其中，sub-line区域包含left-arrow区域，add-line区域包含right-arrow区域。

实现主要代码如下：

QScrollBar::horizontal { height:40px; border:0px ;margin:0px 40px  0px 40px;}//设置滚动条高度，边距
QScrollBar::handle:horizontal {background:red;border-radius:3px;min-width:100px;height:40px; }//设置handle宽度，高度
QScrollBar::add-line:horizontal {background:#F0F0F0;width: 40px;subcontrol-origin:margin;}
QScrollBar::sub-line:horizontal {subcontrol-position:left;background:#F0F0F0;width: 40px;subcontrol-origin:margin; }//注意：必须设置 位置 left
QScrollBar::left-arrow:horizontal {subcontrol-origin: margin; width: 40px; border-image: url(:/a6.svg);}//左箭头
QScrollBar::right-arrow:horizontal {subcontrol-origin: margin; width: 40px; border-image: url(:/b6.svg);}

注意：

1. 水平滚动条设置高度，通过 height:40px进行设置，同时，margin:0px 40px  0px 40px;一定要设置，且与竖直滚动条设置的是不一样的。

水平滚动条设置高度，竖直滚动条设置宽度。

2.handle的长度、高度 通过min-width:100px;height:40px 进行设置

3.注意：sub-line:horizontal设置的与竖直滚动条不同，必须要指定位置 subcontrol-position:left ，其他的与竖直滚动条是一样的操作

4.其他的设置就与竖直滚动条一样了

竖直滚动条、水平滚动条整体代码如下：

ui->tableWidget->setStyleSheet("QScrollBar::vertical { width: 40px; border:0px ;margin:40px 0px 40px 0px;}"
"QScrollBar::handle:vertical {background:#CDCDCD;border-radius:3px;min-height: 100px;width:40px; }"
"QScrollBar::add-line:vertical {background:#F0F0F0;height: 40px;subcontrol-origin:margin;}"
"QScrollBar::sub-line:vertical {background:#F0F0F0;height: 40px;subcontrol-origin:margin; }"
"QScrollBar::up-arrow:vertical {subcontrol-origin: margin; height: 40px; border-image: url(://up-arrow-1.svg);}"
"QScrollBar::down-arrow:vertical {subcontrol-origin: margin; height: 40px; border-image: url(://down-arrow-2.svg);}"
"QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed { margin: 0 1px 0 1px;  background: #2c2c2c;}"
"QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:pressed {background:#2c2c2c;}"
"QScrollBar::sub-line:vertical:hover, QScrollBar::sub-line:vertical:pressed {background:#2c2c2c;}"
"QScrollBar::up-arrow:vertical:hover,QScrollBar::up-arrow:vertical:pressed { border-image: url(://up-arrow-3.svg);}"
"QScrollBar::down-arrow:vertical:hover,QScrollBar::down-arrow:vertical:pressed { border-image: url(://down-arrow-4.svg);}"
"QScrollBar::horizontal { height:40px; border:0px ;margin:0px 40px  0px 40px;}"
"QScrollBar::handle:horizontal {background:#CDCDCD;border-radius:3px;min-width:100px;height:40px; }"
"QScrollBar::add-line:horizontal {background:#F0F0F0;width: 40px;subcontrol-origin:margin;}"
"QScrollBar::sub-line:horizontal {subcontrol-position:left;background:#F0F0F0;width: 40px;subcontrol-origin:margin; }"
"QScrollBar::left-arrow:horizontal {subcontrol-origin: margin; width: 40px; border-image: url(://left-arrow-5.svg);}"
"QScrollBar::right-arrow:horizontal {subcontrol-origin: margin; width: 40px; border-image: url(://right-arrow-6.svg);}"
"QScrollBar::handle:horizontal:hover,QScrollBar::handle:horizontal:pressed { margin: 0 1px 0 1px;  background: #2c2c2c;}"
"QScrollBar::add-line:horizontal:hover, QScrollBar::add-line:horizontal:pressed {background:#2c2c2c;}"
"QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:pressed {background:#2c2c2c;}"
"QScrollBar::left-arrow:horizontal:hover,QScrollBar::left-arrow:horizontal:pressed { border-image: url(://left-arrow-7.svg);}"
"QScrollBar::right-arrow:horizontal:hover,QScrollBar::right-arrow:horizontal:pressed { border-image: url(://right-arrow-8.svg);}"
);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/457930.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

猴子请来的补丁——Python中的Monkey Patching

猴子请来的补丁——Python中的Monkey Patching

猴子补丁（Monkey Patching）在Python中是一种允许在运行时修改对象行为的技术。这种技术可以在不直接修改原始源代码的情况下，动态地改变或扩展程序的行为。 猴子补丁的原理 猴子补丁的核心原理是利用Python的动态特性，即在运行时…
阅读更多...
研究生论文学习记录

研究生论文学习记录

文献检索 检索论文的网站 知网：找论文，寻找创新点paperswithcode ：这个网站可以直接找到源代码 直接再谷歌学术搜索 格式：”期刊名称“ 关键词 在谷歌学术搜索特定期刊的关键词相关论文，可以使用以下几种方法&#…
阅读更多...
Java并发学习总结：原子操作类

Java并发学习总结：原子操作类

本文是学习尚硅谷周阳老师《JUC并发编程》的总结（文末有链接）。 基本类型原子类 AtomicIntegerAtomicLongAtomicBoolean AtomicInteger 的方法 getAndIncrement 和 incrementAndGet 的区别： 两个方法都能实现对当前值加 1 ， 但…
阅读更多...
web服务实验

web服务实验

http实验 先创建需要访问的web页面文件index.html 编辑vim /etc/nginx/conf.d/testip.conf 测试通过域名访问需要编辑/etc/hosts 如果通过windows的浏览器访问需要编辑下面的文件通过一管理员身份打开的记事本编辑 C:\Windows\System32\drivers\etc下的hosts文件 192.168.1…
阅读更多...
软考：GPU算力，AI芯片

软考：GPU算力，AI芯片

算力 FLOPS（每秒浮点操作） NVIDIA 去年就有超过 1 exa 的新闻，所以这个数值是越大越好。 AI芯片的技术架构类型 GPU：图形处理单元，擅长并行处理，适用于深度学习等AI计算密集型任务。FPGA：现…
阅读更多...
OpenStack将运行的系统导出 QCOW2 镜像并导入阿里云

OpenStack将运行的系统导出 QCOW2 镜像并导入阿里云

项目背景 OpenStack，作为一个开源的云计算平台，经常被用于构建私有云和公有云服务。然而，随着业务的发展和扩展，企业可能会面临将在OpenStack上运行的虚拟机迁移到其他云服务供应商的需求 需求 因为运营团队在本地机房有一台 O…
阅读更多...
Netty-TCP服务端粘包、拆包问题（两种格式）

Netty-TCP服务端粘包、拆包问题（两种格式）

前言 最近公司搞了个小业务，需要使用TCP协议，我这边负责服务端。客户端是某个设备，客户端传参格式、包头包尾等都是固定的，不可改变，而且还有个蓝牙传感器，透传数据到这个设备，然后通过这个设备…
阅读更多...
pandas快速入门

pandas快速入门

pandas快速入门 1. 创建pandas对象1.1 前言1.2 使用DataFrame类创建pandas对象1.3 对DataFrame对象进行索引1.4 使用Series类创建pandas对象1.5 对DataFrame Series对象使用常见方法 2. pandas读取文件2.1 使用pd.read_*方法读取文件2.2 使用to_*保存数据2.3 使用info()方法查看…
阅读更多...
Python 判断键是否存在字典中（新手入门、实战案例）

Python 判断键是否存在字典中（新手入门、实战案例）

在早期的Python2版本中，可以使用 dict.has_key()方法来判断一个键是否存在于字典中。 在Python3中，dict.has_key()方法被废弃了，不能再被使用。如果在Python3中尝试使用dict.has_key()方法会导致 AttributeError异常。 那在Python3中要如何判…
阅读更多...
Linux：指令再认识

Linux：指令再认识

文章目录 前言一、知识点1. Linux下一切皆文件，也就是说显示器也是一种文件2. 指令是什么？3. ll 与 ls -l4. 日志5. 管道6. 时间戳 二、基本指令1. man指令2. cp指令3. mv指令4. 查看文件1）cat/tac指令——看小文件2）more/less指令…
阅读更多...
Qt：QtCreator使用

Qt：QtCreator使用

用一个QtCreator适配所有Qt版本 首先Qt和QtCreator版本并不是通用的，一个电脑中可以安装很多个Qt版本，但只需要安装一个最新版本的QtCreator即可 Qt是一个语言，也可理解为一个SDK库，Qt目前最新版本为6.7 QtCreator是一个集成开发…
阅读更多...
嵌入式Linux的AXI平台（platform）驱动教程

嵌入式Linux的AXI平台（platform）驱动教程

本文以JFMQL100的Linux系统的AXI接口的平台驱动为例，介绍嵌入式Linux的平台驱动编写、测试软件编写以及验证方式。本文的方法适用于任意嵌入式芯片Linux的物理地址映射的平台（platform）驱动的编写、测试与应用。 本文中AXI的开始地址为0x8000…
阅读更多...
Python浪漫之画星星

Python浪漫之画星星

效果图（动态的哦！）： 完整代码（上教程）： import turtle import random import time # 导入time模块# 创建一个画布 screen turtle.Screen() screen.bgcolor("red")# 创建一个海龟&a…
阅读更多...
Coppelia Sim (v-REP)仿真 机器人3D相机手眼标定与实时视觉追踪 （一）

Coppelia Sim (v-REP)仿真 机器人3D相机手眼标定与实时视觉追踪 （一）

coppelia sim[V-REP]仿真实现 机器人于3D相机手眼标定与实时视觉追踪 一 标定板的制作生成标定的PDF文件PDF转为图像格式图像加载到仿真中 二 仿真场景设置加载机器人加载的控制dummy ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/b48549d355d8441d8dfc20bc7ba7196…
阅读更多...
MYSQL作业三

MYSQL作业三

准备工作 查询操作
阅读更多...
Linux复习-C++

Linux复习-C++

参考博客： https://blog.csdn.net/qq_45254369/article/details/126023482?ops_request_misc%257B%2522request%255Fid%2522%253A%252277629891-A0F3-4EFC-B1AC-410093596085%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&req…
阅读更多...
力扣 167. 两数之和 II - 输入有序数组

力扣 167. 两数之和 II - 输入有序数组

目录 一、题目二、思路三、代码 一、题目 二、思路 由于数组是 非递减顺序排列 的，利用该先验知识，可以设置两个指针在数组的起始和末尾，相向前进，与暴力枚举相比可以加快寻找速度。 三、代码 class Solution {public int[] tw…
阅读更多...
面向对象（上）

面向对象（上）

1.初始对象 学习目标：理解使用对象完成数据组织的思路 可以看到加入了登记表后，我们学生所提供的信息就组织的简洁明了 程序中也是有多种多样的方式来记录数据 思考：使用变量记录数据太乱了，如果程序中也和生活中一样&#xff…
阅读更多...
Linux - 动静态库

Linux - 动静态库

文章目录 一、静态库1、定义2、文件扩展名3、生成静态库4、使用静态库5、静态库的优缺点 二、动态库1、定义2、文件扩展名3、生成动态库4、使用动态库5、动态库的优缺点6、简单动态库加载 三、补充 一、静态库 1、定义 静态库是在编译时链接到最终的可执行文件中的库。这意味着…
阅读更多...
Java Web项目实战：从零基础到项目开发全流程

Java Web项目实战：从零基础到项目开发全流程

Java Web开发环境搭建 Java Web开发需要Java运行环境、IDE（如IntelliJ IDEA或Eclipse）以及Maven集成开发工具等。首先，确保电脑上安装有Java 8或更高版本，可以通过访问Java官网获取最新版本。其次，安装IDE&#xff0c…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023