Customize the qcombobox drop-down box, right align the display, and slide the drop-down list

Look at the renderings first ：

Look at the source code ：

1. Set basic style ：

MComboBox::MComboBox(QWidget *parent) : QComboBox(parent)
{
    //   Set up a style sheet , Modify the style of the drop-down box , Also modify the scroll bar style in the drop-down list 
    setStyleSheet(QString("QComboBox{                                "
                          "background:transparent;                   "
                          "border:1px solid #009ae7;                 "
                          "color:rgb(255,255,255);                   "
                          "font-size:20px;                           "
                          "}                                         "
                          "QComboBox::drop-down {                    "
                          "    width: 20px;                          "
                          "    border:none;                          "
                          "}                                         "
                          "QComboBox::down-arrow {                   "
                          "    width:14px;                           "
                          "    height:8px;                           "
                          "    border-image: url(:/img/cbArrow.png); "
                          "}                                         "
                          "QComboBox::down-arrow:on {                "
                          "    top: 1px;                             "
                          "    left: 1px;                            "
                          "}                                         "
                          "QComboBox QFrame{                         "
                          "    background-color:#4be26e;             "
                          "    border:none;                          "
                          "}                                         "
                          "QComboBox QAbstractItemView               "
                          "{                                         "
                          "    outline:0px;                          "
                          "}                                         "
                          "QComboBox QAbstractItemView::item         "
                          "{                                         "
                          "    height: 54px;                         "
                          "    color: #ffffff;                       "
                          "    border-bottom: 1px solid #009ae7;     "
                          "}                                         "
                          "QComboBox QAbstractItemView::item:selected"
                          "{	                                     "
                          "    background:transparent;               "
                          "}                                         "
                          "QScrollBar::vertical{ background:transparent; margin: 0px 0px 0px 0px; width: 8px; }   "
                          "QScrollBar::handle:vertical{ border-image: url(:/img/scroll.png); }                    "
                          "QScrollBar::add-line:vertical{ height: 0px; }                                           "
                          "QScrollBar::sub-line:vertical{ height: 0px; }                                           "
                          "QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {background: transparent;} "
                          ));

    //   Embed an edit box , Adjust the text displayed in the drop-down box to align to the right 
    QLineEdit* edt = new QLineEdit();
    edt->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
    edt->setReadOnly(true);
    //   Cancel the edit box and double-click the selected effect 
    connect(edt, &QLineEdit::selectionChanged, [=](){edt->setSelection(edt->text().length() - 1, 0);});
    //   Use the event filter to add an edit box and click , Show the effect of the drop-down box 
    edt->installEventFilter(this);
    setLineEdit(edt);

    // For drop-down boxes item Style beautification , After using the change agent , The style sheet above can display the style of the drop-down table 
    QStyledItemDelegate* itemDelegate = new QStyledItemDelegate();
    setItemDelegate(itemDelegate);

    // The following two sentences can set the drop-down background to transparent 
    view()->parentWidget()->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint);
    view()->parentWidget()->setAttribute(Qt::WA_TranslucentBackground);

    //   Setting the drop-down list can realize the up and down dragging similar to the touch screen 
    QListView* v = static_cast<QListView*>(view());
    v->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);
    //    ui->lstUserList->verticalScrollBar()->setSingleStep(10);
    QScroller::grabGesture(v, QScroller::LeftMouseButtonGesture);
    v->setFlow(QListView::TopToBottom);

    //   Set the maximum display 5 Article content 
    setMaxVisibleItems(5);
}

2.  Drop down list adaptive width , At the same time, adjust the text right alignment of the drop-down items

void MComboBox::adjustItemWidth()
{
    if(count() <= 0)
        return;

    QStandardItemModel* md = static_cast<QStandardItemModel*>(view()->model());

    int max_len=0;
    QString max_str;

    QFont ft = font();
    ft.setPixelSize(22);
    QFontMetrics fm(ft);

    //   Calculate the width that the drop-down list should occupy 
    for(int i=0; i < count(); i++)
    {
        int len = fm.width(itemText(i));
        if(max_len < len)
        {
            max_len = len;
            max_str = itemText(i);
        }

        //   Adjust the... Of the drop-down list item Child right justified 
        md->item(i)->setTextAlignment(Qt::AlignRight | Qt::AlignVCenter);
    }

    //   Prevent content from being too long , Beyond display , This causes the display to fail 
    int x = mapToGlobal(rect().topRight()).x();
    max_len = (max_len <= x ? max_len : x);

    //   Set the fixed width of the drop-down list 
    view()->parentWidget()->setFixedWidth(max_len);
}

3. Override the showPopup function , Adjust the position of the drop-down list .

void MComboBox::showPopup()
{
    //   Adjust before display drop-down list 
    adjustItemWidth();

    QComboBox::showPopup();

    //   Get the drop-down list window object 
    QWidget* fm = view()->parentWidget();

    //   Get the global location displayed in the drop-down list 
    QPoint fmPt = fm->mapToGlobal(fm->pos());
//    qDebug() << fmPt;

    //   Move the lower box to the right aligned position 
    QPoint pt = fm->mapFromGlobal( QPoint(fmPt.x() - (fm->width() - width()), fmPt.y()) );
//    qDebug() << pt;

    fm->move(pt);
}

4. Filter the click event of the edit box , Respond to clicking the edit box , Show drop down list

bool MComboBox::eventFilter(QObject *obj, QEvent *event)
{
    bool b = QComboBox::eventFilter(obj, event);

    //   Filter edit box click event , The drop-down list will be displayed when the edit box is clicked 
    QLineEdit* ed = lineEdit();
    if(obj == ed && event->type() == QEvent::MouseButtonRelease)
    {
        if(!view()->isVisible())
        {
            showPopup();
        }
        else
        {
            hidePopup();
        }
    }

    return b;
}

The above is the way to realize all the effects , Improve when using QComboBox For custom MComboBox that will do .

Attach the download address of the software source code ：https://download.csdn.net/download/chenxipu123/10966933

Make complaints about it ：CSDN Do not set the download points required for resources , So the source code cannot be shared for free .