1、效果展示
今天這篇文章主要講解的是自定義搜索框,不僅僅支持搜索,而且可以支持搜索預(yù)覽,具體請看效果圖1。網(wǎng)上也有一些比較簡單明了的自定義搜索框,比如Qt之自定義搜索框 ,講的也比較詳細(xì),不過本文的側(cè)重點(diǎn)不僅僅是搜索,而且包括了檢索功能。有興趣的小伙伴可以看下步驟3的思路講解。
圖1 自定義搜索框
2、功能分析
這個(gè)自定義搜索框支持輸入一定的數(shù)據(jù)源,然后通過檢索窗口進(jìn)行搜索數(shù)據(jù),匹配到的數(shù)據(jù)會(huì)優(yōu)先展示到預(yù)覽下拉框,預(yù)覽窗口支持hover高亮整行。仔細(xì)閱讀demo源碼的同學(xué)可能就會(huì)發(fā)現(xiàn)其實(shí)這個(gè)搜搜框的左側(cè)又一個(gè)按鈕是可以點(diǎn)擊的,但是目前還沒有添加具體的點(diǎn)擊功能。了解了這個(gè)控件的功能之后,如果覺得對你有用,那么就可以接著繼續(xù)往下看實(shí)現(xiàn)流程。
3、思路講解
問題分析:
1、數(shù)據(jù)源存儲在哪兒?怎么實(shí)現(xiàn)檢索
2、彈出式下拉框顯示和隱藏控制?位置同步?
3、鼠標(biāo)hover狀態(tài)的顏色設(shè)置?
首先在講解源碼之前,我拋出了3個(gè)問題,有精力的同學(xué)可以先思考下這幾個(gè)問題,然后在接著往下看,下邊我也會(huì)逐一說明這個(gè)些問題。
源碼講解:
1、使用到的類:
StockSortFilterProxyModel:過濾數(shù)據(jù)源,該model上的數(shù)據(jù)索引直接供視圖展示
StockTableView:自定義視圖,用于顯示預(yù)覽數(shù)據(jù)
StockListWidget:自定義搜索框
StockItemDelegate:自定義委托,提供自定義繪圖
上邊4個(gè)類是完成自定義搜索框的自定義類,當(dāng)然除了上述4個(gè)類以外,還用到了qt自帶的一些類,更好的理解這些類,那么這個(gè)自定義控件的思路也就顯得異常好理解。
2、頭文件說明
委托:負(fù)責(zé)視圖繪制