使用 QSS 自定义 QComboBox 样式并移除下拉阴影效果

在 Qt 中，QComboBox 是一个常用的控件，用于显示可选择项的下拉列表。在自定义 QComboBox 的样式时，我们可以通过 QSS（Qt Style Sheets）来修改其外观，并利用 QFrame 来控制下拉列表的阴影效果。本文将详细介绍如何通过 QSS 设置 QComboBox 的样式，并结合代码演示如何去除 QComboBox 的下拉阴影。

---

1. QSS 自定义 QComboBox 样式

通过 QSS，可以轻松修改 QComboBox 的背景颜色、边框、箭头图标、以及下拉列表的项目样式。下面是一个示例 QSS，用于自定义 QComboBox 的样式。

/* QComboBox 主体样式 */
QComboBox {
    background: #EEEEEE;
    border-radius: 2px;
    border: 1px solid #D8D8D8;
    padding-left: 10px; /* 左侧内边距 */
    padding-right: 0px; 
    font-family: "Microsoft YaHei";
    font-size: 12px;
    color: #333333;
    height: 14px; /* 根据需要调整高度，确保箭头和文字垂直居中 */
}

/* 下拉按钮（箭头）的样式 */
QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px; /* 总宽度 = 箭头宽度 9px + 右边距 8px + 8px 额外空间 */
    border: none; /* 去除默认边框 */
}

/* 下拉箭头的具体样式 */
QComboBox::down-arrow {
    image: url(":/imgs/imgs/icon_pull-down@2x.png"); /* 默认箭头图片 */
    width: 9px;
    height: 9px;
    margin: 7px 8px; /* 上下各 7px，右侧 8px */
}

/* 下拉状态时箭头的样式 */
QComboBox::down-arrow:on {
    image: url(":/imgs/imgs/icon_Pack up@2x.png"); /* 按下时的箭头图片 */
}

/* Drop-down list view */
QComboBox QAbstractItemView {
    background: #FFFFFF;
    border-radius: 2px;
    border: 1px solid #D8D8D8;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    color: #333333;
    outline: none;
}

QComboBox QAbstractItemView::item {
    height: 25px;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    color: #333333;
    padding-left: 8px;
    background-color: #FFFFFF;
    outline: none;
}

QComboBox QAbstractItemView::item:hover { 
    background-color: #EEEEEE;
    color: #3EA8FF;
}

QComboBox QAbstractItemView::item:selected {
    background-color: #EEEEEE;
    color: #3EA8FF;
}

在这段 QSS 代码中，我们做了以下定制：

• QComboBox 主体样式：设置了背景颜色、边框样式、文字颜色和字体，以及内边距确保文字和箭头位置。
• 下拉箭头样式：定义了默认和按下时的箭头图标，通过设置不同的图片实现视觉变化。
• 下拉列表视图样式：设置了下拉列表的背景颜色和边框，并移除了默认的焦点矩形。
• 下拉列表项的样式：为每个列表项设置了文字颜色、字体、内边距，以及在 hover 和 selected 状态下的颜色变化。

2. 去除 QComboBox 下拉列表阴影

在某些情况下，QComboBox 的下拉列表可能会自动带有阴影效果。如果你想去掉阴影，可以通过修改父窗口的属性来实现。

代码实现

首先，我们通过以下代码设置 QComboBox 的 QListView 作为下拉视图，并获取它的父窗口：

ui->capture_style_combobox->setView(new QListView(this));
QFrame* pListViewFrame = (QFrame*)ui->capture_style_combobox->view()->parentWidget();
if (QString(pListViewFrame->metaObject()->className()) == "QComboBoxPrivateContainer")
{
    pListViewFrame->setWindowFlag(Qt::NoDropShadowWindowHint, true); // 移除阴影
}

代码解释：

1. setView(new QListView(this))：
   我们为 QComboBox 设置了自定义的 QListView 作为下拉视图。这样我们可以更灵活地对列表视图进行定制。

2. 获取父窗口并判断是否为 QComboBoxPrivateContainer：
   下拉列表的父窗口在 Qt 内部是一个 QComboBoxPrivateContainer 类。通过 metaObject()->className() 获取父窗口的类名，并检查它是否是 QComboBoxPrivateContainer。

3. 移除阴影效果：
   一旦确认父窗口为 QComboBoxPrivateContainer，我们使用 setWindowFlag(Qt::NoDropShadowWindowHint, true) 来移除下拉列表的阴影效果。

3. 结果效果

经过上述步骤，自定义的 QComboBox 将拥有我们通过 QSS 定制的样式，同时下拉列表不再有阴影效果。你可以根据需要进一步修改样式表中的颜色、字体大小、边框等。