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握手时间、首字节时间、总时间等。这些信息对于排查网络问题…
阅读更多...
详解varint，zigzag编码, 以及在Go标准库中的实现

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

文章目录 为啥需要varint编码为啥需要zigzag编码varint编码解码 zigzag编码解码 局限性 为啥需要varint编码 当我们用定长数字类型int32来表示整数时，为了传输一个整数1，我们需要传输00000000 00000000 00000000 00000001 32 个 bits，而有价…
阅读更多...
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…
阅读更多...
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. 技术自主创新 鸿蒙操作系统的推出标志着中国在操作系统领域的自主创新能力的提升。过去，中国在高端操作系统方面依赖于外国技术，鸿蒙的发布…
阅读更多...
开发涉及的安全规范整理

开发涉及的安全规范整理

文章目录 前言安全场景与措施API调用方式鉴权参数校验日志打印数据保存加密 总结 前言 这篇文章我们来整理下写代码和方案设计中的安全规范问题，内容偏服务端，即使是入门的新人，如果你对安全有所了解会让成熟规范的团队对你高看一眼。安全经常…
阅读更多...
用HTML构建酷炫的文件上传下载界面

用HTML构建酷炫的文件上传下载界面

1. 基础HTML结构 首先&#xff0c;我们构建一个基本的HTML结构&#xff0c;包括一个表单用于文件上传&#xff0c;以及一个列表用于展示已上传文件&#xff1a; HTML <!DOCTYPE html> <html> <head><title>酷炫文件上传下载</title><link …
阅读更多...
健康养生的重要性

健康养生的重要性

养生之道&#xff0c;健康相随 在快节奏的现代生活中&#xff0c;养生健康已成为我们不可忽视的话题。随着生活水平的提高&#xff0c;人们越来越注重身体的保养与健康的维护。那么&#xff0c;如何才能做到养生健康&#xff0c;让身体与心灵都得到滋养呢&#xff1f; 首先&a…
阅读更多...
鱼跃医疗助力退役军人事务部“高原情暖老兵项目”

鱼跃医疗助力退役军人事务部“高原情暖老兵项目”

10月17日-22日&#xff0c;在退役军人事务部指导下&#xff0c;中国老龄事业发展基金会联合腾讯SSV时光实验室、腾讯天籁实验室等机构发起的“情暖老兵&#xff0c;守望相助—老兵听力关怀计划”项目走进西藏&#xff0c;为退伍老兵提供听力健康筛查服务。西藏鱼跃医疗投资有限…
阅读更多...
fastGpt

fastGpt

参考本地部署FastGPT使用在线大语言模型 1 rockylinx 1 ollama安装 在rockylinux中安装的&#xff0c;ollama由1.5G&#xff0c;还是比较大&#xff0c;所有采用在windows下下载&#xff0c;然后安装的方式&#xff0c;linux安装 tar -C /usr -xzf ollama-linux-amd64.tgz #…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023