不知道你有沒有遇到過這樣的需求，將一個QComboBox的文字居中顯示。我最近遇到了這樣的需要，主要是要在表頭中增加可以下拉的列表來進行過濾的功能，這也就要求我們必須將下拉列表的文字居中顯示。

這種需求可能實現的方式會有好多種，但我一直堅信，能用原生的就用原生的，或者在原生的控件之上進行一些特例化的改動，讓其滿足我們的需求是最簡單的方式，并且不會過多的影響樣式表設置。

所以這兒我還是選擇了QComboBox，而我們要做的事情就是怎樣將他的文字居中顯示。

下拉列表的居中我們都知道是比較好解決的事情，只要進行簡單的設置就能滿足。

dynamic_cast<QStandardItemModel*>(this->view()->model())->item(index)->setTextAlignment(Qt::AlignVCenter);

頂多，我們再加個循環就能搞定了。

void ComboBox::setTextAlignment(Qt::Alignment alignment) const
{
	auto* model = dynamic_cast<QStandardItemModel*>(this->view()->model());
	if (Q_NULLPTR == model)
	{
		return;
	}

	for (int index = 0, size = model->rowCount(); index < size; ++index)
	{
		if (Q_NULLPTR != model->item(index))
		{
			model->item(index)->setTextAlignment(alignment);
		}
	}
}

比較難的是怎么讓沒有下拉的時候它的文字居中顯示。

我下面的所有例子都是建立在新建類 ComboBox 繼承自 QComboBox 之上的，也就是這樣。

class ComboBox : public QComboBox
{

}

1、 借用其本身的QLineEdit

可能我們首先想到的會是這個方式。大家都知道，QLineEdit 是可以將文字設置為居中顯示的。而QComboBox 中，其實是有一個子控件就是 QLineEdit 的。但是這個子控件被構造的時機是我們必須設置 QComboBox 為可編輯狀態。

this->setEditable(true);
this->lineEdit()->setReadOnly(true);
this->lineEdit()->setAlignment(Qt::AlignCenter);

上面的這幾行代碼其實已經可以實現文字居中顯示了。問題是：

• 太丑了，這樣設置之后的樣式可能跟我們的預期會有點差距，但如果你只是自己玩玩，倒也不是不行。
• 下拉列表的觸發方式被改變了，這樣就只能點擊 QComboBox 后面的那個箭頭觸發下來列表的 popup 了，不管你是否設置這個QLineEdit是只讀，而正常的結果是 QComboBox 的任何一個點都能觸發。造成了操作上的不便。

當然，第二個問題是好解決的，因為我們在很多的地方可能都接觸過事件的過濾，那我們就可以過濾觸發在 QLineEdit 上的鼠標單點的事件來進行手動的 popup 。過濾的事件首先應該是鼠標事件，其次是鼠標的左鍵被 release 的狀態，這樣才能正常的模擬我們的鼠標單擊。

bool ComboBox::eventFilter(QObject* obj, QEvent *event)
{
    if (event->type() == QEvent::MouseButtonRelease &&  dynamic_cast<QMouseEvent*>(event)->button() == Qt::LeftButton)
    {
        showPopup();
    }

    return QObject::eventFilter(obj, event);
}

this->lineEdit()->installEventFilter(this);

就算進行了鼠標事件的過濾，模擬了鼠標單擊，但我們還有一個問題，就是第一個的樣式，這是我們用這種方式解決不了的。要解決這個問題，也就引出了我們下面的第二種方式。
看下實現的效果：

2、 借用外來的 QLineEdit

這種方式其實跟第一種是很像的，區別只是我們用了一個外來的 QLineEdit 代替了 QComboBox 本身存在的 QLineEdit。當然，這種方式下不用將QComboBox 設置為可編輯狀態，因為我們不會用到他自身的 QLineEdit。

auto lineEdit = new QLineEdit();
lineEdit->setReadOnly(true);
lineEdit->installEventFilter(this);

this->setQLineEdit(lineEdit);

這樣的效果跟我們第一種的效果是完全不一樣的。也基本上滿足了我們的需求。如果只是淺嘗輒止一下，那到這兒也就差不多了。

第二種的效果：

3、 重新繪制

為什么我說如果只是簡單的進行一下測試，到第二種方法的時候就可以結束了，因為這種方式，會稍微有點難度，但難度也不大。

如果你經常會時不時地去瞄一眼Qt的源碼，或許你就會發現很多你本來不知道，但非常好用的東西。比如下面這個QComboBox 的 paintEvent 函數.

void QComboBox::paintEvent(QPaintEvent *)
{
     QStylePainter painter(this);
     painter.setPen(palette().color(QPalette::Text));

     // draw the combobox frame, focusrect and selected etc.
     QStyleOptionComboBox opt;
     initStyleOption(&opt);
     painter.drawComplexControl(QStyle::CC_ComboBox, opt);

     // draw the icon and text
     painter.drawControl(QStyle::CE_ComboBoxLabel, opt);
 }

看看這簡單的幾行代碼，外加必要的注釋，基本上已經讓你將這個函數吃透了。

最后一行代碼。

// draw the icon and text
painter.drawControl(QStyle::CE_ComboBoxLabel, opt);

他的作用是繪制 icon 和 text。這特么不就是我們需要的嗎？也就是說，我們只需要修改這一行代碼，就能滿足我們繪制需求了。所以就有了下面的這個重寫函數。

void ComboBox::paintEvent(QPaintEvent* e)
{
    QStylePainter painter(this);
    painter.setPen(palette().color(QPalette::Text));

    QStyleOptionComboBox opt;
    initStyleOption(&opt);
    painter.drawComplexControl(QStyle::CC_ComboBox, opt);

    ...
}

這個函數上面的部分我們保持不變，并且還需要保持一種方式就是當QComboBox可編輯的時候需要跟以前一樣。而我們通過對 QStyleOptionComboBox 類的詳細了解發現，這個類里面是有一個 editable 成員變量的。

class Q_WIDGETS_EXPORT QStyleOptionComboBox : public QStyleOptionComplex
{
public:
    enum StyleOptionType { Type = SO_ComboBox };
    enum StyleOptionVersion { Version = 1 };

    bool editable;
    QRect popupRect;
    bool frame;
    QString currentText;
    QIcon currentIcon;
    QSize iconSize;

    QStyleOptionComboBox();
    QStyleOptionComboBox(const QStyleOptionComboBox &other) : QStyleOptionComplex(Version, Type) { *this = other; }

protected:
    QStyleOptionComboBox(int version);
};

偷下懶，如果 QComboBox 是可編輯狀態，就還是按照原先的那種方式繪制去吧。

if(opt.editable)
    painter.drawControl(QStyle::CE_ComboBoxLabel, opt);

如果不是可編輯狀態：

首先按照QComboBox的大小，獲取到文字顯示的矩形框，這個矩形框獲取的過程中是不包含QComboBox最后面的那個下來箭頭的。

QRect editRect = this->style()->subControlRect(QStyle::CC_ComboBox, &opt, QStyle::SC_ComboBoxEditField, this);

然后繪制一個ButtonLabel，我們都知道，QPushbutton默認是文字居中顯示的，所以不用設置其他的。最后進行繪制。

QStyleOptionButton buttonOpt;
buttonOpt.initFrom(this);
buttonOpt.rect = editRect;
buttonOpt.text = opt.currentText;
buttonOpt.icon = opt.currentIcon;
buttonOpt.iconSize = opt.iconSize;
painter.drawControl(QStyle::CE_PushButtonLabel, buttonOpt);

上面是我們用了同一個繪制 QStylePainter 的對象 painter 實現了繪制過程，但讓，還有另外一種繪制方式，就是利用 QStyle 。

painter.end();

QPainter pt(this);
QStyleOptionButton buttonOpt;
buttonOpt.initFrom(this);
QRect editRect = this->style()->subControlRect(QStyle::CC_ComboBox, &opt, QStyle::SC_ComboBoxEditField, this);
buttonOpt.rect = editRect;
buttonOpt.text = opt.currentText;
  buttonOpt.icon = opt.currentIcon;
  buttonOpt.iconSize = opt.iconSize;
this->style()->drawControl(QStyle::CE_PushButtonLabel, &buttonOpt, &pt, this);

這種方式現實的效果：

完整的函數是這樣的：

void ComboBox::paintEvent(QPaintEvent* e)
{
    QStylePainter painter(this);
    painter.setPen(palette().color(QPalette::Text));

    QStyleOptionComboBox opt;
    initStyleOption(&opt);
    painter.drawComplexControl(QStyle::CC_ComboBox, opt);

    if(opt.editable)
    {
        painter.drawControl(QStyle::CE_ComboBoxLabel, opt);
        return;
    }

    QRect editRect = this->style()->subControlRect(QStyle::CC_ComboBox, &opt, QStyle::SC_ComboBoxEditField, this);

    QStyleOptionButton buttonOpt;
    buttonOpt.initFrom(this);
    buttonOpt.rect = editRect;
    buttonOpt.text = opt.currentText;
    buttonOpt.icon = opt.currentIcon;
    buttonOpt.iconSize = opt.iconSize;

#if 1
    painter.drawControl(QStyle::CE_PushButtonLabel, buttonOpt);
#else
    painter.end();
    QPainter pt(this);
    this->style()->drawControl(QStyle::CE_PushButtonLabel, &buttonOpt, &pt, this);
#endif
}

很多時候，我們總會選擇一些比較方便，能夠輕松解決的方式進行處理，會忽略一些比較耗能的過程，而那些路徑比較長的實現方式，大多時候是我們能夠學到東西的最好路徑。就像選擇 QStylePainter 的繪制，會比前兩種方式更能讓我們了解一個控件或者類的內部。

而 QStylePainter 提供了很多的封裝的控件繪制方法，為我們提供了便利。也不會影響其他的基礎功能。