Qt 自訂搜尋框元件實作：從佈局到事件處理完整教學

設計目標：打造類似瀏覽器/檔案總管的搜尋體驗

實作細節拆解

1. 組合式設計：QLineEdit (輸入) + QPushButton (搜尋圖示)
2. 事件關聯：按鈕 clicked 訊號連接搜尋槽函式
3. UX 細節：
   • 文字邊距避開按鈕區域 (setTextMargins)
   • 預設提示文字 (setPlaceholderText)
   • 按鈕 ToolTip 與手型游標
   • 按鈕三態樣式：正常/滑過/按下

核心程式碼

搜尋框建構

m_pSearchLineEdit = new QLineEdit(this);
QPushButton *pSearchButton = new QPushButton(this);
pSearchButton->setCursor(Qt::PointingHandCursor);
pSearchButton->setFixedSize(22, 22);
pSearchButton->setToolTip(tr("搜尋"));
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(tr("請輸入搜尋內容"));

// 佈局：按鈕靠右，配合 QLineEdit 內建佈局
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, tr("搜尋"),
                                 tr("搜尋內容為 %1").arg(strText));
    }
}

執行效果

延伸應用：可將 search() 替換為實際資料模型過濾邏輯 (如 QSortFilterProxyModel)，即刻打造可即時過濾的表格/清單搜尋。