QSS之QComboBox（文字居中）

已于 2024-04-22 23:33:48 修改
阅读量2.8k 收藏 27
点赞数
分类专栏： # Qt之CSS 文章标签： QT
于 2023-10-03 11:41:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenyijun/article/details/133386057
版权

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

属性意思
QComboBoxQComboBox基本样式
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 <QMainWindow>

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 <QListView>
#include <QScrollBar>
#include <QLineEdit>

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);
   
}


 //comboBox显示框文字居中
 //ui->comboBox_3->setEditable(true);
 //ui->comboBox_3->lineEdit()->setAlignment(Qt::AlignCenter);
 //ui->comboBox_3->lineEdit()->setReadOnly(true);

参考：

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

班公湖里洗过脚
关注
  • 0
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt之QSS（白色靓丽）
03-26
Qt之QSS（白色靓丽）
[QSS] QComboBox美化
最新发布
qq_45280097的博客
04-25 293
首先对QComboBox整体的样式进行调整(在进行QSS设置时,一定要先整体后局部来设置)
QT样式表设置 之 QComboBox下拉框样式
学之知之的博客
03-05 1万+
/* 未下拉时，QComboBox的样式 */ QComboBox { border: 1px solid gray; /* 边框 */ border-radius: 3px; /* 圆角 */ padding: 1px 18px 1px 3px; /* 字体填衬 */ color: #000; font: normal normal 15px...
Qt QComBox 样式 QSS 阴影效果
温故而知新
01-23 2810
文章目录效果代码样式下拉框阴影效果 效果 代码 样式 QComboBox{ color:#1e222b; padding: 1px 15px 1px 3px; border:1px solid rgba(228,228,228,1); border-radius:8; font-family: Microsoft YaHei; font-size: 14px; } QComboBox::drop-down { /*下拉按钮*/ subcontrol-origin
QComboBox样式-qss
weixin_43956958的博客
08-17 1408
QComboBox样式
QComboBox样式设置——Qt
热门推荐
xiaopei_yan的博客
07-17 2万+
前言 我对qss只会一些简单的，所以每次都得查资料，自己调，好麻烦，特别是之前一篇博客关于菜单样式的设置。这次以为两者相似，结果不是的。 这个QComboBox下拉框的样式设置有稍微复杂，有些关键点得记住，所以用这篇博客记录下。 代码和说明 有图有真相，我现在将QComboBox样式表中的部分关键词标出来，更直观一些： QComboBox常规样式 图中QComboBox我只圈出了上面一部分，按理说整个都是属于QComboBox,但...
Qt QComboBox QSS样式设置
L-Super的博客
06-17 9411
QComboBox qss 样式表
qss样式表之QComboBox
王廷云的博客
07-08 1万+
先来个简单的示例 QComboBox { font-family: "Microsoft YaHei"; font-size: 14px; color: #000000; font-style: italic; font-weight: bold; } 效果图如下 其中： font-family 为设置字体类型，标准形式需要加双引号，不加也可能会生效，具...
QComboBox样式
danshiming的博客
10-21 4614
前言 我对qss只会一些简单的，所以每次都得查资料，自己调，好麻烦，特别是之前一篇博客关于菜单样式的设置。这次以为两者相似，结果不是的。 这个QComboBox下拉框的样式设置有稍微复杂，有些关键点得记住，所以用这篇博客记录下。 代码和说明 有图有真相，我现在将QComboBox样式表中的部分关键词标出来，更直观一些： QComboBox常规样式 图中QComboBox我只圈出了上面一部分，按理说整个都是属于QComboBox,但是直接在此关键词下设置属性只包括这部分，其他的需要分别..
QComboBox相关的qss学习
weixin_51883798的博客
03-14 669
【代码】QComboBox相关的qss学习。
qss qcombobox_qss使用总结
weixin_39701288的博客
11-22 682
本文使用 Zhihu On VSCode 创作并发布>qss是什么qss的全称是 Qt Style Sheets. Qt样式表，用于美化Qt程序界面。语法和web美化的CSS很像，但是功能木有css 强大，只是能用，能满足美化的要求。>qss怎么用首先祭上官方参考文档 Qt Style Sheets Reference。有时间静心研读官方文档,就不用看我瞎BB了。有问题也是查官方文档，...
QT开发技巧之QComboBox通过qss设置item高度，增加间隔
07-05
QT开发技巧之QComboBox通过qss设置item高度，增加间隔，详情请看以下文章： https://blog.csdn.net/yxy244/article/details/131562969?spm=1001.2014.3001.5501
QSS美化之黑色皮肤最全
11-30
QSS美化之黑色皮肤最全
Qt之QSS文件使用.rar
09-23
5.保证无毒 1.简单,方便,实用 3.实例可以自行改用 1.如有非法,本人无法律责任！ 8.更多作品,查找标签“朱建强”7.... 4.如需联系我请看左边数字！1.如不知代表何物，那就放弃计算机吧！ 0....CSDN老板不让我上传联系方式。
普联路由器之QSS连接操作指南
10-02
出于更高无线网安全的考虑，路由器厂商推出了QSS功能，即快速安全设置，使用该功能可以快速建立与无线网卡之间的无线连接，本文将详细介绍此功能使用方法
解决Qt使用ComboBox控件无法setCurrentText，Qss文件无法进行代码美化
有问题或资源连接有缺失的可以私信公众号新潮看世界获取
10-27 1816
1、最近使用QCombobox的时候发现setCurrentText没有效果？2、QtCreator中Qss文件无法进行代码注释及代码颜色美化显示。
Qt QTableView中插入QCombbox、CheckBox控件
weixin_33811539的博客
03-26 861
转自：https://blog.csdn.net/GraceLand525/article/details/80590030核心代码：CustomTableItem.h #ifndef ITEMDELEGATE_H #define ITEMDELEGATE_H #include <QItemDelegate> #include <QStyledItemDelegate> ...
qss qcombobox设置文本居中
06-09
您可以使用QComboBox的QLineEdit子控件来设置文本的居中对齐。以下是一个示例代码： ```python comboBox = QComboBox() lineEdit = comboBox.lineEdit() lineEdit.setAlignment(Qt.AlignCenter) ``` 其中，`Qt.AlignCenter`表示将文本居中对齐。您可以根据需要将其替换为其他对齐方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值