文章目录
本系列目录
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。
原创文章,转载请标明本文出处。