当前的需求是，蓝色背景的画面，需要一个相对应色系的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;

}

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

 推荐第二种方法。