1、效果展示
今天这篇文章主要讲解的是自定义搜索框,不仅仅支持搜索,而且可以支持搜索预览,具体请看效果图1。网上也有一些比较简单明了的自定义搜索框,比如Qt之自定义搜索框,讲的也比较详细,不过本文的侧重点不仅仅是搜索,而且包括了检索功能。有兴趣的小伙伴可以看下步骤3的思路讲解。
图1 自定义搜索框
2、功能分析
这个自定义搜索框支持输入一定的数据源,然后通过检索窗口进行搜索数据,匹配到的数据会优先展示到预览下拉框,预览窗口支持hover高亮整行。仔细阅读demo源码的同学可能就会发现其实这个搜搜框的左侧又一个按钮是可以点击的,但是目前还没有添加具体的点击功能。了解了这个控件的功能之后,如果觉得对你有用,那么就可以接着继续往下看实现流程。
3、思路讲解
问题分析:
1、数据源存储在哪儿?怎么实现检索
2、弹出式下拉框显示和隐藏控制?位置同步?
3、鼠标hover状态的颜色设置?
首先在讲解源码之前,我抛出了3个问题,有精力的同学可以先思考下这几个问题,然后在接着往下看,下边我也会逐一说明这个些问题。
源码讲解:
1、使用到的类:
StockSortFilterProxyModel:过滤数据源,该model上的数据索引直接供视图展示
StockTableView:自定义视图,用于显示预览数据
StockListWidget:自定义搜索框
StockItemDelegate:自定义委托,提供自定义绘图
上边4个类是完成自定义搜索框的自定义类,当然除了上述4个类以外,还用到了qt自带的一些类,更好的理解这些类,那么这个自定义控件的思路也就显得异常好理解。
2、头文件说明
委托:负责视图绘制
1 classIView;2
3 structStockItemDelegatePrivate4 {5 int column = 1;//进度条所在列,下标从0开始
6 QTableView * parent =nullptr;7 IView * view =nullptr;8 };9
10 class StockItemDelegate : publicQStyledItemDelegate11 {12 Q_OBJECT13
14 public:15 StockItemDelegate(QTableView * parent =nullptr);16 ~StockItemDelegate(){};