Qt 下拉复选框（MultiSelectComboBox）(二) 样式表设置

---

本系列目录

Qt 下拉复选框（MultiSelectComboBox）(一) 实现下拉框多选，搜索下拉框内容
Qt 下拉复选框（MultiSelectComboBox）(二) 样式表设置
Qt 下拉复选框（MultiSelectComboBox）(三) 不能输入中文等问题修复

---

前言

  上篇文章实现了下拉复选框的基本功能，但是从观感上将并不美观，在了解QComboBox样式表中的基本属性后，从输入框，下拉按钮，下拉框，搜索框，滚动条这五个方向对齐进行美化，对比效果如下：

---

参考博客地址： https://blog.csdn.net/qq_36651243/article/details/100765496
以下是本篇文章正文内容，主要实现样式美化，下面案例可供参考

一、Visual Studio下QT项目如何添加资源文件

• 图片资源，css样式表等内容需要放在项目的Resources文件夹下。

• 编辑qrc文件，添加相应的资源到qrc文件下。

• 资源的取用，可以使用图示地址当作路径来获取相应资源。

• 资源每次更新后（样式表文件修改，图片更新），都需要重新编译qrc文件，生成解决方案并不会重新编译qrc文件！

二、样式设计

1.样式表的导入

代码如下（示例）：

    QApplication a(argc, argv);
	QString qss_file = ":/PracticeOne/StyleSheet.css";
	QFile file(qss_file);
	if (file.open(QFile::ReadOnly))
	{
		QString styleSheet = QString::fromLatin1(file.readAll());
		a.setStyleSheet(styleSheet);
	}

• 如果样式表中样式类型为该类对象都生效，则只需要设置 a.setStyleSheet(styleSheet) 即可，如果样式设有objectname则需要给相应对象设置 ** button->setObjectName(“button_style”)**。

2.样式设计

  整体风格为半透明浅蓝色，QcomboBox主体设置圆角，下拉框设置弹出位置不再紧贴输入框，设置圆角，设置滚动条去除上下箭头，风格为灰黑色，具体代码及其详解见代码实现。

三、代码实现

样式表属性对应关系如图

代码如下（示例）：

/***********************************************************************/

/*********************************************MultiSelectComboBox主体样式*********************************************/
QComboBox#multiselect_combobox
{
    /*设置边框*/
    border:1px solid rgba(21,92,181,178);
    /*设置下拉框风格*/
    combobox-popup: 0;
     /*设置圆角*/
    border-radius:20px;
    /*背景色*/
    background:rgba(69,167,251,25);
}
/*悬浮态*/
QComboBox#multiselect_combobox:hover
{
    border:1px solid rgba(36,118,222,178);
    border-radius:20px;
    background:rgba(69,167,251,25);
}

/*********************************************MultiSelectComboBox下拉框按钮样式*********************************************/
QComboBox#multiselect_combobox::drop-down
{
    color:rgb(255,255,255);
    width:20px;
    border-top-right-radius:16px;
    border-bottom-right-radius:16px;
    /*设置透明色*/
    background-color:transparent;
}
/*按钮图标：选中态*/
QComboBox#multiselect_combobox::down-arrow:on
{
	width:14px;
	height:14px;
	border-image: url(:/PracticeOne/Resources/arrow_up.png);
}
/*按钮图标：常态*/
QComboBox#multiselect_combobox::down-arrow
{
	width:14px;
	height:14px;
	border-image: url(:/PracticeOne/Resources/arrow_down.png);
}

/*********************************************MultiSelectComboBox输入框样式*********************************************/
QLineEdit#multiselect_lineedit
{
    padding-left:10px;
    border-top-left-radius:19px;
    border-bottom-left-radius:19px;
    background:rgba(69,167,251,25);
}

/*********************************************MultiSelectComboBox搜索框样式*********************************************/
QLineEdit#multiselect_lineedit_qu
{
    padding-right:10px;
    background:rgba(69,167,251,25);
}

/*********************************************MultiSelectComboBox下拉框样式*********************************************/
QComboBox#multiselect_combobox QAbstractItemView
{
    /*设置选中没有虚线*/
    outline:0px solid gray;
    border:1px solid rgb(19,69,150);
    background-color:rgba(69,167,251,25);
    border-radius: 20px;
	padding:5px;
}
/*单项常态*/
QComboBox#multiselect_combobox QAbstractItemView::item
{
    padding-left:10px;
    padding-right:10px;
    height:30px;
    background-color:rgba(69,167,251,25);
}
/*单项选中态*/
QComboBox#multiselect_combobox QAbstractItemView::item:selected
{
    color:rgb(255,255,255);
    background-color:rgb(13,56,123,25);
}

/*********************************************MultiSelectComboBox滚动条样式*********************************************/
 QComboBox#multiselect_combobox QAbstractScrollArea QScrollBar:vertical
{
    width: 6px;
    height: 100px;
    border-radius: 3px;   
    background-color: transparent;  
 }
/*滑块常态*/
QComboBox#multiselect_combobox QAbstractScrollArea QScrollBar::handle:vertical 
{
    border-radius: 3px;   
    background: rgba(0,0,0,0.1);
}
/*滑块鼠标悬浮态*/
QComboBox#multiselect_combobox QAbstractScrollArea QScrollBar::handle:vertical:hover 
{
    background: rgb(90, 91, 93);
}
/*滚动条上箭头*/
QComboBox#multiselect_combobox QScrollBar::add-line::vertical
{
    /*设置没有上箭头*/
    border:none
}
/*滚动条下箭头*/
 QComboBox#multiselect_combobox QScrollBar::sub-line::vertical
 { 
    border:none;
 }

四、遇到问题

1.下拉框样式不生效

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

代码如下（示例）：

this->setView(list_widget_);

2.下拉框透明色不生效，设置圆角后圆角处有阴影

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

    this->view()->window()->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
	this->view()->window()->setAttribute(Qt::WA_TranslucentBackground,true);

3.下拉框弹出显示阴影

代码如下（示例）：

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

---

总结

这次优化大体将QcomboBox的样式表属性都使用了一遍，解决了下拉框存在的一些问题，后续样式有新的需求也只需要在此基础上进行修改即可。

如果此文帮助到你( •̀ ω •́ )✧，动动小手点个赞可好O(∩_∩)O。

原创文章，转载请标明本文出处。