【QT】QComboBox设置样式；常见问题（已解决）：下拉框箭头样式、下拉列表item样式、下拉框阴影如何去除、下拉列表增加间隔2px、下拉列表设置item内边距、滚动条样式

原创 已于 2025-06-18 10:32:31 修改 · 1.5k 阅读 · 29 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#qt #开发语言

于 2025-06-11 14:57:37 首次发布

目录

1.先说遇到几个难解决的问题

1）下拉框的下箭头设置

2）下拉列表item样式设置

3）下拉框自带阴影去除

4）下拉列表与QComboBox本身间隔2px

5）下拉列表设置item内间距

2.完整代码

1）qtDesigner中用【改变样式表】中的代码

2）构造函数中增加QComboBox的相关样式

项目需要，一个带样式的下拉控件（QComboBox，我给的objectName名字为 cb_connectionPort），找了很多参考资料才做出来，最终整理一下，供大家学习参考

我的环境：qt5.12 + windows + qtcreator

设置样式主要通过qtdesigner界面 + 代码设置

先看下我最终的实现样式

1.先说遇到几个难解决的问题

1）下拉框的下箭头设置

思路：主要通过qtdesigner界面的【改变样式表】修改对应的样式和图片

关键代码：

/* 针对 ID 为 cb_connectionPort 的 QComboBox 的下拉按钮样式 */
QComboBox#cb_connectionPort::drop-down {
    background: transparent;  /* 设置下拉按钮背景透明 */
    subcontrol-origin: padding;  /* 定位基准使用 padding 区域 */
    subcontrol-position: right center;  /* 按钮位于右侧垂直居中 */
    width: 24px;  /* 按钮宽度 */
    height: 24px;  /* 按钮高度 */
    border-radius: 12px;  /* 圆角半径 */
}

/* 下拉按钮中的箭头图标样式 */
QComboBox#cb_connectionPort::down-arrow {
    border-image: url(:/img/dropdown.svg);  /* 使用 SVG 图像作为箭头 */
    width: 18px;  /* 图标宽度 */
    height: 18px;  /* 图标高度 */
}

/* 鼠标悬停时箭头图标的样式 */
QComboBox#cb_connectionPort::down-arrow:hover {
    /* 设置渐变背景（从透明到深绿色）*/
    background: qlineargradient(x1:1, y1:1, x2:0, y2:0, stop:0.0 rgba(140, 181, 112, 0), stop:1 rgba(80, 118, 43, 1));
    border-radius: 6px;  /* 圆角半径 */
}

2）下拉列表item样式设置

生效前后对比下实际效果

我用两种方式都设置了样式（在代码中用setStyleSheet，或在qtdesigner直接写样式）都不生效，查资料后发现是没设置QComboBox的setView所致（1行代码导致的），加了这行代码之后就生效了

关键代码

ui->cb_connectionPort->setView(new QListView(this));//使item的样式生效

item相关样式代码（在代码中用setStyleSheet设置的），红框内的是item样式相关的

            "QListView::item {"
            "    font-family: Microsoft YaHei;"
            "    font-size: 14px;"
            "    min-width: 64px;"
            "    min-height: 32px;"
            "    border-radius: 11px;"
            "    background: #2D2D2D;"
            "    color: white;"
            "    padding-left: 20px;"
            "}"
            "QListView::item:selected {"
            "    background: qlineargradient(x1:1, y1:1, x2:0, y2:0, stop:0.0 #8CB570, stop:1 #50762B);"
            "}"

3）下拉框自带阴影去除

原因：是因为下拉框存在于一个名为【QComboBoxPrivateContainer】的容器内，需要把这个容器的样式设置为“border:none;”

看下修改前后对比图

修改前就是会有一个边框还有一个灰色的背景图，很丑！

修改思路：获取QComboBox控件view模型的父对象widget，然后去掉这个widget的边框，以及设置它的Flags为：containerObj->windowFlags() | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint；

设置它的属性为：Qt::WA_TranslucentBackground

关键代码：

//去除下拉框的外阴影 操作QComboBoxPrivateContainer
    QWidget* containerObj = ui->cb_connectionPort->view()->parentWidget();
    if (containerObj) {
        containerObj->setWindowFlags(containerObj->windowFlags() | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
        containerObj->setAttribute(Qt::WA_TranslucentBackground);
        containerObj->setStyleSheet("background-color: transparent; border: none;border-radius: 11px;");

原理解析：

1. setWindowFlags(Qt::FramelessWindowHint|Qt::NoDropShadowWindowHint)

  • Qt::FramelessWindowHint
    移除了窗口系统的原生边框（包括 Windows/macOS 可能强制添加的直角边框）。这是最关键的一步，因为它阻止了操作系统级别的窗口装饰。

  • Qt::NoDropShadowWindowHint
    禁用窗口阴影（某些系统会为弹出菜单添加默认阴影，可能间接影响边框视觉表现）。

2. setAttribute(Qt::WA_TranslucentBackground)

  • 声明窗口背景透明，强制 Qt 不填充默认背景色。

  • 如果不设置此属性，即使边框去除了，Qt 仍可能用默认颜色（如白色或灰色）填充背景，导致直角背景区域可见。

3. setStyleSheet("background-color: transparent; border: none; border-radius: 11px;")

  • background-color: transparent
    确保容器内部背景透明，避免残留背景色破坏圆角效果。

  • border: none
    显式覆盖任何可能的内部样式表边框（如 QFrame 的默认边框）。

  • border-radius: 11px
    虽然容器本身是透明的，但这一步可以确保其子控件（如 QListView）的圆角不会被直角容器裁剪。

4）下拉列表与QComboBox本身间隔2px

QComboBox的默认样式是下拉列表紧贴着QComboBox本身，也挺丑，所以一般会给2px的间距

看一下修改前后的实现差距

关键代码

其实就1行，在QListView的样式中设置【margin-top: 2px;】

    "QListView {"
    "    border: 1px solid rgba(255, 255, 255, 0.25);  /* 半透明白色边框 */"
    "    outline: none;                                /* 移除焦点框 */"
    "    background: #2D2D2D;                          /* 深灰背景色 */"
    "    min-width: 64px;                              /* 最小宽度 */"
    "    border-radius: 11px;                          /* 圆角半径 */"
    "    font-size: 14px;                              /* 字体大小 */"
    "    color: white;                                 /* 文字颜色 */"
    "    padding: 6px;                                 /* 内边距 */"
    "    margin-top: 2px;                              /* 上外边距 */"
    "}"

5）下拉列表设置item内间距

就是item与下拉列表之间的padding，思路是设置QListView的padding；

看下设置前后对比图

关键代码

            "QListView {"
            "    border: 1px solid rgba(255, 255, 255, 0.25);"
            "    outline: none;"
            "    background: #2D2D2D;"
            "    min-width: 64px;"
            "    border-radius: 11px;"
            "    font-size: 14px;"
            "    color: white;"
            "    padding: 6px;"
            "    margin-top: 2px;"
            "}"

我觉得以上几个问题就是很常见的QComboBox问题了，也是费了我一番精力，不过好歹都解决了

2.完整代码

首先我的样式分为两部分：

1）QComboBox本身和下拉箭头的样式我是在qtDesigner中用【改变样式表】去写的；

2）下拉列表样式以及去除阴影部分的操作我是在构造函数中用代码写的；

为什么分开呢：因为想要第二部分的样式生效，就需要设置这句代码：

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

但是设置了这句代码后，可能会与qtDesigner中用样式表有冲突，会破坏级联关系，所以我就分开设置样式了，不过还好最终结果是好的。

1）qtDesigner中用【改变样式表】中的代码

QComboBox#cb_connectionPort{
padding-left: 12px;
background-color:#4F4F4F;
border:none;
border-radius:11px;
color:white;
min-height:28px;
font-size: 14px;
font-family: Microsoft YaHei;
}

QComboBox#cb_connectionPort::drop-down{
background:transparent;
subcontrol-origin: padding;
subcontrol-position: right center;
width: 24px;
height: 24px;
border-radius:12px;
}

QComboBox#cb_connectionPort::down-arrow{
border-image: url(:/img/dropdown.svg);
width: 18px;
height: 18px;
}

QComboBox#cb_connectionPort::down-arrow:hover{
background:qlineargradient(x1:1, y1:1, x2:0, y2:0, stop:0.0 rgba(140, 181, 112, 0), stop:1 rgba(80, 118, 43, 1));
border-radius:6px;
}

2）构造函数中增加QComboBox的相关样式

我的QComboBox是用qtDesigner拖的控件，它的父类是一个QWidget，代码部分我是直接在父类的构造函数中设置的；

（如果你不想，可以不在构造函数中设置）

    //test 给下拉框增加3个选项：ABC
    QStringList test;
    test << "A" << "B" << "C";
    ui->cb_connectionPort->addItems(test);
    
    //使item的样式生效
    ui->cb_connectionPort->setView(new QListView(this));

    //去除下拉框的外阴影 操作QComboBoxPrivateContainer
    QWidget* containerObj = ui->cb_connectionPort->view()->parentWidget();
    if (containerObj) {
        containerObj->setWindowFlags(containerObj->windowFlags() | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
        containerObj->setAttribute(Qt::WA_TranslucentBackground);
        containerObj->setStyleSheet("background-color: transparent; border: none;border-radius: 11px;");

        //设置QAbstractItemView样式，ui中设置不生效是因为级联关系被破坏了
                ui->cb_connectionPort->view()->setStyleSheet(
                    "QListView {"
                    "    border: 1px solid rgba(255, 255, 255, 0.25);"
                    "    outline: none;"
                    "    background: #2D2D2D;"
                    "    min-width: 86px;"
                    "    border-radius: 11px;"
                    "    font-size: 14px;"
                    "    color: white;"
                    "    padding: 6px;"
                    "    margin-top: 3px;"
                    "}"
                    "QListView::item {"
                    "    font-family: Microsoft YaHei;"
                    "    font-size: 14px;"
                    "    min-width: 86px;"
                    "    min-height: 32px;"
                    "    border-radius: 11px;"
                    "    background: #2D2D2D;"
                    "    color: white;"
                    "    padding-left: 5px;"
                    "}"
                    "QListView::item:selected {"
                    "    background: qlineargradient(x1:1, y1:1, x2:0, y2:0, stop:0.0 #8CB570, stop:1 #50762B);"
                    "}"
                    "QScrollBar:vertical {"
                    "    border: none;"
                    "    background: #272727;"
                    "    width: 8px;"
                    "    margin: 0px 0px 0px 0px;"
                    "    border-radius: 5px;"
                    "}"
                    "QScrollBar::handle:vertical {"
                    "    background: rgba(255, 255, 255, 0.3);"
                    "    border-radius: 5px;"
                    "    min-height: 20px;"
                    "}"
                    "QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {"
                    "    height: 0px;"
                    "    background: none;"
                    "}"
                    "QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {"
                    "    background: none;"
                    "}"
                    );

    }

我在网上看到很多人问相关的问题，但是没有看到特别全面且详细的解决办法或者前后对比，因此作为参考整理本篇内容，也供以后的自己复习用

有什么问题可以评论或私信，看到都会回

码字不易，点个赞

--END--

《Qt炫酷自定义！QComboBox下拉框深度美化指南（附完整样式代码+效果图）》
ChenJin_2的博客
05-07 394
Qt炫酷自定义！QComboBox下拉框深度美化指南（附完整样式代码+效果图）》
Qt —— 有趣的QCombobox样式表例子（附：源码）
03-03 3560
QCombobox设置样式表       当在定制QComboBox时，我们可以定制：           1）显示的文本，背景颜色，前景颜色；           2）整个矩形框           3）下拉按钮           4）popup-弹出的下拉列表       修改样式表 /* 常态 */ QComboBox { font: 10pt "Courier 12 Pitch"; /*字体*/ color: rgb(138, 226, 52); /*字色*
QT下拉框样式表设置
09-21
QT下拉框样式表设置，能够修改表头，点击的三角，鼠标停留颜色等
Qt CombBox下拉列表自定义(使用样式表)
03-11
Qt CombBox下拉列表自定义(使用样式表)，参考ReadMe.txt文档做适当的修改，更容易熟悉样式表使用，希望对你有用。
「QT」QSS样式表 之 QComboBox下拉控件样式表
何曾参静谧的博客
02-11 1752
的外观进行高度定制，包括下拉箭头、编辑框、下拉列表、边框和背景等。然而，由于Qt的内部实现和平台差异，某些样式属性可能无法按预期工作。在实际开发中，你可能需要结合Qt的绘图功能、自定义控件或平台特定的代码来实现更复杂的样式需求。）的样式可能在某些Qt版本或平台上不起作用，因为Qt可能会使用操作系统的原生箭头样式。的外观进行高度定制，包括下拉箭头、下拉列表、边框、背景颜色以及字体等。的边框和背景样式会同时影响编辑框和下拉箭头区域（除非这些部分有单独的样式规则覆盖）。然而，由于Qt的内部实现，直接为。
QCombobox样式
weixin_45827115的博客
08-18 441
QComboBox { background-color:rgba(46, 46, 46, 128); color:#FFFFFF; border:1px solid rgba(255, 255, 255, 51); padding-left: 12px; } QComboBox::drop-down { subcontrol-origin: padding; subcontrol-position: top right; width: 15px; border-left-width
QComboBox样式设置——Qt
xiaopei_yan的博客
07-17 3万+
前言 我对qss只会一些简单的，所以每次都得查资料，自己调，好麻烦，特别是之前一篇博客关于菜单样式的设置。这次以为两者相似，结果不是的。 这个QComboBox下拉框的样式设置有稍微复杂，有些关键点得记住，所以用这篇博客记录下。 代码和说明 有图有真相，我现在将QComboBox样式表中的部分关键词标出来，更直观一些： QComboBox常规样式 图中QComboBox我只圈出了上面一部分，按理说整个都是属于QComboBox,但...
QComboBox样式
danshiming的博客
10-21 6608
前言 我对qss只会一些简单的，所以每次都得查资料，自己调，好麻烦，特别是之前一篇博客关于菜单样式的设置。这次以为两者相似，结果不是的。 这个QComboBox下拉框的样式设置有稍微复杂，有些关键点得记住，所以用这篇博客记录下。 代码和说明 有图有真相，我现在将QComboBox样式表中的部分关键词标出来，更直观一些： QComboBox常规样式 图中QComboBox我只圈出了上面一部分，按理说整个都是属于QComboBox,但是直接在此关键词下设置属性只包括这部分，其他的需要分别..
Qt QComboBox QSS样式设置
L-Super的博客
06-17 1万+
QComboBox qss 样式表
QComboBox样式指南
weixin_47236438的博客
11-08 723
1.定义一个QComboBox对象。3.设置QComboBox的样式。5.设置下拉选项的样式。4.设置下拉图标的样式。
QComboBox设置圆角下拉列表并调整下拉列表位置
最新发布
草上爬的博客
06-14 209
QCombobox设置圆角下拉列表并调整下拉列表位置 下拉列表其实在一个QFrame里面，我们用findChild找到它，并且在它弹出后，向下移动几个像素 下拉列表圆角需要先设置列表背景透明和无边框，然后再在样式表里设置radius
Qt之QComboBox 解决下拉列表样式不生效、item文字重叠
Ilson_的博客
01-04 4857
简述 Qt提供的QComboBox下拉列表组合控件是非常好用的，既可以当成QLineEdit做编辑用也提供了一个下拉列表供用户选择。当然也有其不好的地方，就是使用Qss样式的时候只能对其表层进行修改下拉列表不生效；如果想要在Qss对下拉列表修改还得重新设置它的QListView；如果你想要设置item的高度结果有可能还会导致item的重叠，因为可能你设置的item高度后他内存并没有重新计算。 下拉列表样式不生效 QComboBox{ padding: 0 5px; ...
Qt中QComboBox下拉列表（popup）位置与样式的控制
热门推荐
imred的专栏
10-04 4万+
转载请注明来源：http://blog.csdn.net/imred Qt中的QComboBox在不同平台下有所差异（主要是不可编辑的QComboBox），如下样式A和样式B： 左边为样式A为“fusion”样式，在ubuntu下的样式似乎就是这个，它的特点是下拉列表会把文字框和箭头盖住。右边样式B为“windowsvista”样式，它是win10下Qt的默认样式，其特点是下拉列表会显示在文
3. 如何美化QComboBox下拉弹窗的阴影效果
进击的程序员
03-10 1318
/这个属性很重要，两者结合才能实现背景透明效果。
【QT入门】 Qt自定义控件与样式设计之QComboBox样式表介绍
LF__plus的博客
04-09 1758
【QT入门】 Qt自定义控件与样式设计之QComboBox样式表介绍
QSS之QComboBox（文字居中）
chenyijun的专栏
10-03 5871
QComboBox在Qt开发过程中经常使用，默认的下载列表风格达不到设计师的要求，本篇介绍基本的QComboBox的qss设置。
QComboBox下拉列表样式
haiyanzhuo的博客
10-20 2239
QComboBox下拉列表样式效果图qss样式代码添加 效果图 qss样式 QComboBox {background: #31355B; border:0;color: #FFFFFF;} /*下拉框样式。selection-color 选中字体颜色；selection-background-color选中背景色； outline：0px 去掉虚线框；margin-top 下拉列表与编辑框外边距*/ QComboBox QAbstractItemView{background:#4E5387;colo
Qt.QComboBox样式表
viviliving的专栏
07-26 7071
Qt样式表（QComboBox下拉框） 简介这篇文章主要介绍了Qt样式表（QComboBox下拉框）(示例代码)以及相关的经验技巧，文章约10267字，浏览量408，点赞数1，值得参考！ /* 未下拉时，QComboBox的样式 */ QComboBox { border: 1px solid gray; /* 边框 */ border-radius: 3px; /* 圆角 */ padding: 1px 18px 1px 3px; /* 字体填衬 */ ..
QComboBox 样式
03-24
### 如何自定义 QComboBox 的样式 QComboBox 是 Qt 中用于提供下拉菜单功能的一个重要控件。通过使用 Qt Style Sheets (QSS)，可以轻松地调整其外观和行为。以下是关于如何自定义 QComboBox 样式的具体说明。 #### 使用 QSS 设置 QComboBox 样式 QComboBox 支持通过 `setStyleSheet` 方法应用样式表，从而改变其视觉效果。以下是一个简单的示例： ```cpp QComboBox *comboBox = new QComboBox(); comboBox->addItems({"Option 1", "Option 2", "Option 3"}); comboBox->setStyleSheet( "QComboBox {" "border: 1px solid gray;" "border-radius: 3px;" "padding: 1px 18px 1px 3px;" "min-width: 6em;" "}" "QComboBox::drop-down {" "subcontrol-origin: padding;" "subcontrol-position: top right;" "width: 15px;" "border-left-width: 1px;" "border-left-color: darkgray;" "border-left-style: solid;" "border-top-right-radius: 3px;" "border-bottom-right-radius: 3px;" "}" ); ``` 上述代码设置了组合框的整体边框、圆角半径以及内部填充区域的宽度[^1]。同时，还针对下拉箭头部分 (`QComboBox::drop-down`) 进行了单独配置。 #### 动态更新选项列表 如果希望在运行时动态向 QComboBox 添加新项，则可以通过捕获用户的输入事件并判断当前文本是否存在来完成此操作。例如，在用户按下回车键后自动将新的条目追加至列表中： ```cpp void onReturnPressed() { QString text = comboBox->currentText(); if (!comboBox->findText(text, Qt::MatchFixedString)) { comboBox->addItem(text); } } ``` 在此过程中需要注意区分大小写的匹配方式，默认情况下为大小写敏感模式(`Qt::CaseSensitive`)[^2]。可以根据实际需求修改该属性值以适应不同的应用场景。 #### 定制弹出窗口布局 对于更复杂的场景，可能还需要进一步调整 QComboBox 下拉列表的具体表现形式，比如增加列数或者隐藏表头等等。这通常涉及到重新实现某些虚函数逻辑: - **headerData**: 返回指定位置上的数据内容； - **flags**: 定义单元格的行为标志位集合。 这些高级特性允许开发者完全掌控每一个细节方面的呈现效果[^3]。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wyn_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值