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.mzph.cn/pingmian/58100.shtml

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

相关文章

线性回归模型与检验 6个适用条件

线性回归模型与检验 6个适用条件

当因变量与自变量间存在线性相关关系时，可以使用线性回归分析方法确定它们之间的相互依赖的定量关系。此处所说的定量关系，并非严格的因果关系，而是自变量X对因变量Y的影响或预测的作用。 例如分析广告费、产品单价、产品满意度、服务满意度…
阅读更多...
说它是谁就是谁—Python语言中的鸭子类型

说它是谁就是谁—Python语言中的鸭子类型

鸭子类型（Duck Typing）是动态类型语言中的一种类型推断风格，尤其在Python语言中得到了广泛的应用。它的核心思想是：“如果它走起路来像鸭子，叫起来像鸭子，那么它就是鸭子”。这句话的意思是，我们…
阅读更多...
python_httpstat库

python_httpstat库

Python httpstat是一个基于Python的命令行工具，用于测量HTTP请求的性能和状态信息。它能够向目标服务器发送HTTP请求，并显示详细的统计信息，包括DNS解析时间、建立连接时间、TLS/SSL握手时间、首字节时间、总时间等。这些信息对于排查网络问题…
阅读更多...
你是个优秀的人，但不是个好Leader

你是个优秀的人，但不是个好Leader

管理过程中，总有人长叹分身乏术，自己事必躬亲却收效甚微；总有人深陷日常繁琐，四处救火，似乎总有做不完的工作，操不完的心，这是为什么？ 很大程度上是因为他们不懂管理的核心。无论…
阅读更多...
详解varint，zigzag编码, 以及在Go标准库中的实现

详解varint，zigzag编码, 以及在Go标准库中的实现

文章目录 为啥需要varint编码为啥需要zigzag编码varint编码解码 zigzag编码解码 局限性 为啥需要varint编码 当我们用定长数字类型int32来表示整数时，为了传输一个整数1，我们需要传输00000000 00000000 00000000 00000001 32 个 bits，而有价…
阅读更多...
使用 FastGPT + Ollama 搭建本地 AI 客服小助手

使用 FastGPT + Ollama 搭建本地 AI 客服小助手

在数字化转型的背景下，越来越多的企业希望在服务体系中引入人工智能，以提供更高效的客户服务。而 AI 客服小助手的构建不仅可以解答客户的常见问题，还能减轻客服人员的工作压力，提高客户满意度。本文将介绍如何使用 FastGPT 和 Ol…
阅读更多...
SQLite3库增删改查实现数据管理

SQLite3库增删改查实现数据管理

1. SQLite3简介 SQLite3是一个轻量级的、嵌入式的关系型数据库管理系统，在保存测序数据或结果等时可使用，简单高效，并且有无需服务器、单文件存储数据、支持标准SQL、支持跨平台等优势。 本文以Sqlite3数据库为基础，创建代码示例…
阅读更多...
tomcat基本配置

tomcat基本配置

目录 1.java容器简介介绍 2.部署tomcat 2.1上传jdk 2.2创建一个软连接 2.3配置环境变量 2.4读取环境文件并且查看java版本 2.5检查jdk tomcat信息 2.6启动tomcat 2.7检测 3.tomcat 目录结构 3.1总体目录 3.2 bin目录 3.3conf 3.4 logs日志 4.运行代码 4.…
阅读更多...
如何确保电子商务网站服务器的正常运行时间

如何确保电子商务网站服务器的正常运行时间

对于电商网站而言，服务器的正常运行时间至关重要。网站宕机会直接影响销售额、客户体验以及品牌声誉。本文将详细探讨如何监控并保障服务器的正常运行时间，确保您的电商网站始终保持在线状态， 为什么监控正常运行时间很重要？ 减…
阅读更多...
【Oracle实验】字段为空的，无法通过排除判断

【Oracle实验】字段为空的，无法通过排除判断

Oracle相关文档，希望互相学习，共同进步 风123456789～-CSDN博客 1.场景描述 需求：查询不是某个机构的数据。 同事SQL：where substr(bank_code,1,9) not in(014009001)； 看SQL似乎没什么问题，分析…
阅读更多...
【modbus协议】libmodbus库移植基于linux平台

【modbus协议】libmodbus库移植基于linux平台

文章目录 下载库函数源码编译路径添加libmodbus 源码分析核心数据结构常用接口函数 开发 TCP Server 端开发TCP Client 端 下载库函数源码 编译路径添加 libmodbus 源码分析 核心数据结构 modbus_t结构体： 这是 libmodbus 的核心数据结构，代表一个 Mod…
阅读更多...
【学术会议投稿】Imagen：重塑图像生成领域的革命性突破

【学术会议投稿】Imagen：重塑图像生成领域的革命性突破

【连续七届已快稳ei检索】第八届电子信息技术与计算机工程国际学术会议（EITCE 2024）_艾思科蓝_学术一站式服务平台 更多学术会议请看 https://ais.cn/u/nuyAF3 目录 引言 一、Imagen模型的技术原理 1. 模型概述 2. 工作流程 3. 技术创新 二、Ima…
阅读更多...
达实智能深度融入鸿蒙生态，自研AIoT平台引领智慧空间新风向

达实智能深度融入鸿蒙生态，自研AIoT平台引领智慧空间新风向

10月22日，华为隆重举办了原生鸿蒙之夜暨华为全场景新品发布会，正式展示了HarmonyOS NEXT鸿蒙操作系统的最新进展和未来规划。华为常务董事、终端BG董事长、智能汽车解决方案BU董事长余承东公布了HarmonyOS NEXT（鸿蒙OS5）&#xff…
阅读更多...
OSPF特殊区域及其他特性

OSPF特殊区域及其他特性

不用的链路这状态信息没必要一直保存，要不路由器承受不了。用OSPF 特殊区域解决 1. Stub区域和Totally Stub区域 R1作为ASBR引入多个外部网段，如果Area 2是普通区域，则R3将向该区域注入5类和4类LSA。 当把Area 2配置为Stub区域后&#xff1a…
阅读更多...
node升级package.json中的版本

node升级package.json中的版本

由于项目使用时间过老，升级对应包版本，可以使用新功能 1.使用npm-check-updates这个工具，先全局安装 npm install -g npm-check-updates2.检查package.json中dependencies的最新版本 ncu3.更新dependencies到新版本 ncu -u也是一样的 npx…
阅读更多...
探索Python安全字符串处理的奥秘：MarkupSafe库揭秘

探索Python安全字符串处理的奥秘：MarkupSafe库揭秘

文章目录 探索Python安全字符串处理的奥秘：MarkupSafe库揭秘第一部分：背景介绍第二部分：MarkupSafe是什么？第三部分：如何安装MarkupSafe？第四部分：MarkupSafe的简单使用方法1. 使用escape函数2.…
阅读更多...
机器视觉运动控制一体机在DELTA并联机械手视觉上下料应用

机器视觉运动控制一体机在DELTA并联机械手视觉上下料应用

市场应用背景 DELTA并联机械手是由三个相同的支链所组成，每个支链包含一个转动关节和一个移动关节，具有结构紧凑、占地面积小、高速高灵活性等特点，可在有限的空间内进行高效的作业，广泛应用于柔性上下料、包装、分拣、装配等需要…
阅读更多...
【C++】类和对象（二）：this指针

【C++】类和对象（二）：this指针

大家好，我是苏貝，本篇博客带大家了解C的this指针，如果你觉得我写的还不错的话，可以给我一个赞👍吗，感谢❤️ 目录 1 this指针的引出2 this指针的特性 1 this指针的引出 我们先来定义一个日期类Date 问&am…
阅读更多...
华为原生鸿蒙操作系统的发布有何重大意义和影响：

华为原生鸿蒙操作系统的发布有何重大意义和影响：

#1024程序员节 | 征文# 一、华为原生鸿蒙操作系统的发布对中国的意义可以从多个层面进行分析： 1. 技术自主创新 鸿蒙操作系统的推出标志着中国在操作系统领域的自主创新能力的提升。过去，中国在高端操作系统方面依赖于外国技术，鸿蒙的发布…
阅读更多...
HttpContext模块 --- http上下文模块

HttpContext模块 --- http上下文模块

目录 模块设计思想 模块代码实现 模块设计思想 上下文模块是Http协议模块中最重要的一个模块，他需要控制请求处理的节奏，需要保存一个HttpRequest对象，后续关于这个连接的http的处理的信息全部都是在这个上下文中保存。 首先，…
阅读更多...
最新文章

Copyright @ 2022~2023