Qt自定义一个下拉框（使用基础组件组合）

快来打我* 2023-02-23 15:27 12阅读 0赞

# 0.前言 #

Qt提供了一个QComboBox下拉框组件，但是对于一些自定义样式的需求实现起来并不方便，很多东西还得去倒腾源码，还不如直接用基础的组件自己来实现一个下拉框。不过，自己组合的组件对样式表的支持不是很好，而且水平不够通用性差，所以我只在一些定制化程度高的需求才使用这种方式。

# 1.实现思路与问题 #

首先是下拉框的文本框和按钮，我使用QLineEdit+QPushButton；然后弹出框我分为两部分，一是弹出框Widget容器，二是弹出框中的内容为了后续的自定义抽象了一个简单的基类，使用的时候继承基类实现自己的弹出框样式即可。剩下的就是模拟一些QComboBox的接口和效果了。

![20200707232101256.gif][]

遇到的问题一，弹出框QWidget子类设置为Popup后，没法设置背景半透明。后来发现可以给要展示的Widget的parent或者更上层的parent设置透明属性，这样展示的Widget就可以半透明了。

//背景透明FramelessWindowHint+WA_TranslucentBackground
    //这样才能给上面的组件设置透明色
    setWindowFlags(Qt::Popup|Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground);

遇到的问题二， 弹出后点击标题栏拖动弹框不会消失。开始我以为是焦点的问题，但是设置后也没效果。后来发现因为我弹出动画高度是从0开始，设置成从1开始就没问题了。

resize(width,1);
    animation->setStartValue(QSize(width,1));

待实现的需求一：样式表的设置如何反应到布局中，增加自定义属性在QSS种设置值么。

待实现的需求二：弹出框的方向目前直接往下的，应该判断下位置来决定向上还是向下。

# 2.实现代码 #

完整代码链接（RBasicComboBox类）：[https://github.com/gongjianbo/RectangleComponent][https_github.com_gongjianbo_RectangleComponent]

部分实现（因为有好几个组成部分，所以只贴了主体类）：

#ifndef RBASICCOMBOBOX_H
    #define RBASICCOMBOBOX_H
    
    #include <QWidget>
    #include <QLineEdit>
    #include <QPushButton>
    #include <QHBoxLayout>
    #include <QTimer>
    
    #include "RBasicComboPopup.h"
    
    /**
     * @brief 使用QLineEdit+QPushButton+弹出框组合的下拉框
     * @author 龚建波
     * @date 2020-7-6
     * @history
     * [2020-7-7]
     * 重构弹出框部分，增加可扩展性
     * 基础组件：Box+Popup，继承Container实现接口后设置给Popup
     */
    class RBasicComboBox : public QWidget
    {
        Q_OBJECT
    public:
        explicit RBasicComboBox(QWidget *parent = nullptr);
        ~RBasicComboBox();
    
        //当前行
        int getCurrentIndex() const;
        void setCurrentIndex(int index);
        //当前文本
        QString getCurrentText() const;
        void setCurrentText(const QString text);
        //数据项
        QList<QString> getItems() const;
        void setItems(const QList<QString> &items);
        //弹出框
        RBasicComboPopup *getPopup() const;
    
    protected:
        //过滤组件事件
        bool eventFilter(QObject *watched, QEvent *event) override;
    
    private:
        //初始化组件设置
        void initComponent();
        //popup-container
        void initContainer();
        //默认样式设置
        void initStyleSheet();
        //编辑后查询对应行并设置model
        void checkTextRow();
    
    signals:
        void currentIndexChanged(int index);
        void currentTextChanged(const QString text);
    
    private:
        //可以使用前置声明，然后把new放到初始化列表去
        //文本框
        QLineEdit *boxEdit=new QLineEdit(this);
        //按钮
        QPushButton *boxButton=new QPushButton(this);
        //布局
        QHBoxLayout *boxLayout=new QHBoxLayout(this);
        //弹框
        RBasicComboPopup *boxPop=new RBasicComboPopup(this);
        //定时器
        QTimer *editTimer=new QTimer(this);
    };
    
    #endif // RBASICCOMBOBOX_H

#include "RBasicComboBox.h"
    
    #include <QDesktopWidget>
    #include <QKeyEvent>
    #include <QFocusEvent>
    #include <QMouseEvent>
    
    #include <QDebug>
    
    RBasicComboBox::RBasicComboBox(QWidget *parent)
        : QWidget(parent)
    {
        setAttribute(Qt::WA_StyledBackground); //支持样式表
        setSizePolicy(QSizePolicy::Preferred,QSizePolicy::Fixed);
    
        initComponent();
        initStyleSheet();
    }
    
    RBasicComboBox::~RBasicComboBox()
    {
        boxPop->hidePopup();
    }
    
    int RBasicComboBox::getCurrentIndex() const
    {
        if(boxPop->getContainer()){
            return boxPop->getContainer()->getCurrentIndex();
        }
        return -1;
    }
    
    void RBasicComboBox::setCurrentIndex(int index)
    {
        if(boxPop->getContainer()){
            boxPop->getContainer()->setCurrentIndex(index);
        }
    }
    
    QString RBasicComboBox::getCurrentText() const
    {
        return boxEdit->text();
    }
    
    void RBasicComboBox::setCurrentText(const QString text)
    {
        editTimer->stop();
        boxEdit->setText(text);
    }
    
    QList<QString> RBasicComboBox::getItems() const
    {
        if(boxPop->getContainer()){
            return boxPop->getContainer()->getItems();
        }
        return QList<QString>();
    }
    
    void RBasicComboBox::setItems(const QList<QString> &items)
    {
        if(boxPop->getContainer()){
            boxPop->getContainer()->setItems(items);
        }
    }
    
    RBasicComboPopup *RBasicComboBox::getPopup() const
    {
        return boxPop;
    }
    
    bool RBasicComboBox::eventFilter(QObject *watched, QEvent *event)
    {
        if(watched==boxEdit){
            //过滤编辑框事件
            switch (event->type()) {
            case QEvent::KeyRelease:
            {
                if(boxPop->getContainer()){
                    //这里只考虑了edit可编辑的情况
                    QKeyEvent *key_event=static_cast<QKeyEvent*>(event);
                    if(key_event->key()==Qt::Key_Up){
                        setCurrentText(boxPop->getContainer()->getPrevText());
                    }else if(key_event->key()==Qt::Key_Down){
                        setCurrentText(boxPop->getContainer()->getNextText());
                    }
                }
            }
                break;
            case QEvent::FocusAboutToChange:
            case QEvent::FocusIn:
            {
                //获得焦点时全选
                QFocusEvent *focus_event=static_cast<QFocusEvent*>(event);
                if(focus_event->gotFocus()){
                    QTimer::singleShot(20,boxEdit,&QLineEdit::selectAll);
                }
            }
                break;
            default:
                break;
            }
        }else if(watched==boxButton){
            //过频按钮事件
        }else if(watched==boxPop){
            //过滤弹框事件
            if(event->type()==QEvent::Show){
                boxButton->setChecked(true);
            }else if(event->type()==QEvent::Hide){
                boxButton->setChecked(false);
            }
        }
        return false;
    }
    
    void RBasicComboBox::initComponent()
    {
        //按钮设置
        boxButton->setObjectName("button");
        boxButton->setFixedWidth(20);
        boxButton->setCheckable(true); //用选中来表示弹框弹出
        boxButton->setFocusPolicy(Qt::NoFocus);
        boxButton->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
        boxButton->installEventFilter(this);
    
        //编辑框设置
        boxEdit->setObjectName("edit");
        boxEdit->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
        boxEdit->installEventFilter(this);
        //index和text两个属性可以看成独立的
        connect(boxEdit,&QLineEdit::textChanged,this,&RBasicComboBox::currentTextChanged);
        //编辑时，延迟一会儿进行查询-currentindex
        connect(boxEdit,&QLineEdit::textEdited,[this]{
            editTimer->start(300);
        });
        //编辑结束，进行查询-currentindex
        connect(boxEdit,&QLineEdit::editingFinished,this,&RBasicComboBox::checkTextRow);
        editTimer->setSingleShot(true);
        connect(editTimer,&QTimer::timeout,this,&RBasicComboBox::checkTextRow);
    
        //弹框容器设置
        boxPop->attachTarget(this);
        boxPop->installEventFilter(this);
        initContainer();
        connect(boxPop,&RBasicComboPopup::containerChanged,this,&RBasicComboBox::initContainer);
    
        //布局
        boxLayout->setMargin(1);
        boxLayout->setSpacing(1);
        boxLayout->addWidget(boxEdit);
        boxLayout->addWidget(boxButton);
        //点击按钮，弹出
        //这里有个问题，已经弹出时，点击别的地方会隐藏，
        //然后我事件过滤又把按钮设置成了非选中，所以点击按钮只会触发弹出
        connect(boxButton,&QPushButton::toggled,[this](bool checked){
            if(checked){
                boxPop->showPopup();
            }else{
                boxPop->hidePopup();
            }
        });
    }
    
    void RBasicComboBox::initContainer()
    {
        if(!boxPop->getContainer())
            return;
    
        connect(boxPop->getContainer(),&RBasicComboContainer::currentIndexChanged,this,&RBasicComboBox::currentIndexChanged);
        connect(boxPop->getContainer(),&RBasicComboContainer::updateData,[this]{
            setCurrentText(boxPop->getContainer()->getCurrentText());
        });
    }
    
    void RBasicComboBox::initStyleSheet()
    {
        setStyleSheet(R"(
                      RBasicComboBox{
                      color:black;
                      background: rgb(160,160,160);
                      }
                      RBasicComboBox:disable{
                      color:rgb(160,160,160);
                      background: rgb(160,160,160);
                      }
                      RBasicComboBox:hover{
                      background: rgb(0,120,215);
                      }
                      RBasicComboBox #edit{
                      border:0;
                      margin:0;
                      padding:0px 3px;
                      color:black;
                      background:white;
                      }
                      RBasicComboBox #button{
                      border:5px solid white;
                      padding:0;
                      margin:0;
                      min-width:12px;
                      max-width:12px;
                      background-color: rgb(200,200,200);
                      }
                      RBasicComboBox #button:hover,
                      RBasicComboBox #button:checked{
                      background-color: rgb(180,215,243);
                      }
                      RBasicComboContainer{
                      background: transparent;
                      border:1px solid rgb(0,120,215);
                      }
                      RBasicComboView{
                      background:white;
                      border:0;
                      font:13px "宋体";
                      }
                      RBasicComboView::item{
                      height:20px;
                      color:black;
                      background:white;
                      }
                      RBasicComboView::item:selected,
                      RBasicComboView::item:hover{
                      color:white;
                      background:rgb(0,120,215);
                      }
                      )");
    }
    
    void RBasicComboBox::checkTextRow()
    {
        //如果model中有匹配的文本，就修改view的currentIndex
        if(boxPop->getContainer()){
            if(boxPop->getContainer()->checkTextRow(boxEdit->text())>=0){
                setCurrentText(boxPop->getContainer()->getCurrentText());
            }
        }
    }

[20200707232101256.gif]: https://img-blog.csdnimg.cn/20200707232101256.gif
[https_github.com_gongjianbo_RectangleComponent]: https://github.com/gongjianbo/RectangleComponent