QSS之QComboBox

QComboBox在Qt开发过程中经常使用，默认的下载列表风格达不到设计师的要求，本篇介绍基本的QComboBox的qss设置。

属性	意思
QComboBox	QComboBox基本样式
QComboBox:editable	右边可选择按钮
QComboBox:!editable, QComboBox::drop-down:editable	不可编辑或下拉时，comboxBox显示的背景状态
QComboBox:!editable:on, QComboBox::drop-down:editable:on	下拉项展开时，comboxBox显示的背景状态
QComboBox:on	下拉项展开时，comboxBox选中文字样式
QComboBox::drop-down	下拉按钮样式子控件填充方式
QComboBox::drop-down:hover	下面按钮悬浮样式鼠标悬浮样式
QComboBox::down-arrow	下拉箭头样式
QComboBox::down-arrow:on	下拉列表展开时下拉箭头样式


QString comboxStyle2  = QString(
                //1.界面上comboxBox样式 红色边框，圆角为3, 文字右边距边框13px， 最小宽度60px
                "QComboBox{border: 1px solid red;border-radius:3px;padding: 1px 18px 1px 13px;min-width: 60px;}"
                //2.右边可选择按钮 黄色
                "QComboBox:editable {background: yellow;}"
                //3.不可编辑或下拉时，comboxBox显示的背景状态
                "QComboBox:!editable, QComboBox::drop-down:editable {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);}"
                //4.下拉项展开时，comboxBox显示的背景状态
                "QComboBox:!editable:on, QComboBox::drop-down:editable:on {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #D3D3D3, stop: 0.4 #666666, stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);}"
                //5.下拉项展开时，comboxBox选中文字样式 文字离顶部8px, 左边4px
                "QComboBox:on{padding-top:8px; padding-left:4px;}"
                //6.下拉按钮样式 子控件填充方式，位位顶部靠右边，宽度15px， 左边框一个竖线，颜色darkgray， 风格solid实现，右上角和右下角度与comboxBox一样都是3px
                // 这条设置了，上面第2点就可以不用设置了。
                "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;}"
                //7.下面按钮悬浮样式  鼠标悬浮在右边的下拉按钮是变成红色
                "QComboBox::drop-down:hover{background: #ff0000;}"
                //8.下拉箭头样式
                "QComboBox::down-arrow {image:url(:/image/com_drop_down.png);}"
                //9.下拉列表展开时下拉箭头样式， 下拉时箭头距顶部5px, 左边5px
                "QComboBox::down-arrow:on{top:5px;left:5px;}"
                );
    ui->comboBox_2->setStyleSheet(comboxStyle2);

这里下位列表没有样式，因此还需要为下载列表设置样式

属性	意思
QComboBox QAbstractItemView	列表项基本样式
QListView:item	每个项的样式
QListView:item:hover	鼠标悬浮项的样式
QListView:item:disabled	禁用项的样式
QComboBox QAbstractScrollArea QScrollBar:vertical	列表项滚动条样式
QComboBox QAbstractScrollArea QScrollBar::handle:vertical	列表项滚动条滑块样式
QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover	列表项滚动条滑块悬浮样式

下面是完整的代码：


#ifndef MAINWINDOW_H
#define MAINWINDOW_H
 
#include 
 
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
 
class MainWindow : public QMainWindow
{
    Q_OBJECT
 
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    void initView();
    void initData();
 
private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H


#include "mainwindow.h"
#include "ui_mainwindow.h"
#include 
#include 
 
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    initView();
    initData();
}
 
MainWindow::~MainWindow()
{
    delete ui;
}
 
 
void MainWindow::initView()
{
    QString comboxStyle  = QString(
                "QComboBox{background:#FFFF00;border:1px solid #E4E2E2;padding: 1px 18px 1px 20px;border-radius:8px;color:#2F89FC;}"//未下拉时，QComboBox的样式
                "QComboBox:on{background:#00FF00;color:#2F00FC;}" // 点击QComboBox后的已选中项的样式
                "QComboBox QAbstractItemView {border:1px solid yellow;color:green;background-color:#FFFFFF;selection-color:blue;selection-background-color:red;}"//下拉展开后，整个下拉窗体样式
                "QComboBox QAbstractScrollArea QScrollBar:vertical{width: 10px;background-color: #f1ee04;}"
                "QComboBox QAbstractScrollArea QScrollBar::handle:vertical{border-radius:5px;background:rgb(255, 68, 20);}"
                "QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover{background:rgb(0, 255, 20);}"
                "QComboBox::drop-down {background:#FFFFFF;border-radius:8px;outline:none;}"
                "QComboBox::drop-down:hover{background: #ff0000;}"                       //上内边距、右内边距、下内边距、左内边距
                "QComboBox::down-arrow {width:22px;height:22px;background:transparent;padding:0px 20px 0px 0px;image:url(:/image/com_drop_down.png);}"
                "QComboBox::down-arrow:on{image: url(:/image/com_drop_arrow.png);}"
                );
    //padding //上内边距、右内边距、下内边距、左内边距
    ui->comboBox->setStyleSheet(comboxStyle);
 
 
    QString comboxStyle2  = QString(
                //1.界面上comboxBox样式 红色边框，圆角为3, 文字右边距边框13px， 最小宽度60px
                "QComboBox{border: 1px solid red;border-radius:3px;padding: 1px 18px 1px 13px;min-width: 60px;}"
                //2.右边可选择按钮 黄色
                "QComboBox:editable {background: yellow;}"
                //3.不可编辑或下拉时，comboxBox显示的背景状态
                "QComboBox:!editable, QComboBox::drop-down:editable {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);}"
                //4.下拉项展开时，comboxBox显示的背景状态
                "QComboBox:!editable:on, QComboBox::drop-down:editable:on {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #D3D3D3, stop: 0.4 #666666, stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);}"
                //5.下拉项展开时，comboxBox选中文字样式 文字离顶部8px, 左边4px
                "QComboBox:on{padding-top:8px; padding-left:4px;}"
                //6.下拉按钮样式 子控件填充方式，位位顶部靠右边，宽度15px， 左边框一个竖线，颜色darkgray， 风格solid实现，右上角和右下角度与comboxBox一样都是3px
                // 这条设置了，上面第2点就可以不用设置了。
                "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;}"
                //7.下面按钮悬浮样式  鼠标悬浮在右边的下拉按钮是变成红色
                "QComboBox::drop-down:hover{background: #ff0000;}"
                //8.下拉箭头样式
                "QComboBox::down-arrow {image:url(:/image/com_drop_down.png);}"
                //9.下拉列表展开时下拉箭头样式， 下拉时箭头距顶部5px, 左边5px
                "QComboBox::down-arrow:on{top:5px;left:5px;}"
                );
    ui->comboBox_2->setStyleSheet(comboxStyle2);
    QString itemStyle2 = QString(
                "QComboBox QAbstractItemView {"
                "border-radius:8px;padding-left:10px;padding-right:1px;"
                "margin-top:10px;"                          //下拉框与ComboxBox之间的距离
                "outline: 1px solid #ffffff;"               //选中项外边框
                "border: 1px solid #f1f1f1;"                 //整个下拉窗体的边框
                "color:#333333;"
                "background-color:white;"
                "selection-color:red;"
                "selection-background-color:#2F89FC;}"
                );
    QString itemStyle1 = QString(
                "QComboBox QAbstractItemView {"
                "border-radius:3px;padding-left:20px;padding-right:10px;"
                "margin-top:10px;"                          //下拉框与ComboxBox之间的距离
                "outline: 1px solid #000000;"               //选中项外边框
                "border: 1px solid yellow;"                 //整个下拉窗体的边框
                "color: red;"                               //文字颜色
                "background-color:#999999;"                 //整个下拉窗体的背景色
                "selection-color:blue;"                     //下拉框选中项字体颜色
                "selection-background-color:#333333;}"      //下拉框选中项的背景色
                );
    //下拉展开后，整个下拉窗体样式
    QString itemStyle = QString(//padding-left:10px;padding-right:1px;
                "QComboBox QAbstractItemView {"
                "border-radius:8px;padding-left:10px;"
                //"margin-left:10px;"                          //下拉框与ComboxBox之间的距离
                "outline: 1px solid #ffffff;"                  //选中项外边框
                //"border: 1px solid #f1f1f1;"                 //整个下拉窗体的边框
                "background-color:white;}"
                );
 
    QString comboxStyle3  = QString(
                //1.界面上comboxBox样式 红色边框，圆角为3, 文字右边距边框13px， 最小宽度60px
                "QComboBox{border: 1px solid red;border-radius:8px;padding: 1px 18px 1px 13px;min-width: 60px;}"
                //2.不可编辑或下拉时，comboxBox显示的背景状态
                "QComboBox:!editable, QComboBox::drop-down:editable {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);}"
                //3.下拉项展开时，comboxBox显示的背景状态
                "QComboBox:!editable:on, QComboBox::drop-down:editable:on {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #D3D3D3, stop: 0.4 #666666, stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);}"
                //4.下拉项展开时，comboxBox选中文字样式 文字离顶部8px, 左边4px
                "QComboBox:on{padding-top:8px; padding-left:4px;}"
                //5. 下接按钮背景透明，圆角与comboBox一样，无线框， 类似于隐藏按钮
                "QComboBox::drop-down {background:transparent;border-radius:3px;outline:none;}"
                //6.下拉箭头样式 箭头宽22px,高22px，背景透明，距右边20px，箭头图url
                "QComboBox::down-arrow {width:22px;height:22px;background:transparent;padding:0px 20px 0px 0px;image:url(:/image/com_drop_down.png);}"
                //7.下拉列表展开时下拉箭头样式
                "QComboBox::down-arrow:on{image: url(:/image/com_drop_arrow.png);}"
                //8.下载拉列的样式
                );
    ui->comboBox_3->setStyleSheet(comboxStyle3 + itemStyle);
 
    //下接列表的滚动条样式
    QString scrollStyle = QString(
                //"QComboBox QAbstractItemView::item{height:28px;margin-left:10px;padding-left:10px;}" //item项目的高度设置
                "QComboBox QAbstractScrollArea QScrollBar:vertical{width: 10px;background-color: #f1ee04;}"
                "QComboBox QAbstractScrollArea QScrollBar::handle:vertical{border-radius:5px;background:rgb(255, 68, 20);}"
                "QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover{background:rgb(0, 255, 20);}"
                );
 
    QListView *ListView = new QListView;
    ui->comboBox_4->setView(ListView);//必须设置
    //ui->comboBox_4->setEditable(true);
    ui->comboBox_4->setMaxVisibleItems(5);//设置下拉框当前页显示item个数。
    //下拉框设置圆角样式后，边角会存在阴影问题，这是Popup问题导致的，解决办法可以通过解决Popup来解决，也可以通过设置QComboBox本身属性。
    ui->comboBox_4->view()->window()->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
    ui->comboBox_4->view()->window()->setAttribute(Qt::WA_TranslucentBackground);
    //选中项的文字颜色及背景只能在QListView::item里设置，否则无效  padding-left:10px; 有白色边框
    QString listStyle = QString("QListView:item{height:30px;background-color:white;color:#333333;border-radius:8px;border:none;}"
                                "QListView:item:hover{height:30px;background-color:#2F89FC;color:white;border-radius:8px;border:0px solid #f1f1f1;;}"
                                "QListView:item:disabled{background-color:rgba(104,121,151,90%);color:#a0a0a0;border:0px solid #aaaaaa;}");
    QString comboxStyle4 = comboxStyle3 + itemStyle + scrollStyle + listStyle;
    ui->comboBox_4->setStyleSheet(comboxStyle4);
 
    //ListView->setStyleSheet(listStyle);
    ListView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
}
 
void MainWindow::initData()
{
    QIcon   icon;
    //icon.addFile(":/image/icon24.png");
    ui->comboBox->addItem(icon, "bilibili---1");
    ui->comboBox->addItem(icon, "bilibili---2");
    ui->comboBox->addItem(icon, "bilibili---3");
    ui->comboBox->addItem(icon, "bilibili---4");
    ui->comboBox->addItem(icon, "bilibili---5");
    ui->comboBox->addItem(icon, "bilibili---6");
    ui->comboBox->addItem(icon, "bilibili---7");
    ui->comboBox->addItem(icon, "bilibili---8");
    ui->comboBox->addItem(icon, "bilibili---9");
    ui->comboBox->addItem(icon, "bilibili---11");
    ui->comboBox->addItem(icon, "bilibili---12");
    ui->comboBox->addItem(icon, "bilibili---13");
    ui->comboBox->addItem(icon, "bilibili---14");
    ui->comboBox->addItem(icon, "bilibili---15");
    ui->comboBox->addItem(icon, "bilibili---16");
    ui->comboBox->addItem(icon, "bilibili---17");
    ui->comboBox->addItem(icon, "bilibili---18");
    ui->comboBox->addItem(icon, "bilibili---19");
 
    QStringList szList{QStringLiteral("龙华"), QStringLiteral("龙岗"), QStringLiteral("福田"), QStringLiteral("宝安"), QStringLiteral("罗湖"), QStringLiteral("坪山"), QStringLiteral("大鹏"), QStringLiteral("光明")};
 
    QStringList cityList{QStringLiteral("昆明"), QStringLiteral("大理"), QStringLiteral("保山"), QStringLiteral("丽江"), QStringLiteral("玉溪"), QStringLiteral("曲靖"), QStringLiteral("昭通"), QStringLiteral("普洱")};
 
    QStringList proviceList{QStringLiteral("云南"), QStringLiteral("四川"), QStringLiteral("西藏"), QStringLiteral("新疆"), QStringLiteral("青海"), QStringLiteral("宁夏"), QStringLiteral("陕西"), QStringLiteral("山西"),
                QStringLiteral("湖南"), QStringLiteral("湖北"), QStringLiteral("广东"), QStringLiteral("广西"), QStringLiteral("福建"), QStringLiteral("浙江"), QStringLiteral("江西"), QStringLiteral("上海")};
 
    ui->comboBox_2->addItems(szList);
    ui->comboBox_3->addItems(cityList);
    ui->comboBox_4->addItems(proviceList);
}

参考：

https://doc.qt.io/qt-5/stylesheet-examples.html
https://doc.qt.io/qt-5/stylesheet-reference.html
https://blog.csdn.net/no_say_you_know/article/details/125335417
https://blog.csdn.net/qq_36651243/article/details/100765496

相关阅读:
Qlib股票数据获取与查看（Qlib学习1）
web前端期末大作业——餐品后台管理系统(html+css+javascript)
【每日一题】统计范围内的元音字符串数
 理解网络通信的基础：OSI七层模型与TCP/IP五层模型
 2020年12月 C/C++（一级）真题解析#中国电子学会#全国青少年软件编程等级考试
 SQL 左连接 LEFT JOIN 关键字｜｜SQL右连接 RIGHT JOIN 关键字
 16-bit 内置基准模数转换器：MS1100
Matlab save colormap
（附源码）ssm考生评分系统毕业设计 071114
5.36 BCC工具之ucalls.py解读
原文地址：https://blog.csdn.net/chenyijun/article/details/133386057