Qt易忘样式表总结

news2025/2/24 16:33:10

目录

      • 前言
      • 1、Qt设置样式的几种方式
      • 2、几种复合控件的样式设置
        • QTableWidget
        • QCalendarWidget
        • QTreeWidget
        • QSpinBox
        • QComboBox

前言

在使用Qt框架开发软件时，为了美观和更好的用户体验，需要为各种控件设置样式。一些通用且简单的样式如背景色、边框、字体字号等，基本上写过Qt样式的猿们都能记住，但是像日历、树形控件、Tab页控件等复合控件的样式则很难凭记忆写出来。所以本篇除了总结Qt设置样式的几种方式之外，还总结了几个复合控件的样式设置。

1、Qt设置样式的几种方式

  • 在代码中设置控件的样式（最不推荐）
  • 在ui文件中设置样式
  • 将所有样式写到一个或几个qss文件中，根据需要通过setStyleSheet函数加载（推荐）

2、几种复合控件的样式设置

QTableWidget

当用到QTableWidget时，我们可以在UI文件中拖入一个，其基本的显示属性可以在UI中设置，也可以写代码设置。在下图中可以看到一个QTableWidget，添加了表头和3条数据，右侧是基本属性，黑色粗体部分是已经设置过的，非粗体是默认设置。

在这里插入图片描述
在qss文件中添加样式如下

/*设置表头样式*/
QHeaderView::section 
{
     background-color: rgb(50,200,255);
     color: white;
     padding-left: 4px;
     border: 1px solid #6ce0ff;
}

QHeaderView::section:checked
{
    background-color: rgb(0,200,255);
}

/*设置表格样式*/
QTableView {
   show-decoration-selected: 1;
}

QTableView::item {
    height: 30px;
    text-align:center;
}

QTableView::item:selected 
{
  	border: 1px solid #6a6ea9;
    color:white;
}

QTableView::item:selected:!active 
{
   background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                               stop: 0 #ABAFE5, stop: 1 #8588B2);
}

QTableView::item:selected:active 
{
   background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                               stop: 0 #6a6ea9, stop: 1 #888dd9);
}

QTableView::item:hover 
{
    background: rgb(50,100,200);
    color:white;
}

运行效果如下图所示。
在这里插入图片描述

QCalendarWidget

QCalendarWidget 控件一般与QDateEdit 或 QDateTimeEdit 控件配合使用，在UI中拖入一个QDateEdit控件，勾选 calendarPopup，这样在点击日期控件右侧按钮时就会弹出日历控件。UI图如下所示
在这里插入图片描述
设置QDateEdit 和 QCalendarWidget 的样式

/*设置QDateEdit样式*/
QDateEdit
{
	min-height:45px;
	border: 1px solid rgba(0,200,255);
}
QDateEdit::drop-down
{
	background-color : transparent;
	image: url(:/images/rili.png);
	min-width: 40px;
	min-height:40px;
}
  
/*设置QCalendarWidget样式*/
QCalendarWidget  QWidget#qt_calendar_navigationbar
{
	background-color: #2F5F8E;
}

QCalendarWidget QToolButton
{
	background-color:transparent; 
	min-width:23px; 
	max-width:23px; 
	min-height:23px; 
	max-height:23px;
}

QCalendarWidget QToolButton:hover
{
	background-color:rgb(134,193,251); 
	color:black;  
}

QCalendarWidget QToolButton#qt_calendar_monthbutton
{
	background-color:transparent; 
	min-width:50px; 
	max-width:50px; 
	min-height:23px; 
	max-height:23px;
}

QCalendarWidget QToolButton#qt_calendar_monthbutton:hover ,#qt_calendar_yearbutton:hover
{
	background-color:rgb(134,193,251, 100); 
	color:black;  
}

QCalendarWidget QToolButton#qt_calendar_prevmonth
{
	background-color:transparent; 
	min-width: 30px;
	min-height: 30px;
	qproperty-icon:url(:/images/zuojiantou.png)

}

QCalendarWidget QToolButton#qt_calendar_nextmonth
{
	background-color:transparent; 
	min-width: 30px;
	min-height: 30px;
	qproperty-icon: url(:/images/youjiantou.png);
}

QCalendarWidget QToolButton#qt_calendar_monthbutton,#qt_calendar_yearbutton
{
	min-width: 70px;
	color: rgb(134,193,251); 
	font: 14px;
}

运行效果如下图所示
在这里插入图片描述

QTreeWidget

设置QTreeWidget样式

QTreeView::branch:has-siblings:!adjoins-item
{
    border-image: url(:/images/stylesheet-vline.png) 0;
}

QTreeView::branch:has-siblings:adjoins-item 
{
   	border-image: url(:/images/stylesheet-branch-more.png) 0;
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item 
{
	border-image: url(:/images/stylesheet-branch-end.png) 0;
}

QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings
{
    border-image: none;
    image: url(:/images/stylesheet-branch-closed.png);
}

QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings 
{
	border-image: none;
	image: url(:/images/stylesheet-branch-open.png);
}

运行效果：
在这里插入图片描述
在这里插入图片描述

样式表中的图片名称与对应的图片如下图所示，实际应用时按照下图所示的效果切图，替换样式表中对应的图片即可。
在这里插入图片描述

QSpinBox

设置QSpinBox样式


 QSpinBox 
{
	min-height: 40px;
	min-width: 80px;
	padding-right: 5px; 
	background-color: rgb(255, 159, 94);
	border-width: 3;
	font-size: 14px;
	color: blue;
}

QSpinBox::up-button
{
	subcontrol-origin: border;
	subcontrol-position: top right; /* position at the top right corner */
	width: 20px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
	border-image: url(:/images/shangjiantou.png) 1;
	border-width: 1px;
}

QSpinBox::down-button 
{
	subcontrol-origin: border;
	subcontrol-position: bottom right; /* position at bottom right corner */
	width: 20px;
	border-image: url(:/images/xiajiantou.png) 1;
	border-width: 1px;
	border-top-width: 0;
}

运行效果：
在这里插入图片描述

QComboBox

设置QComboBox样式如下

QComboBox 
{
	border: 1px solid rgb(131, 255, 0);
	border-radius: 3px;
	padding: 1px 18px 1px 3px;
	min-width: 200px;
	min-height: 40px;
	border-image: url(:/images/comboxbg.png);
}

QComboBox:editable 
{
	background: yellow;
}

QComboBox:!editable, QComboBox::drop-down:editable 
{
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
}

/* QComboBox gets the "on" state when the popup is open */
QComboBox:!editable:on, QComboBox::drop-down:editable:on 
{
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
	                           stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
	                           stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
}

QComboBox:on 
{ /* shift the text when the popup opens */
	padding-top: 3px;
	padding-left: 4px;
}

QComboBox::drop-down
{
	min-width: 40px;
	min-height:40px;
	subcontrol-origin: padding;
	subcontrol-position: top right;
	width: 15px;
	border-left-width: 1px;
	border-left-color: darkgray;
	border-left-style: solid; /* just a single line */
	border-top-right-radius: 3px; /* same radius as the QComboBox */
	border-bottom-right-radius: 3px;
}

QComboBox::down-arrow 
{
	min-height: 20px;
	min-width: 20px;
	image: url(:/images/xiajiantou.png);
}

QComboBox::down-arrow:on 
{ /* shift the arrow when popup is open */
	top: 1px;
	left: 1px;
}

QComboBox QAbstractItemView 
{
	border: 2px solid darkgray;
	selection-background-color: lightgray;
}

运行效果
在这里插入图片描述

以上就是本篇的所有内容了，有疑问的朋友欢迎评论区留言讨论！

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

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

相关文章

js实现图片懒加载

js实现图片懒加载

js实现图片懒加载 1、介绍getBoundingClientRect()函数 该函数没有参数，用于获取元素位置，返回一个对象，具有六个属性分别是： ele.getBoundingClientRect().top – 返回元素上边到视窗上边的距离 ele.getBoundingClientRect().l…
阅读更多...
【经典面试题-LeetCode134：加油站问题（Java实现）】

【经典面试题-LeetCode134：加油站问题（Java实现）】

加油站问题一、题目描述1.题目内容2.样例二、解决方案1.分析2.核心代码一、题目描述 1.题目内容 在一条环路上有 n 个加油站，其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车，从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i…
阅读更多...
自动控制原理 - 2 控制系统的数学模型 节2.4-2.6

自动控制原理 - 2 控制系统的数学模型 节2.4-2.6

------------------------------------------------------------------------------ 2 控制系统的数学模型2.4 控制系统的传递函数2.5 典型环节的传递函数2.6 结构图的绘制 2 控制系统的数学模型 2.4 控制系统的传递函数 为何引入传递函数？ 微分方程模型的优缺…
阅读更多...
Webpack面试题总结

Webpack面试题总结

说说你对webpack的理解？解决了什么问题？ webpack最初的目标是实现前端项目模块化，目的在于更高效的管理和维护项目中的每一个资源 模块化： 最早的时候，我们通过文件划分的形式实现模块化，也就是将每个功能…
阅读更多...
JVM性能——开启回收日志和实时查看GC信息

JVM性能——开启回收日志和实时查看GC信息

JVM性能——开启回收日志和实时查看GC信息 JDK版本：OpenJDK 1.8.0_352-b08 操作系统：CentOS 7 如果文章内出现测试数据测试代码 depth:23 关于JVM的其他文章 JVM性能——垃圾回收器的优化策略 JVM性能——垃圾回收器的介绍 JVM性能——开启回收日…
阅读更多...
网络赚钱项目 - 虚拟项目如何选择产品

网络赚钱项目 - 虚拟项目如何选择产品

今日一个老粉找我，他去年3月份就重视我跟我互动了，他上来并不是索取什么，而是给我信息，比如他最近测验了什么产品，什么产品好卖，都会把测验的数据告诉我，当然作为回报，我也会告诉他一…
阅读更多...
Centos7宝塔部署python

Centos7宝塔部署python

前言：宝塔本身有python项目管理器，但是有些依赖安装会存在问题，比如paddlehub安装总是失败，本文在宝塔安装了anaconda基础上配合python项目管理器去部署项目，保障依赖隔离不混乱。 centos7宝塔安装conda流程地址&…
阅读更多...
Linux使用YUM安装程序

Linux使用YUM安装程序

目录 前言 什么是YUM？ 1.本地源：系统安装光盘 目的 1）观察YUM核心配置目录 2）删除官方YUM库 3）编写本地YUM库配置文件 4）挂载安装光盘 保证把光盘放到服务器上，通电 挂载 5&#xff0…
阅读更多...
np中的normalize/histogram/cumsum/interp函数

np中的normalize/histogram/cumsum/interp函数

一、normalize函数 void normalize(InputArray src,OutputArray dst, double alpha=1, double beta=0, int norm_type=NORM_L2, int dtype=-1, InputArray mask=noArray() ) 归一化就是要把需要处理的数据经过处理后 (通过某种算法)限制在你需要的一定范围内。首先归一…
阅读更多...
深入注册表监控

深入注册表监控

前言 注册表是windows的重要数据库，存放了很多重要的信息以及一些应用的设置，对注册表进行监控并防止篡改是十分有必要的。在64位系统下微软提供了CmRegisterCallback这个回调函数来实时监控注册表的操作，那么既然这里微软提供了这么一个方便…
阅读更多...
用红黑树封装map和set

用红黑树封装map和set

文章目录:红黑树模拟实现完整代码红黑树参数适配改造仿函数正向迭代器反向迭代器红黑树封装后的代码map完整代码set完整代码红黑树模拟实现完整代码 如下是红黑树kv模型的模拟实现完整代码，现在我们需要基于此代码封装出map和set基本的接口实现。 #pragma once #i…
阅读更多...
音视频开发风潮 | 聊聊为啥从事音视频开发

音视频开发风潮 | 聊聊为啥从事音视频开发

音视频开发风潮 聊聊为啥从事音视频技术，未来会很赚钱 核心竞争力：音视频是程序界的皇冠，掌握音视频意味着拿到通往未来的船票，不用担心会被其他人替代。因为音视频是有一定门槛的，所以也是与其他人拉开差距的分水岭…
阅读更多...
基于Linux的Spark安装与环境配置

基于Linux的Spark安装与环境配置

文章目录基于Linux的Spark安装与环境配置1、Hadoop测试1.1 启动hadoop1.2 再次启动hadoop1.3 查看是否成功2、Scala安装与配置2.1 下载scala2.2 解压并重命名2.3 配置环境2.4 测试3、Spark安装与配置3.1 下载Spark3.2 解压并重命名3.3 配置环境3.4 配置spark-env.sh3.5 配置sla…
阅读更多...
RabbitMQ中VirtualHost相关设置、SpringBoot中集成常见问题总结

RabbitMQ中VirtualHost相关设置、SpringBoot中集成常见问题总结

wshanshi：总结记录…便于回顾… 一、VirtualHost相关设置 1.1、创建VirtualHost rabbitmqctl add_vhost 虚拟服务器名称如：rabbitmqctl add_vhost test 1.2、用户、权限相关设置 1.2.1、创建用户 rabbitmqctl add_user 用户名 密码如：ra…
阅读更多...
Baklib经验分享 | 一些搭建帮助中心的攻略

Baklib经验分享 | 一些搭建帮助中心的攻略

作为一家企业，既要为用户提供优质的产品，又要为用户提供良好的售后服务。 很多企业在建立网站的时候可能低估了帮助中心的价值，但是实际上，一家好的在线帮助中心可以帮助企业留住用户，而且用户还可以通过自助查询来解…
阅读更多...
【Redis系列】Linux查看Redis版本信息

【Redis系列】Linux查看Redis版本信息

目录 一、详细介绍 1.redis-server -v 1.1 进入容器 1.2 查询redis-server 目录 1.3 进入对应目录 1.4 执行命令 2.redis-cli -v 1.1 进入容器 1.2 查询redis-cli 目录 1.3 进入对应目录 1.4 执行命令 一般是有两种方式 redis-server -vredis-cli -v一、详细介绍 1.…
阅读更多...
【数据库系列】如何查看MongoDB版本信息

【数据库系列】如何查看MongoDB版本信息

目录 一、方法介绍 1 mongo --version 2 使用mongod 3 db.version() 二、总结 三种方式可以查看，依次如下： 一、方法介绍 首先要找到mongo的路径，如果不知道在哪，可以输入 whereis mongo 如下图，找到对应的目录…
阅读更多...
VMWare安装CentOS7操作系统的虚拟机

VMWare安装CentOS7操作系统的虚拟机

【原文链接】VMWare安装CentOS7操作系统的虚拟机 （1）可以从 清华大学镜像源 下载centos7的镜像，比如下载如下这个版本 （2）打开VMWare后，点击【创建虚拟机】 （3）选择【自定义高级…
阅读更多...
OAuth 2.0 （第三方登录）前端流程实现

OAuth 2.0 （第三方登录）前端流程实现

目录 一、OAuth是什么 二、OAuth 实现，前端需要做什么 （一）数据收集表单 （二）获取后端返回值 （三）重定向地址及后续处理 三、项目地址 一、OAuth是什么 OAuth就是让"客户端"安全…
阅读更多...
vue-router入门学习3

vue-router入门学习3

命名路由 使用命名路由实现声明式导航 要在路由规则里加上name属性，相对于给这个地址取别名，当地址非常长时可以充分体现它的好用之处。 这里的to属性前面要加个冒号噢 调用push函数期间指定一个配置对象，name是要跳转到的路由规则、params是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023