效果如下:
代码如下:
#include <QComboBox>
#include<QPropertyAnimation>
class CustomComboBox : public QComboBox
{
Q_OBJECT
public:
CustomComboBox(QWidget* parent = nullptr, int gap = 5);
~CustomComboBox()=default;
protected:
void showPopup() override;//重写showPopup()方法
void hidePopup() override;
private:
int m_gap = 5;//下拉列表和ComboBox的间距
QPropertyAnimation animation;
};
#include "CustomComboBox.h"
#include<QListView>
#include<QFile>
#include<QApplication>
#include<QDebug>
CustomComboBox::CustomComboBox(QWidget *parent, int gap):QComboBox(parent),m_gap(gap)
{
setAttribute(Qt::WA_StyledBackground);
this->setView(new QListView(this));
this->view()->window()->setWindowFlags(Qt::Popup
| Qt::FramelessWindowHint
| Qt::NoDropShadowWindowHint);
this->view()->window()->setAttribute(Qt::WA_TranslucentBackground);//下拉列表背景透明,就可以支持圆角
//读取qss,也可以把qss写在代码里
QString qss;
QFile file("./qss/styleCustomComboBox.qss");
if (file.open(QIODevice::Text|QIODevice::ReadOnly))
{
qss = file.readAll();
}
else
{
//LOG(ERROR) << file.errorString().toStdString();
qDebug()<<file.errorString();
}
setStyleSheet(qss);
//关闭掉自带的下拉动画,会有黑边出现,隐藏黑边
QApplication::setEffectEnabled(Qt::UI_AnimateCombo, false);
}
void CustomComboBox::showPopup()
{
//下拉框添加间隔
QComboBox::showPopup();
QWidget* popup = this->findChild<QFrame*>();//下拉列表其实在一个QFrame里面
if (popup != nullptr)
{
//增加动画
QPoint endPos(popup->pos().x(),popup->pos().y() + m_gap);
QPoint startPos=endPos-QPoint(0,m_gap+this->rect().height());
animation.setPropertyName("pos");
animation.setTargetObject(popup);
animation.setDuration(300);
animation.setEasingCurve(QEasingCurve::OutBounce);
animation.setStartValue(startPos);
animation.setEndValue(endPos);
animation.start();
}
}
void CustomComboBox::hidePopup()
{
QComboBox::hidePopup();
}
qss如下:
QComboBox {
font: normal normal 17px "Microsoft Yahei";
color: #cccdce;
background-color: #121417;
padding-left: 9px;
padding-right: 35px;
border: 1px solid #6e6f73;
border-radius: 3px;
}
QComboBox:hover,
QComboBox:focus,
QComboBox:on {
border-color: #ec1212;
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: bottom right;
right: 5px;
bottom: 5px;
width: 15px;
height: 15px;
background-color: transparent;
border: none;
border-image: url(./image/whiteTriangle.png);/*右下角的图标,可替换*/
}
QComboBox::drop-down:hover,
QComboBox::drop-down:focus,
QComboBox::drop-down:on {
border-image: url(./image/redTriangle.png);/*右下角的图标,可替换*/
}
QComboBox QAbstractItemView {
font: normal normal 17px "Microsoft Yahei";
border: 1px solid #444445;
background-color: #2e3136;
border-radius: 3px;/*下拉列表圆角*/
padding: 8px 4px;
outline: none;
}
/*需要QComboBox重新设置下拉视图才会生效setView(new QListView(this))*/
QComboBox QAbstractItemView::item {
border: none;
background-color:#2e3136;
color: #cccdce;
height: 40px;
padding-left: 5px;
}
QComboBox QAbstractItemView::item:hover {
background-color: #d23337;
}
QComboBox QAbstractItemView::item:selected {
background-color: #d23337;
color: #ffffff;
}
/*下拉列表滚动条的样式*/
QAbstractItemView QScrollBar:vertical {
border: none;
background-color: transparent;
width: 10px;
}
QAbstractItemView QScrollBar::handle:vertical {
border: 1px solid #67696e;
background: #53565d;
border-radius: 3px;
min-height: 20px;
}
QAbstractItemView QScrollBar::sub-line {
background-color: transparent;
border: none;
}
QAbstractItemView QScrollBar::add-line {
background-color: transparent;
border: none;
}
QAbstractItemView QScrollBar::sub-page{
background-color: transparent;
}
QAbstractItemView QScrollBar::add-page{
background-color: transparent;
}
QAbstractItemView QScrollBar::up-arrow {
background-color: transparent;
}
QAbstractItemView QScrollBar::down-arrow{
background-color: transparent;
}
QAbstractItemView QScrollBar:horizontal {
border: none;
background-color: transparent;
height: 10px;
}
QAbstractItemView QScrollBar::handle:horizontal {
border: 1px solid #67696e;
background: #53565d;
border-radius: 3px;
min-width: 20px;
}