QComboBox自定义样式(重载下拉框)综合用法

在这里插入图片描述
在这里插入图片描述
首先重载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类。

  • 30
    点赞
  • 130
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 39
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

离歌漠

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

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

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

打赏作者

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

抵扣说明:

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

余额充值