QComboBox下拉框给选项增加删除按钮

阳光穿透心脏的1/2处 2023-02-15 10:05 9阅读 0赞

# 0.前言 #

给下拉框增加按钮是常见的功能，如 QQ 账号输入框的下拉：

![20200604214605685.png][]

网上有不少 Qt 实现的例子，实现方式也很多，在参照了别人的思路后我也实现了选项带按钮的下拉框。中间遇到不少坑，最后效果也不完美。

# 1.实现过程 #

我选的是 QListWidget + QListWidgetItem 的方式，因为感觉相对简单点，而且和样式表更好搭配。这种方式主要是把 QListWidget作为 QComboBox 的 View ，List 的 model 也设置为 QComboBox 的 model，这样展现出来的选项就是一个 QListWidgetItem，我们只需要把按钮设置到 QListWidgetItem 的 widget 中就行了。

这里面还有个问题是， 要让 QComboBox 读取到对应项的文本，还要给 QListWidgetItem 加一句这个：

QListWidgetItem* item_widget = new QListWidgetItem();
    //设置显示的data，这样combox才有文字
    item_widget->setData(Qt::DisplayRole,"text");

然后来看一下比较简单的实现：

QListWidget *item_list=new QListWidget(this);
        ui->comboBoxA->setModel(item_list->model());
        ui->comboBoxA->setView(item_list);
    
        //添加选项
        for(int i=0;i<5;i++)
        {
            //组合一个带按钮的widget
            QWidget *item_widget=new QWidget();
            QHBoxLayout *layout=new QHBoxLayout(item_widget);
            layout->addStretch(); //弹簧
            QPushButton *btn=new QPushButton(item_widget);
            layout->addWidget(btn);
            layout->setMargin(0);
            layout->setSpacing(0);
    
            QListWidgetItem* item_wrap = new QListWidgetItem(item_list);
            //测试长文字
            QString text=(i==0)?"text long long long":"text";
            //设置显示的data，这样combox才有文字
            item_wrap->setData(Qt::DisplayRole,text);
            item_list->setItemWidget(item_wrap,item_widget);
    
            connect(btn,&QPushButton::clicked,this,[=](){
                ui->comboBoxA->hidePopup(); //没有刷新弹框大小
                item_list->takeItem(item_list->row(item_wrap));
                delete item_wrap;
            });
        }

很快就发现了问题，文字足够长时，选项整体宽度被拉长了，导致按钮位置超出了显示范围（下图蓝色框部分）：

![20200604220755319.png][]

（按钮位置我是配合样式表的 margin 调整的，可见源代码）

索性我就继承了 QListWidget，重写了他的 visualRect 接口，在有滚动条时，rect 就去掉滚动条的宽度：

QRect ComboView::visualRect(const QModelIndex &index) const
    {
        QRect rect=QListWidget::visualRect(index);
        int width=this->width();
        if(verticalScrollBar()->isVisible()){
            width-=verticalScrollBar()->width();
        }
        rect.setWidth(width);
        return rect;
    }

这下就能把选项挤过来了：

![20200604221039801.png][]

这里还有个滚动条占位得问题没解决，我的想法是显示或增删选项时去判断是否有滚动条，然后调整按钮的 margin。

# 2.完整代码 #

github 链接：[https://github.com/gongjianbo/MyTestCode/tree/master/Qt/MyComboBox][https_github.com_gongjianbo_MyTestCode_tree_master_Qt_MyComboBox]

主要实现（比较忙， demo 没怎么写注释）：

#ifndef MYCOMBOBOX_H
    #define MYCOMBOBOX_H
    
    #include <QComboBox>
    #include <QListView>
    #include <QListWidget>
    #include <QPushButton>
    #include <QLayout>
    #include <QStyledItemDelegate>
    
    class ComboView : public QListWidget
    {
        Q_OBJECT
    public:
        explicit ComboView(QWidget * parent=nullptr);
    
        QRect visualRect(const QModelIndex &index) const override;
    };
    
    class ComboItem : public QWidget
    {
        Q_OBJECT
    public:
        explicit ComboItem(const QString &text,QWidget *parent = nullptr);
        ~ComboItem();
        QString text() const;
    
    signals:
        void itemClicked(const QString &text);
    
    private:
        QString textValue;
        QPushButton *btn;
    };
    
    class MyComboBox : public QComboBox
    {
        Q_OBJECT
    public:
        explicit MyComboBox(QWidget *parent = nullptr);
    
        void setRemovableItems(const QStringList &items);
    
    signals:
        void itemRemoved(const QString &text);
    
    private:
        QListWidget *itemList;
    };
    
    #endif // MYCOMBOBOX_H

#include "MyComboBox.h"
    
    #include <QMouseEvent>
    #include <QLineEdit>
    #include <QStyleOptionViewItem>
    #include <QStyle>
    #include <QScrollBar>
    
    #include <QDebug>
    
    ComboView::ComboView(QWidget *parent)
        : QListWidget(parent)
    {
    
    }
    
    QRect ComboView::visualRect(const QModelIndex &index) const
    {
        QRect rect=QListWidget::visualRect(index);
        int width=this->width();
        if(verticalScrollBar()->isVisible()){
            width-=verticalScrollBar()->width();
        }
        rect.setWidth(width);
        return rect;
    }
    
    ComboItem::ComboItem(const QString &text, QWidget *parent)
        : QWidget(parent),
          textValue(text),
          btn(new QPushButton(this))
    {
        QHBoxLayout *layout=new QHBoxLayout(this);
        layout->addStretch();
        layout->addWidget(btn);
        layout->setMargin(0);
        layout->setSpacing(0);
    
        connect(btn,&QPushButton::clicked,[this]{
            emit itemClicked(textValue);
        });
    }
    
    ComboItem::~ComboItem()
    {
        qDebug()<<"~delete"<<textValue;
    }
    
    QString ComboItem::text() const
    {
        return textValue;
    }
    
    MyComboBox::MyComboBox(QWidget *parent)
        : QComboBox(parent),
          itemList(new ComboView(this))
    {
        //itemList->setTextElideMode(Qt::ElideNone);
        setModel(itemList->model());
        setView(itemList);
    }
    
    void MyComboBox::setRemovableItems(const QStringList &items)
    {
        //combox的additem insertitem不是虚函数
        //实现里时调用的model->insertRow，但是懒得再去重写listmodel-view，就新增一个接口
        itemList->clear();
        if(items.isEmpty())
            return;
    
        for(int i=0;i<items.count();i++)
        {
            QListWidgetItem* widget_item = new QListWidgetItem(itemList);
            ComboItem *item=new ComboItem(items.at(i),itemList);
            widget_item->setData(Qt::DisplayRole,items.at(i));
            //widget_item->setData(Qt::TextAlignmentRole,int(Qt::AlignRight|Qt::AlignVCenter));
            itemList->setItemWidget(widget_item,item);
    
            connect(item,&ComboItem::itemClicked,this,[this,item,widget_item](){
                //take移除item后没有刷新弹框大小，干脆隐藏掉先
                hidePopup();
    
                itemList->takeItem(itemList->row(widget_item));
                delete widget_item;
                emit itemRemoved(item->text());
            });
        }
    }

#include "mainwindow.h"
    #include "ui_mainwindow.h"
    
    #include "MyComboBox.h"
    
    #include <QListWidget>
    #include <QDebug>
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
    
        //【1】 ui上的QComboBox
        QListWidget *item_list=new QListWidget(this);
        ui->comboBoxA->setModel(item_list->model());
        ui->comboBoxA->setView(item_list);
    
        //添加选项
        for(int i=0;i<5;i++)
        {
            //组合一个带按钮的widget
            QWidget *item_widget=new QWidget();
            QHBoxLayout *layout=new QHBoxLayout(item_widget);
            layout->addStretch(); //弹簧
            QPushButton *btn=new QPushButton(item_widget);
            layout->addWidget(btn);
            layout->setMargin(0);
            layout->setSpacing(0);
    
            QListWidgetItem* item_wrap = new QListWidgetItem(item_list);
            //测试长文字
            QString text=(i==0)?"text long long long":"text";
            //设置显示的data，这样combox才有文字
            item_wrap->setData(Qt::DisplayRole,text);
            item_list->setItemWidget(item_wrap,item_widget);
    
            connect(btn,&QPushButton::clicked,this,[=](){
                ui->comboBoxA->hidePopup(); //没有刷新弹框大小
                item_list->takeItem(item_list->row(item_wrap));
                delete item_wrap;
            });
        }
    
    
        //【2】ui上的combobox提升为自定义子类
        QStringList str_list{
            "1234567891011+++++++++++++",
            "2234567891011",
            "323",
            "423",
            "523",
            "623",
            "723",
            "823",
            "123",
            "123",
            "123"
        };
        ui->comboBoxB->setRemovableItems(str_list);
        //ui->comboBoxB->setMaxVisibleItems(20);
    
        connect(ui->comboBoxB,&MyComboBox::itemRemoved,this,[=](const QString &text){
            qDebug()<<"item remove"<<text;
            //ui->comboBox_2->clear();
        });
    }

/*下拉框*/
    QComboBox{
    min-width:1px;
    min-height:26px;
    padding-left: 5px;
    padding-right: 2px;
    color: white;
    border:1px solid rgb(128, 128, 128);
    background-color:  rgb(100 ,100 ,100);
    }
    QComboBox:on{
    /*弹出为on*/
    }
    QComboBox:hover{
    border:1px solid rgb(255, 170, 0);
    }
    QComboBox:disabled{
    color: rgb(230, 230, 230);
    background-color:rgb(150, 150, 150);
    }
    QComboBox:editable{
    background-color:rgb(100, 100, 100);
    }
    QComboBox:editable:disabled{
    background-color:rgb(150, 150, 150);
    }
    /*下拉按钮-配合贴图*/
    QComboBox::drop-down{
    min-width:24px;
    }
    /*下拉框弹出项*/
    QComboBox QAbstractItemView{
    font: 15px "宋体";
    background-color:rgb(110, 110, 110);
    }
    QComboBox QAbstractItemView::item{
    height:24px;
    color:white;
    }
    QComboBox QAbstractItemView::item:hover{
    background-color: rgb(255, 170, 0);
    }
    QComboBox QAbstractItemView::item:selected{
    background-color: rgb(255, 170, 0);
    }
    /*按钮样式*/
    QComboBox QAbstractItemView QPushButton{
    max-width:20px;
    min-width:20px;
    max-height:20px;
    min-height:20px;
    border:0;
    margin-right:20px;
    background-color:white;
    }
    QComboBox QAbstractItemView QPushButton:hover{
    background-color:cyan;
    }

#  3.参考 #

博客：[https://blog.csdn.net/wukai\_std/article/details/60144318][https_blog.csdn.net_wukai_std_article_details_60144318]

博客：[http://blog.sina.com.cn/s/blog\_a6fb6cc90102vces.html][http_blog.sina.com.cn_s_blog_a6fb6cc90102vces.html]

[20200604214605685.png]: https://img-blog.csdnimg.cn/20200604214605685.png
[20200604220755319.png]: https://img-blog.csdnimg.cn/20200604220755319.png
[20200604221039801.png]: https://img-blog.csdnimg.cn/20200604221039801.png
[https_github.com_gongjianbo_MyTestCode_tree_master_Qt_MyComboBox]: https://github.com/gongjianbo/MyTestCode/tree/master/Qt/MyComboBox
[https_blog.csdn.net_wukai_std_article_details_60144318]: https://blog.csdn.net/wukai_std/article/details/60144318
[http_blog.sina.com.cn_s_blog_a6fb6cc90102vces.html]: http://blog.sina.com.cn/s/blog_a6fb6cc90102vces.html