pyside6的QSpinBox自定义特性初步研究(二)

当前的需求是,蓝色背景的画面,需要一个相对应色系的QSpinBox部件。已有的部件风格是这样的,需要新的部件与之般配。

首先新建一个QDoubleSpinBox,并定义其背景色和边框:

QDoubleSpinBox {

color: white;

border:1px solid #2b4e8c;

border-radius:2px;

}

自定义字体和后缀单位:

然后,当前的显示效果是这样的:

很显然,需要对up和down的按钮做一个自定义。

样式表输入以下内容:

QDoubleSpinBox {

color: white;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::up-button{

/*向上按钮的默认特性*/

background-color:#36405f;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::down-button{

/*向下按钮的默认特性*/

background-color:#36405f;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::up-button:hover {

/*向上按钮鼠标悬停时的样式*/

background-color:#515d80;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::down-button:hover {

/*向下按钮鼠标悬停时的样式 */

background-color:#515d80;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::up-button:pressed{

/*向上按钮按下鼠标键时的样式 */

background-color:#515d80;

border:1px solid #039806;

border-radius:2px;

}

QDoubleSpinBox::down-button:pressed {

/* 按下鼠标键时的样式 */

background-color:#515d80;

border:1px solid #039806;

border-radius:2px;

}

运行效果 :

没错,up和down的按钮上的箭头没了。。。。。。。原因是重新定义按钮的时候没有定义图片。

新建两个图片,来重新自定义箭头图片,有两种方法:

方法1:使用QDoubleSpinBox::up-arrow{}和QDoubleSpinBox::down-arrow{}定义箭头图片

QDoubleSpinBox {

color: white;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::up-button{

/*向上按钮的默认特性*/

background-color:#36405f;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::down-button{

/*向下按钮的默认特性*/

background-color:#36405f;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::up-button:hover {

/*向上按钮鼠标悬停时的样式*/

background-color:#515d80;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::down-button:hover {

/*向下按钮鼠标悬停时的样式 */

background-color:#515d80;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::up-button:pressed{

/*向上按钮按下鼠标键时的样式 */

background-color:#515d80;

border:1px solid #039806;

border-radius:2px;

}

QDoubleSpinBox::down-button:pressed {

/* 按下鼠标键时的样式 */

background-color:#515d80;

border:1px solid #039806;

border-radius:2px;

}

QDoubleSpinBox::up-arrow{

/*向上箭头的图片*/

image: url(:/新前缀/Spinbox_up.png);

width:20px; /* 图片宽度*/

height:20px; /* 图片高度*/

}

QDoubleSpinBox::down-arrow{

/*向下箭头的图片*/

image: url(:/新前缀/Spinbox_down.png);

width: 20px; /* 图片宽度 */

height: 20px; /* 图片高度 */

}

运行效果:

这种方法的箭头图片尺寸是固定的不能随着部件尺寸自动缩放,即使把

width: 20px; /* 图片宽度 */

height: 20px; /* 图片高度 */

这两行去掉,不规定宽度和高度也不行。

效果如下图:

可以通过内置不同尺寸的图片实现尺寸的般配。

方法2:在up和down按钮的定义里直接指定图片。

QDoubleSpinBox {

color: white;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::up-button{

/*向上按钮的默认特性*/

background-color:#36405f;

border:1px solid #2b4e8c;

border-radius:2px;

image: url(:/新前缀/Spinbox_up.png);

}

QDoubleSpinBox::down-button{

/*向下按钮的默认特性*/

background-color:#36405f;

border:1px solid #2b4e8c;

border-radius:2px;

image: url(:/新前缀/Spinbox_down.png);

}

QDoubleSpinBox::up-button:hover {

/*向上按钮鼠标悬停时的样式*/

background-color:#515d80;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::down-button:hover {

/*向下按钮鼠标悬停时的样式 */

background-color:#515d80;

border:1px solid #2b4e8c;

border-radius:2px;

}

QDoubleSpinBox::up-button:pressed{

/*向上按钮按下鼠标键时的样式 */

background-color:#515d80;

border:1px solid #039806;

border-radius:2px;

}

QDoubleSpinBox::down-button:pressed {

/* 按下鼠标键时的样式 */

background-color:#515d80;

border:1px solid #039806;

border-radius:2px;

}

这种方法的箭头尺寸会随着部件尺寸自动缩小,不能放大,最大尺寸就是箭头图片的原始尺寸。如下图:

推荐第二种方法。

相关推荐
gnip2 分钟前
项目开发流程之技术调用流程
前端·javascript
转转技术团队16 分钟前
多代理混战?用 PAC(Proxy Auto-Config) 优雅切换代理场景
前端·后端·面试
南囝coding17 分钟前
这几个 Vibe Coding 经验,真的建议学!
前端·后端
gnip31 分钟前
SSE技术介绍
前端·javascript
yinke小琪1 小时前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿1 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux1 小时前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵1 小时前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
ahead~1 小时前
【大模型入门】访问GPT_API实战案例
人工智能·python·gpt·大语言模型llm
喜欢吃豆1 小时前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp