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;

}

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

推荐第二种方法。

相关推荐
小九今天不码代码几秒前
深入理解 CSS 表格布局:table-layout 的秘密与实战详解(附费用报销单案例)
css·前端开发·表格布局·web设计·table-layout·页面优化·样式布局
AI 嗯啦5 分钟前
深度学习——Python 爬虫原理与实战:从入门到项目实践
爬虫·python·深度学习
龙腾AI白云9 分钟前
大模型-7种大模型微调方法 上
scrapy·scikit-learn·pyqt
颜酱11 分钟前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化
海在掘金6112726 分钟前
从"鬼知道这对象有啥"到"一目了然" - TS接口的实战魔力
前端
spionbo27 分钟前
Vue 模拟键盘组件封装方法与使用技巧详解
前端
泉城老铁27 分钟前
springboot 对接发送钉钉消息,消息内容带图片
前端·spring boot·后端
顾青28 分钟前
微信小程序 VisionKit 实战(二):静态图片人脸检测与人像区域提取
前端·微信小程序
MediaTea29 分钟前
Python 第三方库:Word Cloud(词云图生成)
开发语言·python
hmfy29 分钟前
那些前端老鸟才知道的秘密
前端