往期回顾

【QT入门】 Qt自定义控件与样式设计之QLineEdit的qss使用-CSDN博客

【QT入门】Qt自定义控件与样式设计之QPushButton常用qss-CSDN博客

【QT入门】 Qt自定义控件与样式设计之QPushButton实现鼠标悬浮按钮弹出对话框-CSDN博客

 【QT入门】 Qt自定义控件与样式设计之QComboBox样式表介绍

 一、最终效果

我们主要看两个样式：

二、布局设置

1、QStringList

用QStringList一次性添加多个Item，需要添加相应的c++头文件，不过我试了一下，不添加也没事

//#include <string>
#include <QListView>

//using namespace std;

2、设置编辑状态

ui->comboBox->setEditable(true);

 ComboBox默认是不可编辑模式，setEditable设置为可编辑状态，那么就可以直接在comboBox进行编辑，编辑好了后敲回车还会直接放到item的最后一个。

3、设置item高度

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

注意，这里有个比较特别的地方：用qss设置item高度，除了用qss外，还要使用c++代码控制

比如：设置完上述qss样式后，还需要这样：

QComboBox QAbstractItemView::item
{
width: 20px;
}

三、样式表设计

 这个就比较复杂了，我们看一个，大家借鉴。

 未下拉时，QComboBox的样式

/* 未下拉时，QComboBox的样式 */
QComboBox 
{
    background:rgb(54,54,54);
    border: 1px solid gray;   /* 边框 */
    border-radius: 5px;   /* 圆角 */
    padding: 1px 18px 1px 3px;   /* 字体填衬 */
    color: white;
    font: normal normal 24px "Microsoft YaHei";
}

下拉后，整个下拉窗体样式

/* 下拉后，整个下拉窗体样式 */
QComboBox QAbstractItemView 
{
    outline: 0px solid gray;   /* 选定项的虚框 */
    border: 1px solid yellow;   /* 整个下拉窗体的边框 */
    color: rgb(250,251,252);
    background-color: rgb(70,80,90);   /* 整个下拉窗体的背景色 */
    selection-background-color: lightgreen;   /* 整个下拉窗体被选中项的背景色 */
}

/* 下拉后，整个下拉窗体每项的样式 */
/* 项的高度（设置pComboBox->setView(new QListView(this));后该项才起作用） */
QComboBox QAbstractItemView::item 
{
    height: 50px;   
}

/* 下拉后，整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover 
{
    color: rgb(90,100,105);
    background-color: lightgreen;   /* 整个下拉窗体越过每项的背景色 */
}

/* 下拉后，整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected 
{
    color: rgb(12, 23, 34);
    background-color: lightgreen;
}

/* QComboBox中的垂直滚动条 */
QComboBox QAbstractScrollArea QScrollBar:vertical 
{
    width: 13px;
    background-color: #d0d2d4;   /* 空白区域的背景色*/
}

QComboBox QAbstractScrollArea QScrollBar::handle:vertical 
{
    border-radius: 5px;   /* 圆角 */
    background: rgb(60,60,60);   /* 小方块的背景色深灰lightblue */
}

QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover 
{
    background: rgb(90, 91, 93);   /* 越过小方块的背景色yellow */
}

/* 设置为可编辑（setEditable(true)）editable时，编辑区域的样式 */
QComboBox:editable 
{
    background: green;
}

/* 设置为非编辑（setEditable(false)）!editable时，整个QComboBox的样式 */
QComboBox:!editable 
{
     background: rgb(54,54,54);
}

/* 设置为可编辑editable时，点击整个QComboBox的样式 */
QComboBox:editable:on 
{
    background: rgb(54,54,54);
}

/* 设置为非编辑!editable时，点击整个QComboBox的样式 */
QComboBox:!editable:on 
{
     background: rgb(54,54,54);
}

/* 设置为可编辑editable时，下拉框的样式 */
QComboBox::drop-down:editable 
{
    background: rgb(54,54,54);
}

/* 设置为可编辑editable时，点击下拉框的样式 */
QComboBox::drop-down:editable:on 
{
    background: rgb(54,54,54);
}

/* 设置为非编辑!editable时，下拉框的样式 */
QComboBox::drop-down:!editable 
{
    background: rgb(54,54,54);
}

/* 设置为非编辑!editable时，点击下拉框的样式 */
QComboBox::drop-down:!editable:on 
{
    background: rgb(54,54,54);
    image: url(:/resources/up.png); /* 显示上拉箭头 */ 
}

/* 下拉框样式 */
QComboBox::drop-down 
{
    subcontrol-origin: padding;   /* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */
    subcontrol-position: top right;   /* 下拉框的位置（右上） */
    width: 32px;   /* 下拉框的宽度 */

    border-left-width: 1px;   /* 下拉框的左边界线宽度 */
    border-left-color: darkgray;   /* 下拉框的左边界线颜色 */
    border-left-style: solid;   /* 下拉框的左边界线为实线 */
    border-top-right-radius: 3px;   /* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */
    border-bottom-right-radius: 3px;   /* 同上 */
    image: url(:/resources/down.png); 
}

/* 越过下拉框样式 */
QComboBox::drop-down:hover 
{
    background: rgb(80, 75, 90);
}

/* 下拉箭头样式 */ 
QComboBox::down-arrow 
{　　
    width: 32px; /* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */ 　　
    background: rgb(54,54,54); /* 下拉箭头的的背景色 */ 　　
    padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */　　
    image: url(:/resources/down.png); 
} 

/* 点击下拉箭头 */ 
QComboBox::down-arrow:on 
{ 　　
    image: url(:/resources/up.png); /* 显示上拉箭头 */ 
}

---

以上，就是QComboBox下拉框的样式设计

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！