自定义QComboBox,下拉列表增加间距,增加弹出动画,支持圆角

效果如下:

代码如下:

#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;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值