当前位置：网站首页>Style setting when there is a separator in the qcombobox drop-down menu

Style setting when there is a separator in the qcombobox drop-down menu

2022-06-25 23:36:00 【The struggle history of polar bear】

QComboBox There is a separator in the drop-down menu Separator Style settings when

First on the renderings

The effect of using no style , Ugly
Insert picture description here
With the effect of style , Is it what you want ？

You can't find the drop-down list in the drop-down box on the Internet , Style settings with delimiters , So I start from the source code , Finally, this effect is achieved , If you feel good , You can give me a reward ！！！

Code up

Test data code

	QHBoxLayout* lay = new QHBoxLayout(this);
		
	//  Create a drop-down box object for testing 
	QComboBox* cbo = new QComboBox(this);
	lay->addWidget(cbo, 0, Qt::AlignTop | Qt::AlignHCenter);
	
	//  Add test data 
	cbo->addItem("the 1st data");
	cbo->insertSeparator(1);			//  Added delimiter 
	cbo->addItem("the 2nd data");
	cbo->addItem("the 3rd data");
	cbo->insertSeparator(3);
	cbo->addItem("the 4th data");
	cbo->addItem("the 5th data");
	cbo->addItem("the 6th data");
	cbo->insertSeparator(6);
	cbo->addItem("the 7th data");
	cbo->addItem("the 8th data");
	cbo->addItem("the 9th data");
	cbo->addItem("the 10th data");
	cbo->insertSeparator(10);
	cbo->addItem("the 11th data");
	cbo->addItem("the 12th data");
	cbo->addItem("the 13th data");
	cbo->addItem("the 14th data");

Style code

//  First add a background color to the whole window 
	this->setStyleSheet(QString("QWidget#%1{background-color: #0b1127}").arg(this->objectName()));

	//  Start setting the style of the drop-down box 
	QString strStyle(
		"QComboBox{ border-image:url(:/image/comboBox.png); font-family: \"Noto Sans S Chinese\"; font-size:16px; color: #ffffff; padding-left: 16px;}"
		"QComboBox::drop-down{ background: transparent; } "
		"QComboBox QFrame{border-image: url(:/image/cboDropFrame.png);}"
		"QComboBox QAbstractItemView{ padding-left: 8px; outline:0px; color: #ffffff; font-size:14px; font-family: \"Noto Sans S Chinese\"; } "
		"QComboBox QAbstractItemView::item { height: 16px; margin-top: 8px; margin-bottom:8px; } "
		"QComboBox QAbstractItemView::item:selected, QAbstractItemView::item:hover { background-color: rgba(0, 188, 212, 0.4); } "
		"QScrollBar::vertical{ background:transparent; margin: 0px 0px 0px 0px; width: 6px; }"
		"QScrollBar::handle:vertical{ background-color:#00BCD4; border-radius:3px; }"
		"QScrollBar::add-line:vertical{ height: 0px; }"
		"QScrollBar::sub-line:vertical{ height: 0px; }"
		"QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical{background: transparent;}"
		);
	cbo->setStyleSheet(strStyle);
	cbo->setMinimumSize(QPixmap(":/image/comboBox.png").size());	//  Modify the minimum size of the drop-down box 
	//  The following sentence can make the drop-down menu apply the style of the style sheet 
// cbo->setItemDelegate(new QStyledItemDelegate()); //  But this style proxy class doesn't make separators look good , You need to inherit the style of his custom separator 
	cbo->setItemDelegate(new MStyledItemDelegate());		//  When there is a delimiter , Use this custom style proxy 
	//  The following two sentences can set the transparent background of the drop-down menu 
	cbo->view()->parentWidget()->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint);
	cbo->view()->parentWidget()->setAttribute(Qt::WA_TranslucentBackground);

The key is coming.
Custom style proxy class

MStyledItemDelegate::MStyledItemDelegate(QObject *parent /*= 0*/) : QStyledItemDelegate(parent)
{
    
	//  Set the default color for the separator 
	clrSeparator = QColor("#00BCD4");
}

void MStyledItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    
	if (isSeparator(index)) {
    
		QRect rect = option.rect;
		if (const QAbstractItemView *view = qobject_cast<const QAbstractItemView*>(option.widget))
			rect.setWidth(view->viewport()->width());
		QStyleOption opt;
		opt.rect = rect;
		QPoint pt1(rect.left(), rect.top() + rect.height() / 2);
		QPoint pt2(rect.right(), pt1.y());
		painter->save();
		painter->setPen(clrSeparator);
		painter->drawLine(pt1, pt2);
		painter->restore();
	}
	else {
    
		QStyledItemDelegate::paint(painter, option, index);
	}
}

QSize MStyledItemDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    
	if (isSeparator(index)) {
    
		int pm = 1;		//  The height of the custom separator is 1px
		return QSize(pm, pm);
	}
	return QStyledItemDelegate::sizeHint(option, index);
}

bool MStyledItemDelegate::isSeparator(const QModelIndex &index)
{
    
	return index.data(Qt::AccessibleDescriptionRole).toString() == QLatin1String("separator");
}