QComboBox样式

2023 年 03 月 27 日

598 次浏览

3280字数

设置ComboBox的样式

//设置ComboBox的边框、边框圆角和文字距离左侧边框的内边距
QComboBox{border:1px solid #F0F1F2;border-radius: 8px;padding-left: 12px;}
//设置ComboBox箭头的样式，可以通过设置background颜色来查看drop-arrow在drop-down的什么位置
QComboBox::down-arrow{
    border: 0px;
    image: url(:/images/downArrow.png);
    width: 12px;
    height: 8px;
}
//设置ComboBox右侧下拉按钮的样式，可以通过设置background颜色来查看drop-down的大小和位置
QComboBox::drop-down{ border:none; background:transparent; padding-right:10px;}
//以下不是对在界面上固定显示的ComboBox的样式设置
//QComboBox QAbstractItemView{outline:0px;background:transparent;margin-top:10px;}
//QComboBox QAbstractItemView::item{height: 36px;}
//QComboBox QAbstractItemView::item:hover{background-color:#F0F5FF;}

这里给一个下拉箭头的图片：

padding和margin对down-arrow和drop-down的影响

看下修改前的效果：

QComboBox{border:1px solid black;background:purple;border-radius: 8px;padding-left: 12px;}
QComboBox::down-arrow{
    border: 0px;
    width:  12px;
    height: 12px;
    image: url(:/downArrow.png);
    background:#00FFFF;
    <!--down-arrow的宽度就是width:12px-->
}
<!--drop-down的宽度就是width:24px-->
QComboBox::drop-down{ width:24px;border-radius:8px;border:none; background:#FF0000; margin-right:4px;}

修改前的图片效果：

看下修改后的效果：

QComboBox{border:1px solid black;background:purple;border-radius: 8px;padding-left: 12px;}
QComboBox::down-arrow{
    border: 0px;
    width:  12px;
    height: 12px;
    image: url(:/downArrow.png);
    background:#00FFFF;
    <!--在down-arrow中设置了padding-right，可以看到down-arrow内部的图片的右侧会多出一片10px空白，down-arrow的实际宽度为(width) + (padding-right) = 22px-->
    padding-right:10px;
}
<!--红色矩形的实际宽度为(width) + (padding-right) = 28px-->
QComboBox::drop-down{ width:24px;border-radius:8px;border:none; background:#FF0000; padding-right:4px;margin-right:4px;}

修改后的图片效果：

通过ListView设置下拉框的样式

//设置下拉框的背景色、边距、圆角以及其中的item的样式
QString str ="QComboBox QAbstractItemView{margin-top:10px;margin-left:2px;margin-right:2px;margin-bottom:10px;padding:10px 0px;background:#FFFFFF;border-radius:8px;outline:0px;}"
    "QComboBox QAbstractItemView::item{color:black;height:36px;background: #FFFFFF;font-family: PingFangSC-Regular;font-size:12px;padding-left:10px;min-height:24px;min-width:20px;}"
    "QComboBox QAbstractItemView::item:hover{color:#00FFFF;background-color:#F0F5FF;}";
QListView *listView = new QListView();
ui->myComboBox->setView(listView);
ui->myComboBox->setStyleSheet(str);

设置下拉框的阴影

#include <QGraphicsDropShadowEffect>
QAbstractItemView *view = ui->myComboBox->view();
//创建阴影效果
QGraphicsDropShadowEffect *shadowEffect = new QGraphicsDropShadowEffect;
shadowEffect->setBlurRadius(10);
shadowEffect->setColor(QColor(149, 179, 230, 178));
shadowEffect->setOffset(0, 0);
//设置阴影效果
view->setGraphicsEffect(shadowEffect);
ui->myComboBox->view()->window()->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
ui->myComboBox->view()->window()->setAttribute(Qt::WA_TranslucentBackground);

取消下拉框的弹出动画

在给ComboBox的ListView设置无边框窗口后，弹出下拉框的动画会有黑色的背景，添加下面的语句来取消弹出动画。

qApp->setEffectEnabled(Qt::UI_AnimateCombo, false);

信号/槽的连接

connect(ui->myComboBox, SIGNAL(currentIndexChanged(int)), this, SLOT(handleIndexChanged(int)));
void MyWidget::handleIndexChanged(int index)
{
    qDebug() << "current index：" << index;
}