当前位置: 首页 > news >正文

【PyQt5教程 四】Qt Designer 样式表(styleSheet)实现基本小部件的自定义动态效果和资源浏览器背景添加方法

目录

一、成果演示:

二、样式表的使用方法:

(1)样式表语法和属性:

(2)样式表代码示例:

(3)伪类和状态:

(4)复合选择器:

三、样式表使用示例: 

(1)打开Qt Designer:

​编辑

(2)编写样式:

四、背景添加方法:

(1)直接法:

(2)小部件法:


一、成果演示:

当鼠标悬停在按钮上或按钮被按下时,改变按钮的颜色与圆角边框大小。这种方法完全通过改变Qt Designer样式表(styleSheet)来实现,不需要编写额外的代码。

小部件的自定义动态效果

二、样式表的使用方法:

(1)样式表语法和属性:

样式表的规则由选择器和声明组成。选择器指定哪些小部件受规则影响;声明指定应该在小部件上设置哪些属性。

常用属性包括:

  • background-color:设置背景颜色。
  • color:设置前景色,通常是文本颜色。
  • border:设置边框的宽度、样式和颜色。
  • font:设置字体样式。
  • padding:设置内边距。
  • margin:设置外边距。

(2)样式表代码示例:

简单示例如下,用于设置QPushButton的背景色和文本颜色:

QPushButton {background-color: rgb(170, 0, 0);color: white;
}

上面的示例中,QPushButton是选择器,{ background-color: rgb(170, 0, 0); color: white; }是声明部分,分别设置了按钮的背景色和文本颜色。

(3)伪类和状态:

Qt样式表(QSS)中支持的伪状态非常丰富,以下是总结的一些常见的伪状态:

  • active:部件处于活动状态时应用的样式。
  • adjoins-item:当QTreeView的::branch与某个item相邻时,将设置此状态。
  • alternate:如果设置了QAbstractItemView::alternatingRowColors(true)隔行变色,那么设置隔行的item。
  • bottom:此item位于底部。例如,QTabBar有位于底部的选项卡。
  • checked:项目被选中的状态。
  • closable:项目处于可以关闭的状态,例如,QDockWidget启用了QDockWidget::DockWidgetClosable功能。
  • closed:项目处于的关闭状态。如QTreeView中的非展开项。
  • default:控件的默认状态。例如,一个default的QPushButtonQMenu中的一个默认动作。
  • disabled:此item被禁用时的状态。
  • editable:如QComboBox是可编辑的。
  • edit-focus:此item具有编辑焦点(参考QStyle::State_HasEditFocus)。此状态仅对Qt扩展应用程序可用。
  • enabled:此item已启用。
  • exclusive:此item是一个独占项组的一部分。例如,独占QActionGroup中的菜单项。
  • first:此item是列表中的第一项。例如,QTabBar中的第一个选项卡。
  • focus:控件获得焦点时的样式。
  • hover:鼠标悬停在控件上时的样式。
  • indeterminate:控件处于不确定状态时的样式,如三态复选框。
  • last:此item是列表中的最后一项。
  • left:此item位于左侧。
  • middle:此item位于列表中间。
  • off:控件处于关闭状态时的样式。
  • on:控件处于开启状态时的样式。
  • only-one:此item是列表中唯一的一项。
  • pressed:控件被按下时的样式。
  • right:此item位于右侧。
  • selected:项目被选中时的样式。

使用方法示例:

QPushButton {background-color: #0055ff; color: white; /* 白色字体 */border-radius: 15px; /* 圆角边框 */
}QPushButton:hover {
/* 鼠标悬停时的背景颜色 */                
background-color : #5555ff;
border-color : #5555ff;
border-radius: 10px; /* 圆角边框 */}QPushButton:pressed {
/* 按钮被按下时的背景颜色 */
background-color : #00aaff;
border-color : #00aaff;
border-radius: 14px; /* 圆角边框 */
}

(4)复合选择器:

可以为同一个声明指定多个选择器,使用逗号(,)分隔选择器。例如,为QLineEdit和QComboBox设置相同的边框样式:

.QLineEdit, .QComboBox {border: 1px solid gray;background-color: white;
}

三、样式表使用示例: 

(1)打开Qt Designer:

  • 添加想要更改样式的小部件。

【PyQt5教程 一】Qt Designer 安装及其使用方法说明,附程序源码

以PushButton按钮为例:

调整想要的按键大小及位置: 

填写样式表: 

对于需要修改样式的单个控件,你可以右键单击该控件,然后选择“改变样式表...”选项。在弹出的编辑样式表窗口中,添加对应的样式表内容。

方法一:

方法二: 

(2)编写样式:

QPushButton {background-color: #0055ff; /* 背景颜色 */color: white; /* 白色字体 */border-radius: 15px; /* 圆角边框 */
}QPushButton:hover {
/* 鼠标悬停时的背景颜色 */                
background-color : #5555ff; /* 背景颜色 */
border-color : #5555ff; /* 边框颜色 */
border-radius: 10px; /* 圆角边框 */}QPushButton:pressed {
/* 按钮被按下时的背景颜色 */
background-color : #00aaff; /* 背景颜色 */
border-color : #00aaff; /* 边框颜色 */
border-radius: 14px; /* 圆角边框 */
}

点击浏览查看效果:

按钮浏览

四、背景添加方法:

(1)直接法:

直接给当前页添加背景。

所存在的问题:位于该页上的小部件,由于存在继承的关系,小部件将继承该页的背景。

如下:

(2)小部件法:

调整小部件大小: 

 放置到后面:

 添加背景颜色:

其他小部件样式配置方法同按钮样式配置方法相同。

效果如下:

(3)从资源浏览器中添加图片背景:

首先新建资源文件夹用于存放资源文件:

保存到对应的程序目录下: 

 添加前缀名:

 添加文件:

 应用图片:

 

http://www.lryc.cn/news/501560.html

相关文章:

  • 【git】--- 通过 git 和 gitolite 管理单仓库的 SDK
  • 计算机网络之NAT、代理服务、内网穿透、内网打洞
  • 2024-金盾信安杯线上赛 WP
  • MySQL 基础架构
  • 汽车升级到底应不应该设置“可取消“功能
  • 【MySQL】mysql中的事务
  • 大语言模型(LLM)与智能机器人的应用分析
  • Inno Setup 学习笔记(一)
  • 从阿里云EDM到美团云:典型微服务治理平台的实战经验分享
  • 【接口自动化测试】一文从3000字从0到1详解接口测试用例设计
  • 反向代理-缓存篇
  • 【伪代码】数据结构-期末复习 线性表
  • JavaWeb学习、过滤器、ajax异步请求、json、jquery-api文档
  • 深入探索 JVM:原理、机制与实战
  • JavaWeb学习(3)(Servlet详细、Servlet的三种实现方式(面试)、Servlet的生命周期、传统web.xml配置Servlet(了解))
  • 支付宝租赁小程序助力便捷生活新方式
  • Linux-ubuntu环境配置
  • 深入解析下oracle的number底层存储格式
  • nginx代理rabbitmq和配置 Nginx 代理达梦数据库
  • 汉语唤醒词的模糊判断(Python)
  • Redis篇-2--原理篇1--I/O多路复用机制(5种I/O模型,I/O多路复用)
  • Knowledge Graph Studio:让知识图谱构建更简单、更智能
  • vue 中实现音视频播放进度条(可拖拽,满足常见开发需求)
  • [免费]SpringBoot+Vue企业OA自动化办公管理系统【论文+源码+SQL脚本】
  • 笔记:在WPF中BitmapSource都有哪些派生类,他们主要功能,使用方法,使用场景
  • JAVA基础学习笔记_多线程
  • 什么是自动化办公
  • 数据库系统
  • 文件系统--底层架构(图文详解)
  • 【OCR】——端到端文字识别GOT-OCR2.0不香嘛?