Qt之自定義檢索框

今天這篇文章主要講解的是自定義搜尋框，不僅僅支援搜尋，而且可以支援搜尋預覽，具體請看效果圖1。網上也有一些比較簡單明瞭的自定義搜尋框，比如qt之自定義搜尋框 ，講的也比較詳細，不過本文的側重點不僅僅是搜尋，而且包括了檢索功能。有興趣的小夥伴可以看下步驟3的思路講解。

圖1 自定義搜尋框

問題分析：

1、資料來源儲存在哪兒？怎麼實現檢索

2、彈出式下拉框顯示和隱藏控制？位置同步？

3、滑鼠hover狀態的顏色設定？

首先在講解原始碼之前，我丟擲了3個問題，有精力的同學可以先思考下這幾個問題，然後在接著往下看，下邊我也會逐一說明這個些問題。

原始碼講解：

1、使用到的類：

stocksortfilterproxymodel：過濾資料來源，該model上的資料索引直接供檢視展示

stocktableview：自定義檢視，用於顯示預覽資料

stocklistwidget：自定義搜尋框

stockitemdelegate：自定義委託，提供自定義繪圖

上邊4個類是完成自定義搜尋框的自定義類，當然除了上述4個類以外，還用到了qt自帶的一些類，更好的理解這些類，那麼這個自定義控制項的思路也就顯得異常好理解。

2、標頭檔案說明

1

class
iview;23
struct
stockitemdelegateprivate4;
910class stockitemdelegate : public
qstyleditemdelegate11;
1718
public:19
void setview(iview *view);
2021
protected:22
virtual
void paint(qpainter *painter
23         , const qstyleoptionviewitem &option
24         , const qmodelindex & index) const
q_decl_override;
2526
virtual qsize sizehint(const qstyleoptionviewitem &option,
27const qmodelindex &index) const
q_decl_override;
2829
private
:30     qscopedpointerd_ptr;
31 };

1

class
iview2;
67class stocktableview : public qtableview, public
iview 8;
2829
struct
stocklistwidgetprivate;
3031
class stocklistwidget : public qwidget, public
qabstractnativeeventfilter
32;

1

class stocksortfilterproxymodel : public
qsortfilterproxymodel
2;

視窗布局：也就是這個檢索框長什麼樣子，效果展示圖1中就可以看到，在這個dmeo中，也就是stocklistwidget類，該類使用了乙個水平布局新增了按鈕和文字輸入框。當文字輸入框內容發生變化時，啟動檢索，然後重新整理檢視上的資料，具體看原始碼

1 connect(d_ptr->m_psearchlineedit, &qlineedit::textchanged, this, [this](const qstring &text)

6if (d_ptr->m_pstockpreviewwidget)
714     });

qt提供了一些列的model來供我們使用，有可以存放資料的，也有一些只供我們使用介面的，在這個demo中我使用的是qstandarditemmodel，他可以儲存我們所需要檢索的源資料，然後qt還提供了乙個檢索model，qsortfilterproxymodel，我繼承該model可以做自己想做的檢索實現，然後把檢索到的資料索引通知到檢視，這樣就完成了資料更新，具體關聯**如下：

1     stockitemdelegate * itemdelegate = new stockitemdelegate(d_ptr->m_pstockpreview);

2     d_ptr->m_pstockpreview->setitemdelegate(itemdelegate);
3     itemdelegate->setview(d_ptr->m_pstockpreview);//委託關聯到檢視上，負責資料繪製
45     d_ptr->m_pstockpreviewwidget->setwindowflags(qt::framelesswindowhint | qt::tool |qt::popup);
67     d_ptr->m_pfiltermodel->setsourcemodel(d_ptr->m_plistmodel);//檢索model檢索的資料來源設定
8     d_ptr->m_pstockpreview->setmodel(d_ptr->m_pfiltermodel);//檢視展示的model為檢索後的model

1

bool stocksortfilterproxymodel::filteracceptsrow(int
source_row
2                                               , const qmodelindex & source_parent) const316
17if
(result)
1821}22
23return
result;
24 }

關於檢視顯示，主要是檢視顯示位置和顯示時機

顯示時機：編輯框內容發現變化的時候顯示，編輯框失去焦點的時候隱藏，這樣也就存在乙個問題，當主視窗拖動時，檢視位置更新怎麼做？

顯示位置：當主視窗位置移動時，更新檢視位置，這個方法看一參考qt捕獲全域性windows訊息。

6、檢視背景色

檢視背景色在新增資料來源的時候設定了預設背景色，在後hover的時候重新設定背景色，hover失效後再恢復預設背景色，實現行hover**如下：

1

void stocktableview::setmouseover(int
row)27
8     stocksortfilterproxymodel * sortmodel = static_cast(model());
9if (sortmodel->rowcount() <=row)
1013
for (int col = 0; col < sortmodel->columncount(); col++)//迴圈遍歷，設定指定行中每乙個item的背景色
1422}23
}2425if (currhovered != -1)26
29     currhovered =row;
30 }

如果您覺得文章不錯，不妨給個打賞，寫作不易，感謝各位的支援。您的支援是我最大的動力，謝謝！！！ 

很重要--**宣告

奮鬥中的無名小卒。。。

很重要--**宣告

qt 之自定義 搜尋框

當然，這些對於qt實現來說毫無壓力，只要思路清晰，分分鐘搞定。列舉 qlineedit actionposition常量值 描述qlineedit leadingposition 0當使用布局方向qt lefttoright時，部件顯示在文字左側，使用qt righttoleft則顯示在右側。qli...

Qt之自定義搜尋框

當然，這些對於qt實現來說毫無壓力，只要思路清晰，分分鐘搞定。列舉 qlineedit actionposition常量值 描述qlineedit leadingposition 0當使用布局方向qt lefttoright時，部件顯示在文字左側，使用qt righttoleft則顯示在右側。qli...

Qt之自定義搜尋框

當然，這些對於qt實現來說毫無壓力，只要思路清晰，分分鐘搞定。實現細節需要如下步驟 組合實現，輸入框 按鈕 事件關聯 獲取輸入文字，進行文字搜尋 為了更人性 易用，這裡有一些細節需要注意 輸入框的文字不能處於按鈕之下 輸入框無文字時必須給與友好性提示 按鈕無文字描述，一般需要給予tooltip提示 ...