QT定制有标题的扁平化下拉框控件

关键字：QT，QComboBox，QLineEdit，QListView，QPushButton，QMenu，QWidgetAction，setStyleSheet

OS：Windows 7

方法一：QComboBox+QLineEdit+QListView

相关问题链接：QComboBox: Can we make the entire combobox clickable, not just the dropdown button (arrow) itself?

为了使整个combobox都是可点击的，所以加个QTComboBoxButton类继承QLineEdit，在mousePressEvent里面showPopup。

class QTComboBoxButton : public QLineEdit
{
Q_OBJECT
public:
QTComboBoxButton(QWidget *parent = 0);
~QTComboBoxButton();

protected:
void mousePressEvent(QMouseEvent *);
};

QTComboBoxButton::QTComboBoxButton(QWidget *parent /* = 0 */) :
QLineEdit(parent)
{
}

QTComboBoxButton::~QTComboBoxButton()
{
}

void QTComboBoxButton::mousePressEvent(QMouseEvent * e)
{
QComboBox* combo = dynamic_cast<QComboBox*>(parent());
if(combo)
combo->showPopup();
}

QComboBox+QLineEdit+QListView的使用如下：

QComboBox* myCombo = new QComboBox;
myCombo->setView(new QListView());
myCombo->setEditable(true);
myCombo->setLineEdit(new QTComboBoxButton(m_pAnswer));
myCombo->lineEdit()->setReadOnly(true);
myCombo->addItem("Option1");
myCombo->addItem("Option2");
myCombo->addItem("Option3");
myCombo->setMaxVisibleItems(myCombo->count());
myCombo->lineEdit()->setText("Please select");
QString arrowImagePath = "c:\arrow.png";
myCombo->setStyleSheet("QComboBox {font-family: \"Arial\"; font-size: 13px; padding: 3px 0x 3px 5px;}"
"QComboBox::drop-down {subcontrol-origin: padding; subcontrol-position: top right; width: 30 px; border: 0px;}"
"QComboBox::down-arrow {image: url("+ arrowImagePath +");}");
myCombo->view()->setStyleSheet("QListView {font-family: \"Arial\"; font-size: 13px; outline: 0px;}"
"QListView::item {padding: 3px 0x 3px 5px; border-width: 0px;}"
"QListView::item:selected {background-color: rgb(74, 144, 226);}");

UI效果如下图：



方法二：QPushButton+QMenu+QWidgetAction

相关问题链接：QMenu: How to customize the menu items of QMenu

定制类QTDropDownButton

class QTDropDownButton : public QPushButton
{
Q_OBJECT
public:
QTDropDownButton(QString text, QWidget *parent = nullptr);

void addItem(QString text);

protected slots:
void menuAboutToShow();
void menuTriggered(QAction *action);

private:
QMenu* menu_;
};

QTDropDownButton::QTDropDownButton(QString text, QWidget *parent) :
QPushButton(text, parent)
{
setFlat(true);
menu_ = new QMenu();
setMenu(menu_);

connect(menu_, SIGNAL(aboutToShow()), this, SLOT(menuAboutToShow()));
connect(menu_, SIGNAL(triggered(QAction*)), this, SLOT(menuTriggered(QAction*)));

setStyleSheet("QPushButton {text-align: left; font-family: Arial; font-size: 13pt; color: #808080; border: 1px solid gray; padding: 5px;}"
"QPushButton::menu-indicator {subcontrol-origin: padding; subcontrol-position: right center; right:5px;}");
menu_->setStyleSheet("QLabel {font-family: Arial; font-size: 13pt; padding: 5px 0 5px 0; background-color: transparent;}"
"QLabel:hover {background-color: rgb(51, 153, 255);}");
}

void QTDropDownButton::addItem(QString text)
{
if(!menu_)
return;

QWidgetAction* wa1 = new QWidgetAction(menu_);
QLabel* l1 = new QLabel(text);
wa1->setDefaultWidget(l1);
menu_->addAction(wa1);
}

void QTDropDownButton::menuAboutToShow()
{
if(menu_)
{
menu_->setFixedWidth(this->width());
}
}

void QTDropDownButton::menuTriggered(QAction *action)
{
if(!action)
return;

QWidgetAction* qwa = dynamic_cast<QWidgetAction*>(action);
if(!qwa)
return;

QLabel* ql = dynamic_cast<QLabel*>(qwa->defaultWidget());
if(!ql)
return;

setText(ql->text());
}

使用QTDropDownButton

QTDropDownButton* ddb = new QTDropDownButton("Please select");
ddb->addItem("Option1");
ddb->addItem("Option2");