[QSS] QComboBox美化

首先对QComboBox整体的样式进行调整(在进行QSS设置时,一定要先整体后局部来设置)

QComboBox
{
    padding:2px;   /* 内容与边框之间像素的空白距离 */
    border-style:solid;  /*边框的风格: solid 实线*/
    border-radius:2px;   /*控件边角呈现圆角效果，增强视觉美感*/
    border-width:1px;    /*控制边框线条粗细。*/
    border-color: #FFFFFF;  /*控件边框的颜色为白色*/
    background-color: rgb(5, 35, 55); /*QComboBox控件的背景颜色为深紫色*/
}

• 对QComboBox的箭头样式调整

QComboBox::down-arrow
{
    image:url(:/up.png);   /*设置箭头的图片*/
    width:20px;            /*设置箭头的宽度*/
    height:20px;           /*设置箭头的高度*/ 
    right:0px;             /*贴近父容器右侧边缘*/
}

• 设置下拉箭头所处的矩形区域的样式(要注意上面的down-arrow只是单纯的箭头)

/*下拉箭头所处的矩形区域*/
QComboBox::drop-down
{
    width:20px;     /*设置矩形框宽度*/
    border-left-width:0px;  /*设置矩形框左边的边框宽度为0 */
}

• 设置下拉区域打开时的状态

/*下拉区域打开状态*/
 QComboBox::drop-down:on
{
    top:1px;  // 设置下拉矩形框上边距
}

• 设置QComboBox中下拉视图中的整体样式

QComboBox QAbstractItemView
{
	background:rgba(255,255,255,1);
    outline: 0px;    /*取消下拉试图中的边框线条*/
}

• 设置下拉视图中的每一项的元素样式

QComboBox QAbstractItemView::item
{
	height:24px;    /*设置每一项的高度*/
	color:#666666;  /*设置每一项的文本颜色*/
	padding-left:9px; /*设置文本内容与左侧边框的空白距离*/
	background-color:rgb(5, 35, 55);  /*设置每一项的背景颜色*/
}

• 设置下拉项鼠标悬浮时的样式

• QComboBox QAbstractItemView::item:hover
  {
       background-color: rgb(255, 156, 255);
  }

• 最后很重要的一步,设置QComboBox的视图
• 为什么要这样设置呢?因为QComboBox的默认视图并不是QAbstractItemView所以要修改它的默认视图

ui->comboBox->setView(new QListView());

效果图: