QComboBox自定义样式(重载下拉框)综合用法
首先重载QComboBox,因为想保持下拉框与QComboBox控件间隔,就需要重载QComboBox的showPopup。void vComboBox::showPopup(){emit sigPopup();QComboBox::showPopup();QWidget *popup = this->findChild<QFrame*>();popup-...
首先重载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类。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)