Qt之自定義搜尋框

簡述

關于搜尋框，大家都經常接觸。例如：浏覽器搜尋、Windows資料總管搜尋等。

當然，這些對于Qt實作來說毫無壓力，隻要思路清晰，分分鐘搞定。

方案一：調用QLineEdit現有接口
- void addAction(QAction * action, ActionPosition position)
  
  在QLineEdit的前/後添加部件，ActionPosition表示部件所在方位。
- QAction * addAction(const QIcon & icon, ActionPosition position)
  
  重載函數。

枚舉：QLineEdit::ActionPosition

常量	值	描述
QLineEdit::LeadingPosition	當使用布局方向Qt::LeftToRight時，部件顯示在文本左側，使用Qt::RightToLeft則顯示在右側。
QLineEdit::TrailingPosition	1	當使用布局方向Qt::LeftToRight時，部件顯示在文本右側，使用Qt::RightToLeft則顯示在左側。

方案二：自定義（可以實作任何組合）

下面，我們來針對自定義進行講解。

簡述
效果
細節分析
Coding
源碼下載下傳

效果

細節分析

實作細節需要如下步驟：

組合實作，輸入框+按鈕
事件關聯
擷取輸入文本，進行文本搜尋

為了更人性、易用，這裡有一些細節需要注意：

輸入框的文本不能處于按鈕之下
輸入框無文本時必須給與友好性提示
按鈕無文本描述，一般需要給予ToolTip提示
按鈕樣式-正常、滑過、按下，以及滑鼠滑過滑鼠樣式手型，

這些都想清楚了，我們就能快速實作一個搜尋框了。

Coding

搜尋框實作

m_pSearchLineEdit = new QLineEdit();
QPushButton *pSearchButton = new QPushButton(this);

pSearchButton->setCursor(Qt::PointingHandCursor);
pSearchButton->setFixedSize(22, 22);
pSearchButton->setToolTip(QStringLiteral("搜尋"));
pSearchButton->setStyleSheet("QPushButton{border-image:url(:/images/icon_search_normal); background:transparent;} \
                                     QPushButton:hover{border-image:url(:/images/icon_search_hover)} \
                                     QPushButton:pressed{border-image:url(:/images/icon_search_press)}");

//防止文本框輸入内容位于按鈕之下
QMargins margins = m_pSearchLineEdit->textMargins();
m_pSearchLineEdit->setTextMargins(margins.left(), margins.top(), pSearchButton->width(), margins.bottom());
m_pSearchLineEdit->setPlaceholderText(QStringLiteral("請輸入搜尋内容"));

QHBoxLayout *pSearchLayout = new QHBoxLayout();
pSearchLayout->addStretch();
pSearchLayout->addWidget(pSearchButton);
pSearchLayout->setSpacing(0);
pSearchLayout->setContentsMargins(0, 0, 0, 0);
m_pSearchLineEdit->setLayout(pSearchLayout);

connect(pSearchButton, SIGNAL(clicked(bool)), this, SLOT(search()));

槽函數實作

void Widget::search()
{
    QString strText = m_pSearchLineEdit->text();
    if (!strText.isEmpty())
    {
        QMessageBox::information(this, QStringLiteral("搜尋"), QStringLiteral("搜尋内容為%1").arg(strText));
    }
}

源碼下載下傳

Qt之自定義搜尋框
Qt之QLineEdit