当前位置：网站首页>QComboBox下拉菜单中有分隔符Separator时的样式设置

QComboBox下拉菜单中有分隔符Separator时的样式设置

2022-06-25 22:00:00 【北极熊的奋斗史】

QComboBox下拉菜单中有分隔符Separator时的样式设置

先上效果图

没用样式的效果，巨丑
在这里插入图片描述
用了样式的效果，是不是你想要的呢？

网上基本搜不到下拉框的下拉列表中，有分隔符的样式设置，所以我从源代码出发，最终实现了这个效果，如果感到不错，可以给我打赏哦！！！

上代码

测试数据代码

	QHBoxLayout* lay = new QHBoxLayout(this);
		
	// 创建测试用的下拉框对象
	QComboBox* cbo = new QComboBox(this);
	lay->addWidget(cbo, 0, Qt::AlignTop | Qt::AlignHCenter);
	
	// 添加测试用的数据
	cbo->addItem("the 1st data");
	cbo->insertSeparator(1);			// 添加的分割符
	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");

样式代码

// 先给整体窗口添加一个背景颜色
	this->setStyleSheet(QString("QWidget#%1{background-color: #0b1127}").arg(this->objectName()));

	// 开始设置下拉框的样式
	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());	// 修改下拉框的最小大小
	// 下面这句可以让下拉菜单应用上样式表的样式
// cbo->setItemDelegate(new QStyledItemDelegate()); // 但是这个样式代理类不能让分隔符变得好看，需要自己继承他自定义分隔符的样式
	cbo->setItemDelegate(new MStyledItemDelegate());		// 当有分割符时，使用这个自定义的样式代理
	// 下面两句可以设置下拉菜单背景透明
	cbo->view()->parentWidget()->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint);
	cbo->view()->parentWidget()->setAttribute(Qt::WA_TranslucentBackground);

重点来了
自定义的样式样式代理类

MStyledItemDelegate::MStyledItemDelegate(QObject *parent /*= 0*/) : QStyledItemDelegate(parent)
{
    
	// 给分隔符设置默认颜色
	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;		// 自定义分隔符高度为1px
		return QSize(pm, pm);
	}
	return QStyledItemDelegate::sizeHint(option, index);
}

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