在这里插入图片描述
在这里插入图片描述
首先重载QComboBox,因为想保持下拉框与QComboBox控件间隔,就需要重载QComboBox的showPopup。

void vComboBox::showPopup()
{
	emit sigPopup();
	QComboBox::showPopup();
	QWidget *popup = this->findChild<QFrame*>();
	popup->move(popup->x(), popup->y() + 4);
}

接下来设置QComboBox qss样式。

//QComboBox本身样式
#comboBox
{
	font-family: 微软雅黑;
	font-size: 12px;
	color:#0078FF;
	border-color:#C8C8C8;
	border-style:solid;
	border-width: 0.5 0.5 0.5 0.5;
	border-radius: 14px;
	padding-left: 12px;
} 

//QComboBox下拉按钮
#comboBox::drop-down
{
	margin-right: 10px;
	border: none; 
}

#comboBox::down-arrow
{
	width:16px;
	height:16px;
	border-image:url(:/ToolTip/qrc/ic_gengduo.png);
}

//QComboBox下拉框样式
#comboBox QAbstractItemView
{
	font-family: 微软雅黑;
	font-size: 12px;
	border:1px solid rgba(0,0,0,10%);
	border-radius: 14px;
	padding:5px;
	background-color: #FFFFFF;
}

#comboBox QAbstractItemView::item
{
	height: 36px;
}

//QComboBox下拉框选中样式
#comboBox QAbstractItemView::item:selected
{
	background:rgba(0,0,0,3%);
	color:#000000;
}

设置QComboBox样式后,所有关于下拉框样式生效需要QComboBox重新设置下拉框控件类。

QListView *ListView = new QListView;
ui.comboBox->setView(ListView);

设置下拉框滑动条样式。

QFile file("scrollbar.qss");
if (true == file.open(QIODevice::ReadOnly))
{
	QString strStyle = file.readAll();
	ListView->verticalScrollBar()->setStyleSheet(strStyle);
}
ListView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);

设置下拉框当前页显示item个数。

ui.comboBox->setMaxVisibleItems(4);

设置QComboBox可编辑。

ui.comboBox->setEditable(true);

设置QComboBox与其下拉框文本居中。

QLineEdit *lineEdit = new QLineEdit;
lineEdit->setAlignment(Qt::AlignCenter);
ui.comboBox->setLineEdit(lineEdit);

ui.comboBox->lineEdit()->setAlignment(Qt::AlignCenter);
for (int i = 0; i < ui.comboBox->count(); ++i) {
	ui.comboBox->setItemData(i, Qt::AlignCenter, Qt::TextAlignmentRole);
}

下拉框设置圆角样式后,边角会存在阴影问题,这是Popup问题导致的,解决办法可以通过解决Popup来解决,也可以通过设置QComboBox本身属性。

ui.comboBox->view()->window()->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
ui.comboBox->view()->window()->setAttribute(Qt::WA_TranslucentBackground);

最后关于选中某个item需要设置某种样式可以通过信号与槽解决。

currentIndexChanged
currentTextChanged

QComboBox设置editable出现QLineEdit无法圆角问题
在这里插入图片描述
设置左右padding即可

QComboBox{
	padding-left:24px;
	padding-right:24px;
}

在这里插入图片描述
修改按钮显示方位(top,bottom,left,right,center)
默认center

QComboBox::drop-down{
	subcontrol-origin: padding; 
	subcontrol-position: right;
}

修改按钮点击位置(top,bottom,left,right)

QComboBox::drop-down{
	right: 24px;
}

QComboBox按钮点击(出下拉框)按钮样式变换

QComboBox::down-arrow:on
{
	width:12px;
	height:12px;
	border-image: url(:/Login/qrc/universal/ico_sl.png);
}

QComboBox::down-arrow
{
	width:12px;
	height:12px;
	border-image: url(:/Login/qrc/universal/ico_xia.png);
}

效果图如下:
在这里插入图片描述
关于阴影问题

设置圆角的QCOmboBox下拉框在点击出现的那一瞬间会出现阴影,可以通过取消UI动画来解决该问题
QApplication::setEffectEnabled(Qt::UIEffect effect, bool enable = true)

QApplication::setEffectEnabled(Qt::UI_AnimateCombo, false);

此方法会禁止QCOmboBox下拉动作,如果想不禁用也取消下拉出现的阴影,就需要修改动画的圆角,可以通过QGraphicsDropShadowEffect实现

关于QCOmboBox下拉框item新增图片以及各种按钮控件

大体思路就是自己封装一个QListWidget,利用QListWidget的model/view机制,封装一个窗口类,在该窗口类中新增图片按钮等控件,然后把该窗口当成item项,添加到前面封装的QListWidget类中,中间用到了QListWidgetItem类。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐